HTML5 의미론적 태그

 

HTML5에서 도입된 의미론적(semantic) 태그들은 웹 페이지의 각 부분이 어떤 역할을 하는지 명확하게 정의하며, 웹사이트의 접근성을 개선하고, 검색 엔진 최적화(SEO)에도 도움을 줌.

 

HTML5에서 흔히 사용되는 의미론적 태그 예시

• <header>
  • : 페이지나 섹션의 머리글을 나타냅니다. 보통 로고, 제목, 네비게이션 링크 등을 포함합니다.
• <nav>
  • : 네비게이션 링크를 위한 태그입니다. 주 메뉴, 목차, 색인 등의 네비게이션 링크를 감싸는 데 사용됩니다.
• <article>
  • : 독립적으로 구분되거나 재사용 가능한 내용을 나타냅니다. 예를 들어, 블로그 글이나 뉴스 기사, 포럼 게시물 등이 이에 해당합니다.
• <section>
  • : 문서나 애플리케이션의 독립적인 섹션을 나타냅니다. 각 섹션은 주로 한 주제에 대한 내용을 포함합니다.
• <aside>
  • : 본문과 간접적으로 관련된 내용을 위한 태그입니다. 사이드바, 광고, 사이드 메뉴 등을 나타내는 데 사용됩니다.
• <footer>
  • : 페이지나 섹션의 바닥글을 나타냅니다. 저작권 정보, 연락처 정보, 백 링크 등을 포함할 수 있습니다.
• <figure> 및 <figcaption>
  • : 이미지, 도표, 코드 목록 등의 자체적인 컨텐츠를 <figure>로 감싸고, 해당 컨텐츠에 대한 설명을 <figcaption>으로 제공합니다.
• <main>
  • : 웹 페이지의 주요 콘텐츠를 나타냅니다. 한 문서에 하나의 <main> 태그만 있어야 합니다.