[HTML5] Semantic 태그

영역과 기능에 따라 적절한 tag를 사용해야함(웹 접근성(web accessibility)과 SEO(검색엔진 최적화)를 위해)

//영역구분이 확실해지면 그렇지 않은 문서보다 더 적절한 키워드가 추출됨

 

HTML5에서 새로 제공하는 시맨틱 태그들

• <article>본문의 주 내용이 들어가는 공간.
• <aside> 사이드에 위치하는 공간 // 본문과 직접 관련 없는 내용. 카테고리, 태그목록 등. 본문에서 주석 각주
• <figcaption> figure안에서 부가설명.
• <figure> 독립적인 콘텐츠
• <footer> 문서 또는 섹션의 바닥//회사정보, 소유자 소셜미디어정보, 약관 등 문서. 부가정보 // header과 중첩불가.
• <header> 헤더 // 문서 제목, 로고, 작성자, 작성일.(메타정보) // article이나 section내 부가정보 표현에도 씀.
• <main> 콘텐츠//문서에 한번만쓰임. 본문. 콘텐츠 내용(article)들을 감쌈. 
• <mark>
• <nav> 네비게이터 // 사이트 전체 흐름을 제어.(헤더 밑의 링크달린 바(ppt 목록같은)페이지이동,주요메뉴
• <section> 본문의 여러내용을 포함하는 공간(article등을 포함)
• <details> 클릭했을 때 상세 내용이 확장되는 UI 모바일에서 공지사항 같은 페이지.
• <summary> details와 동일.
• <time>

이것 뿐 아니라 태그로 안의 내용을 유추할 수 있는 태그들은 다 semantic이라 볼 수 있다. (ex.table,img,form)