[HTML] 시멘틱 태그 (Semantic Tag)

Libra·2022년 6월 23일
0
post-thumbnail

📝Semantic Tag(시멘틱 태그) 란??

HTML5로 넘어오면서 태그의 가장 큰 변화는 시멘틱 태그이다.

 일단, "Semantic"의 사전적 정의는 "의미론적" 이다.

즉, 시멘틱 태그는 각각 의미를 포함하고 있는 태그이다.

 이러한 시멘틱 태그는 마치 컵,연필,지우개와 같이 설명이 없어도 바로 용도를 유추 할 수 있게 한다.

예를 들어서...
<div>,<span>과 같은 태그만을 사용하면 용도를 바로 알아차리 힘들지만,
헤더에는<header> // 메뉴에는<nav> // 메인에는<main>과 같은 태그를 사용하면 보다 쉽게 용도를 유추할 수 있다.


📌시멘틱 태그의 장점

  • SEO최적화(검색엔진) : 검색엔진은 자동으로 내 웹사이트를 분석하여 사용자들에게 제공하기 때문에 시멘틱 태그를 잘 사용하면 검색 결과의 노출에 유리할 수 있게 해준다.

  • Accessibility(접근성) : '스크린 리더' 나 '키보드'를 이용하여 웹에 접근 할때 보다 뛰어난 접근성을 제공해준다.

  • 개발자(우리)를 위해 : 코드공유시 이해하기 쉽고, 유지보수성을 높여준다.


📌시멘틱 태그의 구조

  1. 시멘틱 태그의 기본 구조1
  2. 시멘틱 태그의 기본 구조2
  3. 시멘틱 태그의 기본 구조3

사진 자료 출처: 구조1, 구조2, 구조3


📌시멘틱 태그의 종류

가장 많이 쓰는 태그들...

  1. <header>
    • 머리글, 제목, 헤더
  2. <nav>
    • 네이게이션, 목차, 리스트
    • 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
  3. <aside>
    • 사이드 바
    • 본문 외에 부수적인 내용을 주로 표현하는 태그
  4. <main>
    • 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
  5. <section>
    • 말그대로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용
    • 같은 테마를 가진 여러개의 콘텐츠의 그룹화
  6. <article>
    • 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용
    • 그 자체로 의미가 있는 웹사이트의 부분
    • 독립적으로 배포 또는 재사용되도록 의도 된 문서
  7. <footer>
    • 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
    • 일반적으로 섹션의 작성자에 대한 정보
    • 저작권 데이터 또는 관련 문서에 대한 링크를 포함한다.

기타 태그들

  • <address> 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능

  • <hgroup> 제목과 관련된 부제목을 묶는 태그

  • <main> 이름처럼 문서 <body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.

  • <details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.

  • <figure> 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용

  • <figcaption> <figure> 요소의 설명 캔션(caption) 정의

  • <mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조

  • <time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현

  • <summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

태그 더 알아보기

📚HTML 요소 참고서 바로가기


📌예제) 분석하기

내가 만들었던 html 레이아웃 분석


📌햇갈리는 태그들

article vs section

  • article독립적이므로 다른 페이지에 보여줬을때 문제가 없어야함
  • section연관된 내용을 묶을때 사용함

i vs em
b vs strong

  • i,em : 이탈릭체 // b,strong : 볼드

  • i,b시각적으로만 강조가 된다 (책의 제목, 인용구 처럼 시각적으로만 필요한 곳)
    em,strong 은 시각 뿐만 아니라 스크린 리더기에서도 강조가 된다(진짜로 강조해야하는 내용에 사용)

ol vs ul vs dl

  • ol : 순서가 중요한 경우에
  • ul : 순서가 없는 경우에
  • dl : 정의, 설명 목록에

img vs CSS-background

  • img : 이미지가 문서에 포함되는 중요한 내용일때
  • css-background : 문서에 제외되는 스타일링이 목적일때

button vs a

  • button : 특정한 액션을 위해
    -ex) 로그인, 추천하기
  • a : 어딘가로 이동할때(링크)
    -ex) home버튼

table vs CSS

  • table : 행과 열로 되어 있는 데이터에 사용
  • CSS : flexgrid 사용
    (*옛날에는 CSS가 발전하지 못해서 table을 많이 썼음)

참고 자료 출처

https://www.youtube.com/watch?v=T7h8O7dpJIg
https://stonefree.tistory.com/59
https://velog.io/@syoung125/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag-%EC%9E%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://snusang.tistory.com/4

태그 더 알아보기
📚HTML 요소 참고서 바로가기

0개의 댓글