시멘틱 태그

• non-semantic 요소들의 예: <div>와 <span>
  --> 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.

• semantic 요소들의 예: <form>, <table>, <article>
  --> 자신의 컨텐츠를 명확하게 정의한다.

semantic태그를 쓰는 이유

1. 자신의 웹사이트의 구조를 파악하기 쉽다.
2. seo측면에서도 우수하다.
3. HTML문서를 접하는 사람이 어떤 데이터를 봐야할지, 어떤 데이터를 제공하는지 파악하기가 쉽습니다.

semantic tag의 종류

태그	설명
header	문서나 섹션의 머릿글을 지정한다.사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 <form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다.
nav	문서의 navigation을 나타낼 때 사용하고, 보통 메뉴 영역으로 사용합니다. 브라우저가 네비게이션 영역을 알 수 있게되면 검색엔진 색인에 도움을 줄 수 있습니다.
section	페이지의 주요부분을 의미하며, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가진 웹 어플리케이션에서의 페이지의 묶음 단위를 의미합니다
article	section 태그의 하위 개념으로 분류되며 뉴스 기사나 블로그 글 같은 독립적인 내용이 들어갑니다. acticle은 다른 사이트에 배포하거나 재사용이 가능합니다.article 내부에는 footer가 올 수 있는데, 이 때 사용되는 태그는 해당 영역에 대한 꼬리말로 사용됩니다. 주로 acticle 영역에 대한 작성자의 정보나 연락처 등을 넣습니다.
footer	문서 또는 섹션의 바닥글을 지정한다.주로 저작권, 연락처 정보 등 내용이 삽입되며 <header>, <section>, <article> 등 다른 레이아웃 사용가능.
aside	본문에서 약간 벗어난 번외적인 내용을 추가하기 위해 사용하며, 보통 페이지의 양 옆에 배치한다. 주로 사이드바에 사용되며 다른 예로는 배너 광고, 위젯등이 있습니다.