HTML5는 웹 페이지 구조를 더 명확하고 이해하기 쉽게 만드는 다양한 의미론적 태그들을 제공합니다. 이러한 태그들은 개발자뿐만 아니라 검색 엔진과 보조 기술에도 유용합니다. 이번 문서에서는 HTML5에서 사용할 수 있는 새로운 의미론적 태그들에 대해 자세히 설명하겠습니다.

의미론적 태그의 중요성

HTML5의 의미론적 태그들은 웹 콘텐츠의 구조와 의미를 정의하여, 검색 엔진과 브라우저가 콘텐츠를 더 잘 이해할 수 있도록 돕습니다. 대표적인 태그들은 다음과 같습니다:

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <main>
• <figure>
• <figcaption>
• <mark>
• <time>
• <details>
• <summary>

1. <header> 태그

<header> 태그는 문서 또는 특정 섹션의 제목이나 네비게이션 링크 등을 포함하는 헤더 영역을 정의합니다.

<header>
    <h1>사이트 제목</h1>
    <nav>
        - [홈](#home)
- [소개](#about)
- [연락처](#contact)
    </nav>
</header>

2. <nav> 태그

<nav> 태그는 주요한 네비게이션 링크를 포함하는 부분을 나타냅니다.

<nav>
    - [홈](#home)
- [소개](#about)
- [연락처](#contact)
</nav>

3. <section> 태그

<section> 태그는 특정 주제나 기능을 가진 독립적인 섹션을 정의합니다.

<section>
    <h2>회사 소개</h2>
    <p>회사에 대한 정보입니다.</p>
</section>

4. <article> 태그

<article> 태그는 블로그 게시물, 뉴스 기사 등 독립적으로 사용 가능한 콘텐츠를 나타냅니다.

<article>
    <h2>기사 제목</h2>
    <p>기사 본문 내용입니다.</p>
</article>

5. <aside> 태그

<aside> 태그는 메인 콘텐츠와 관련된 부가적인 정보(예: 사이드바)를 표시합니다.

<aside>
    <h3>사이드바 제목</h3>
    <p>사이드바 내용입니다.</p>
</aside>

6. <footer> 태그

<footer> 태그는 문서나 섹션의 하단에 위치하며 저작권 정보나 추가 링크 등을 포함합니다.

<footer>
    <p>© 2024 사이트 이름. 모든 권리 보유.</p>
</footer>

7. <main> 태그

<main> 태그는 문서의 주요 콘텐츠를 나타내며, 하나의 문서 내에서 단 하나만 존재해야 합니다.

<main>
    <h1>주요 콘텐츠 제목</h1>
    <p>이곳은 주요 콘텐츠입니다.</p>
</main>

8. <figure> 및 <figcaption> 태그

<figure> 태그는 이미지, 차트, 코드 조각 등 독립적인 콘텐츠를 정의하며, <figcaption> 태그는 해당 콘텐츠의 설명을 제공합니다.

<figure>
    ![설명](image.jpg)
    <figcaption>이미지에 대한 설명입니다.</figcaption>
</figure>

9. <mark> 태그

<mark> 태그는 텍스트를 강조하여 중요한 부분임을 나타냅니다.

<p>다음은 <mark>중요한</mark> 정보입니다.</p>

10. <time> 태그

<time> 태그는 날짜와 시간을 표현하며, datetime 속성을 통해 정확한 값을 제공할 수 있습니다.

<p>행사는 <time datetime="2024-06-15">2024년 6월 15일</time>에 열립니다.</p>

11. <details> 및 <summary> 태그

<details> 태그는 사용자가 보기/숨기기를 통해 추가 정보를 관리할 수 있으며, <summary> 태그는 요약 정보를 제공합니다.

<details>
    <summary>추가 정보 보기</summary>
    <p>여기에 상세 정보가 들어갑니다.</p>
</details>