[HTML] HTML5, 시맨틱 태그

시맨틱 태그

• HTML5에서는 시맨틱 태그를 사용하여 의미 있는 코드를 작성

시맨틱 태그 장점

• 웹 접근성을 개선 : 스크린 리더로 페이지를 읽을 때 보다 필요한 정보에 수월하게 접근 가능
• 검색 엔진 최적화 : 검색 엔진이 태그만 보고도 사이트 내용을 분석하여 카테고리화 한 정보를 보여줘, 사용자의 이용에 도움을 줌
• 유지보수와 가독성 용이 : 시맨틱 태그로 구분되어 소스 가독성 향상

 

---

nav

• 모든 내비게이션이 아닌 페이지 주요 내비게이션 링크들만 선언하는 것이 좋음
• footer안에서 nav 사용은 불필요
• 사이트 전반전인 이동을 위한 내비게이션과 페이지 전체를 이동하는 내비게이션을 각각 기술할 수 있음

---

section

• 문서나 어플리케이션의 내용을 주제별로  섹션을 구분하는 요소
• h1~h6의 헤딩태그를 사용할 수 있으나 h2~h6 태그 사용을 권장

---

article

• 문서내의 독립적인 글을 표시하여 블로그 글이나 뉴스 본문이 해당됨
• article 요소 안에 article 요소가 들어갈 경우 안쪽의 article요소는 밖에 article 요소의 내용과 관련이 있는 내용이라는 것을 의미
• 블로그의 글과 사용자가 작성한 댓글이 있을 경우 하나의 댓글을 안쪽으로 기술하고, 전체 블로그 글은 바깥은 article로 기술 할 수 있음
• <article> 내부에 <section> 태그를 포함할 수 있고, 반대로 <section> 내부에 <article>를 포함가능
• 접근성을 위해 반드시 heading 태그를 포함

---

aside

• 문서의 주 내용이 아닌 관련성이 낮은 내용들을 표시
• 본문과 직접적인 연관이 없는 관련 사이트 링크나 광고, nav 요소의 그룹 등

---

hgroup

• 섹션의 제목을 나타냄
• 섹션의 제목이 여러 단계를 가지고 있을 때 이를 hgroup 요소로 기술할 수 있음
• 문서의 구조를 나타날 때는 hgroup 안에 있는 가장 높은 레벨의 헤딩을 사용하고, 나머지 요소들은 문서의 구소에서는 나타나지 않음

---

header

• 소개나 내비게이션 기능들의 묶음을 나타냄
• heading 태그가 반드시 포함될 필요는 없음
• 목차, 검색창, 로고 등을 포함할 수 있음
• 섹션으로 간주되지 않으며, 문서 구조상 새로운 섹션이 생성되지 않음

---

footer

• 저자나 저작권 정보 등을 포함
• 저자나 편집자의 연락처 정보는 address 요소로 표현
• 섹션으로 간주되지 않으며, 문서 구조상 새로운 섹션이 생성되지 않음

---

main

• 문서 또는 애플리케이션 body 요소의 메인 콘텐츠에 해당됨
• 문서의 유일한 내용이어야 함
• 사이드바, 검색 링크, 저작권 정보, 로고, 검색 등 반복되는 컨텐츠에는 포함할 수 없음
• 검색폼이 페이지의 주요 기능인 경우에는 사용 가능
• main 요소는 섹션 요소가 아니며, 2개 이상의 요소가 보이면 안되므로 나머지는 hidden 처리
• main은 섹션 요소들을 포함할 수 있으나,  article, section, aside, nav 요소는 main 요소를 자식으로 포함할 수 없음
• main 내부에는 header, footer 요소를 직접적으로 포함하지 않는다.

---

figure

• 그래픽이나 비디오를 위한 캡션 표시
• 사진, 일러스트, 다이어그램, 코드 등이 해당 됨
• 캡션표시 : figcaption 태그 사용

---

video, audio

• 비디오와 오디오 컨텐츠 요소를 태그
• 스크립트로 제어가 가능하도록 스크립트 API가 제공

---

embed

• 플러그인 컨텐츠를 넣을 때 사용

---

mark

• 중요한 텍스트를 나타내는 태그

---

progress

• 작업의 진행상태를 나타내는 태그

---

meter

• 분량이나 수량을 나타내는 태그

---

time

• 시간을 나타내는 태그

---

ruby, rt, rp

• 언어에 음을 다는 것과 같은 표기에 사용

---

canvas

• 그래픽이나 게임과 같은 이미지 구현에 사용하는 태그

---

command

• 사용자가 행할 수 있는 명령 기능을 나타내는 태그

---

details

• 추가적인 정보나 기능을 나타내는 태그
• 요약,제목, 캡션에 대한 정보 : summary 태그 사용

---

datalist

• 미리 정의된 옵션의 묶음 나타내는 태그
• input의 list, datalist의 id로 서로 연결 

---

keygen

• 서버에 공개키를 보내고 로컬의 키 저장소에 개인키를 저장하는 데 사용하는 태그

---

output

• 서식이나 스크립트를 통해 생성된 결과물을 나타내는 태그