HTML 5 시맨틱 (Semantic)마크업

HTML 5 시맨틱 (Semantic)마크업

시맨틱(Semantic)은 "의미론적인"이란 뜻을 가진 단어이며, 문서의 의미에 맞게 구성된 웹을 뜻한다.

시맨틱 웹으로 작성하는 이유

1. 검색 엔진 최적화(SEO)
   웹 브라우저에 검색을 하게 되면 검색색엔진을 통해 정보를 제공하는데 이때, 로봇이 프로그램을 이용해 검색엔진의 크롤러가 웹 사이트 정보를 수집하는데 이 행위를 크롤링이라고 한다.
2. 웹 접근성
   웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 하는 것
3. 코드 가독성
   단순히 div 태그를 주로 사용한다면, 구조적으로 파악하기 어려움으로 코드 가독성이 좋아진다.

시맨틱 태그 종류

1. <heade></heade>
   페이지에서 머릿말, 사이트 네비게이션이나 페이지에 대한 정보를 담는 태그입니다. 
   보통 해당 페이지의 로고 및 메뉴등이 들어갑니다.
2. <nav></nav>
   네비게이션 역할을 하는 태그이며, 보통 다른 페이지의 링크를 보여줄때 나타냅니다.
3. <section></section>
   주로 컨텐츠 영역을 나타낼때 사용하며, 주로 문서를 다른 주제로 구분짓기 위해 사용됩니다. 
   필수 요소로 주로 제목(<h1>-<h6>)요소를 자식으로 포함해야 합니다.
4. <article></article>
   문서, 페이지, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있을때 사용됩니다.
5. <aside></aside>
   문서의 주요 내용과 간접적으로만 연관된 부분을 나타낼때 사용합니다.
   주로 배너, 사이트바와 같은 영역에 많이 사용됩니다.
6. <address></address>
   주로 <footer> 안에 사용되고 사이트의 정보 및 연락처를 기입할때 사용됩니다.
7. <foote><footer>
   페이지의 하단 영역에 사용되며, 작성자, 저작권 정보 등을 담습니다.
8. <iframe></iframe>
   현재 문서 안에 다른 HTML 페이지를 삽입할때, 즉 콘텐츠 삽입에 많이 사용됩니다.
   예를 들어 구글맵등을 사용할때 사용합니다.

시맨틱 태그 종류 이미지화