시맨틱 태그란?

• HTML5의 여러 태그들은 그 자체로 어떤 의미를 지닌다.

  다음의 시맨틱 태그들은 기능적으로는 div 태그와 동일하지만 각각의 종류 자체가

  페이지에서 해당 요소가 갖는 의미와 역할을 나타낸다.

시맨틱 태그의 장점

1. 웹 접근성 개선
   • 스크린 리더로 페이지를 보는 사람들이 필요한 정보를 보다 수월하게 찾을 수 있다.
2. SEO (Search Engine Optimization)
   • 검색 엔진이 페이지를 분석할 때 각 정보의 종류를 파악하는 데에 도움이 된다.
3. 유지 보수와 가독성
   • 모든 구획들이 div들로 구성된 페이지보다 코드를 읽고 구조를 파악하기 쉽다.

태그별 설명

1. <header>

   페이지나 구획의 제목 역할을 하는 요소들을 두는 데 사용된다.

   로고와 제목, 검색창 등이 들어간다.

2. <nav>

   링크들을 포함하는 태그다.

   주로 페이지의 메뉴들이나 색인 등에 사용된다.

3. <footer>

   페이지나 구획의 최하단에 보여지는 푸터에 사용된다.

   페이지의 주인 연락처 및 저작권 정보 등이 들어간다.

4. <main>

   페이지의 주요 내용이 들어간다.

   페이지에서 하나만 존재하여야 한다.

5. <aside>

   사이드바 등 주요 내용과 간접적으로 연관된 컨텐츠를 포함한다.

6. <section>

   페이지의 컨텐츠를 일정 단위의 구획으로 나누는 데에 사용된다.

   더 작은 단위의 컨테이너는 div를 사용한다.

7. <article>

   페이지 내에서 재사용될 수 있거나 페이지로부터 독립적인,

   즉 다른 페이지에서도 사용될 수 있는 컨텐츠에 사용한다.

   기사나 블로그 포스트, 댓글 등에 사용된다.