[웹 디자인] 6일차: HTML5 시멘틱 요소

HTML5 시멘틱 요소란?

HTML5 시멘틱 요소는 문서의 구조와 의미를 명확하게 정의하는 데 사용됩니다. 이러한 요소들은 검색 엔진 최적화(SEO)와 접근성을 향상시키는 데 중요한 역할을 합니다.

주요 HTML5 시멘틱 요소

<header>

• 문서나 섹션의 머리글을 정의합니다.
• 로고, 네비게이션 메뉴, 검색 창 등이 포함될 수 있습니다.

예제:

<header>
  <h1>사이트 제목</h1>
  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">소개</a></li>
      <li><a href="#">연락처</a></li>
    </ul>
  </nav>
</header>

 

<footer>

• 문서나 섹션의 바닥글을 정의합니다.
• 저작권 정보, 연락처 정보, 사이트맵 등이 포함될 수 있습니다.

예제:

<footer>
  <p>&copy; 2024 회사 이름. All rights reserved.</p>
</footer>

 

<nav>

• 네비게이션 링크를 정의합니다.
• 주요 네비게이션 메뉴를 그룹화하는 데 사용됩니다.

예제:

<nav>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">서비스</a></li>
    <li><a href="#">블로그</a></li>
    <li><a href="#">연락처</a></li>
  </ul>
</nav>

 

<section>

• 문서의 일반적인 섹션을 정의합니다.
• 제목이 포함된 독립적인 콘텐츠 섹션을 나타냅니다.

예제:

<section>
  <h2>소개</h2>
  <p>이 섹션은 소개 내용을 포함합니다.</p>
</section>

 

<article>

• 독립적으로 구분되는 콘텐츠를 정의합니다.
• 블로그 글, 뉴스 기사, 포럼 게시물 등에 사용됩니다.

예제:

<article>
  <h2>블로그 글 제목</h2>
  <p>이것은 블로그 글의 본문입니다.</p>
</article>

 

<aside>

• 문서의 주요 콘텐츠와 별도로 분리된 콘텐츠를 정의합니다.
• 사이드바, 광고, 관련 링크 등에 사용됩니다.

예제:

<aside>
  <h3>관련 기사</h3>
  <ul>
    <li><a href="#">기사 1</a></li>
    <li><a href="#">기사 2</a></li>
    <li><a href="#">기사 3</a></li>
  </ul>
</aside>

 

<main>

• 문서의 주요 콘텐츠를 정의합니다.
• 문서의 고유하고 주요한 콘텐츠가 포함됩니다.

예제:

<main>
  <h2>메인 콘텐츠 제목</h2>
  <p>이것은 메인 콘텐츠입니다.</p>
</main>

 

<figure>와 <figcaption>

• <figure>: 독립적인 콘텐츠를 그룹화하는 요소로, 주로 이미지나 다이어그램 등에 사용됩니다.
• <figcaption>: <figure> 요소의 설명을 제공하는 요소입니다.

예제:

<figure>
  <img src="image.jpg" alt="예시 이미지">
  <figcaption>이미지 설명</figcaption>
</figure>

 

<time>

• 날짜와 시간을 정의합니다.
• 기계가 읽을 수 있는 형식으로 시간 데이터를 제공하는 데 유용합니다.

예제:

<p>게시일: <time datetime="2024-06-18">2024년 6월 18일</time></p>

 

결론

HTML5 시멘틱 요소를 사용하면 문서의 구조와 의미를 명확히 할 수 있습니다. 이러한 요소들은 검색 엔진 최적화(SEO)와 접근성 향상에 큰 도움이 됩니다. 이번 글에서는 주요 HTML5 시맨틱 요소와 그 사용법에 대해 배웠습니다.

다음 글에서는 HTML 멀티미디어 요소에 대해 알아보겠습니다.

다음 글에서 만나요!