HTML 시맨틱 태그

HTML 시맨틱 태그

• header
  요소 및 탐색에 도움을 주는 영역(제목, 로고, 검색폼 등을 포함)

• footer
  문서의 작성자, 저작권 정보 등이 포함된 영역으로 일반적으로 하단에 위치

• main
  문서 body의 주요 콘텐츠를 나타냄. 문서의 핵심 주제나 기능을 포함하는 영역(문서의 유일한 내용이어야 하므로 사이드바, 탐색링크, 저작권 정보, 사이트 로고 등 반복되는 콘텐츠를 포함해선 안됨)

• nav
  페이지 내, 또는 다른 페이지로의 링크를 보여주는 영역(메뉴, 목차 등)

• section
  HTML 문서의 독립적인 영역, 주로 제목 요소로 h 태그를 포함

• h1
  "이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)

• article
  문서, 페이지. 애플리케이션 또는 사이트 안에서 독립저긍로 구분해 배포하거나 재사용할 수 있는 영역(ex. 게시판, 블로그 글, 매거진, 뉴스 기사 등)
  + 하나의 문서가 여러 개의article을 가질 수 있음(ex. 블로그를 스크롤 했을때 나오는 각각의 글)

• aside
  문서의 주요 내용과 간접적으로만 연관된 영역(사이드바, 콜아웃 박스)

• figure
  독립적인 콘텐츠를 표현, figcaption 요소를 사용해 설명을 붙일 수 있음(피규어, 설명, 컨텐츠는 하나의 단위로 참조), 이미지/디이어그램/사진 등

• figcaption
figure 요소의 설명 혹은 범례

• del
  제거된 텍스트의 범위 영역

• hgroup
  다수의 h1~h6 요소를 묶을 때 사용(제목, 부제목),p태그도 포함OK

• i
  텍스트에서 어떤 이유로 주위와 구분해야 하는 영역

• pre
  미리 서식을 정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현(요소 내 공백문자를 그대로 유지)

• progress
  어느 작업의 완료 정도를 나타냄, 주로 진행 표시줄의 형태

• time
  사람이 읽을 수 있는 형태의 날짜와 시간 데이터를 정의할 때 사용(시간의 특정 지점 또는 구간)

• dl/dt/dd dl: 용어를 설명하는 목록/ dt: 용어의 제목/ dd: 용어를 설명
  + dt : 인라인 요소만 포함/ dd : 어떠한 태그가 와도 상관 없음

그외 태그

p a address fieldset legend input label ol q small sub time sup em strong

✅ 시맨틴 마크업의 이점

1. 검색 엔진의 최적화로 검색 랭킹에 영향을 준다(SEO)
2. 웹 접근성에 효율적 시각 장애인이 화면 리더기로 페이지를 탐색할 때 시멘틱 태그가 도움을 준다
3. 코드의 가독성을 높여 유지 보수에 용이함