<section> 태그는 HTML5에서 도입된 의미론적(semantic) 태그 중 하나입니다. 이 태그는 문서의 논리적인 섹션을 나타내는 데 사용됩니다.
<section> 태그의 주요 용도는 다음과 같습니다:
- 문서 구조화:
- <section> 태그를 사용하여 문서를 논리적인 섹션으로 구분할 수 있습니다.
- 이를 통해 문서의 구조를 명확하게 나타낼 수 있으며, 사용자와 검색 엔진이 문서의 내용을 쉽게 이해할 수 있습니다.
- 접근성 향상:
- 스크린 리더기와 같은 보조 기술은 <section> 태그를 활용하여 문서의 구조를 파악하고 사용자에게 전달합니다.
- 이를 통해 시각 장애인 등 다양한 사용자의 접근성이 향상됩니다.
- 검색 엔진 최적화(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>© 2023 My Website</p>
</footer>
</body>
이와 같이 <section> 태그를 사용하면 문서의 구조를 명확하게 나타낼 수 있으며, 접근성과 검색 엔진 최적화에도 도움이 됩니다.