카테고리 없음

<section> 태그를 사용하는 이유

Codev-v 2024. 7. 2. 10:23

<section> 태그는 HTML5에서 도입된 의미론적(semantic) 태그 중 하나입니다. 이 태그는 문서의 논리적인 섹션을 나타내는 데 사용됩니다.

<section> 태그의 주요 용도는 다음과 같습니다:

  1. 문서 구조화:
    • <section> 태그를 사용하여 문서를 논리적인 섹션으로 구분할 수 있습니다.
    • 이를 통해 문서의 구조를 명확하게 나타낼 수 있으며, 사용자와 검색 엔진이 문서의 내용을 쉽게 이해할 수 있습니다.
  2. 접근성 향상:
    • 스크린 리더기와 같은 보조 기술은 <section> 태그를 활용하여 문서의 구조를 파악하고 사용자에게 전달합니다.
    • 이를 통해 시각 장애인 등 다양한 사용자의 접근성이 향상됩니다.
  3. 검색 엔진 최적화(SEO):
    • 검색 엔진은 <section> 태그를 활용하여 문서의 구조와 콘텐츠의 중요도를 파악합니다.
    • 적절한 <section> 태그 사용은 검색 엔진 최적화에 도움이 됩니다.

<section> 태그는 일반적으로 문서의 주요 섹션을 나타내는 데 사용됩니다. 예를 들어, 웹페이지의 소개, 제품 정보, 연락처 정보 등을 각각의 <section> 태그로 구분할 수 있습니다.

html

<body>
  <header>
    <h1>My Website</h1>
    <nav>...</nav>
  </header>

  <main>
    <section>
      <h2>About Us</h2>
      <p>We are a company that provides...</p>
    </section>

    <section>
      <h2>Our Products</h2>
      <ul>
        <li>Product A</li>
        <li>Product B</li>
        <li>Product C</li>
      </ul>
    </section>

    <section>
      <h2>Contact Us</h2>
      <p>Email: info@mywebsite.com</p>
      <p>Phone: 123-456-7890</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2023 My Website</p>
  </footer>
</body>

이와 같이 <section> 태그를 사용하면 문서의 구조를 명확하게 나타낼 수 있으며, 접근성과 검색 엔진 최적화에도 도움이 됩니다.