HTML <main> 태그로 주요 콘텐츠 섹션 구성하기
HTML5의 등장으로 웹 문서의 구조를 보다 의미 있게 구성할 수 있는 시맨틱 태그들이 추가되었습니다. 그 중 하나인 <main> 태그는 웹 페이지의 주요 콘텐츠를 정의하는 데 사용됩니다. 이 글에서는 <main> 태그의 올바른 사용법과 실제 예제를 통해 주요 콘텐츠 섹션을 구성하는 방법을 알아보겠습니다.
1. <main> 태그란?
<main> 태그는 HTML5에서 새롭게 추가된 시맨틱 태그로, 문서의 주요 콘텐츠를 감싸는 데 사용됩니다. 이 태그는 문서 내에서 유일하게 사용되어야 하며, 문서의 핵심적인 내용을 포함합니다. 주로 헤더, 네비게이션, 푸터 등의 보조 콘텐츠를 제외한 부분을 의미합니다.
2. <main> 태그의 사용법
<main> 태그는 단독으로 사용되며, 다른 시맨틱 태그와 함께 웹 페이지의 구조를 명확히 할 수 있습니다. 예를 들어, 헤더와 푸터를 제외한 본문 내용을 <main> 태그로 감싸줍니다.
<body>
<header>
<h1>웹사이트 제목</h1>
</header>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
</ul>
</nav>
<main>
<h2>주요 콘텐츠 제목</h2>
<p>여기에 주요 콘텐츠가 들어갑니다.</p>
</main>
<footer>
<p>푸터 내용</p>
</footer>
</body>
3. <main> 태그의 예제
다음은 <main> 태그를 사용하여 웹 페이지의 주요 콘텐츠 섹션을 구성하는 예제입니다. 이 예제는 블로그 포스트 페이지를 구성하는 방법을 보여줍니다.
<body>
<header>
<h1>블로그 제목</h1>
</header>
<main>
<article>
<h2>포스트 제목</h2>
<p>포스트 내용이 여기에 들어갑니다.</p>
</article>
<aside>
<h3>사이드바 제목</h3>
<p>사이드바 내용이 여기에 들어갑니다.</p>
</aside>
</main>
<footer>
<p>푸터 내용</p>
</footer>
</body>
4. 웹 접근성 향상
<main> 태그는 웹 접근성을 향상시키는 데 중요한 역할을 합니다. 스크린 리더와 같은 보조 기술은 <main> 태그를 통해 주요 콘텐츠 영역을 빠르게 탐색할 수 있습니다. 이를 통해 사용자는 불필요한 네비게이션 요소를 건너뛰고 주요 내용을 바로 접근할 수 있습니다.
5. 결론
<main> 태그는 웹 페이지의 주요 콘텐츠를 정의하고, 문서의 구조를 시맨틱하게 구성하는 데 유용한 도구입니다. 올바르게 사용하면 웹 접근성을 높이고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 이 글에서 소개한 내용을 바탕으로 <main> 태그를 적극 활용하여 보다 의미 있는 HTML 문서를 작성해보세요.
'마크업 언어 > HTML' 카테고리의 다른 글
| HTML 텍스트 태그 <p>, <br>, <hr> 이해와 실전 사용 (0) | 2024.07.22 |
|---|---|
| HTML 헤딩 태그 <h1>부터 <h6>까지, 웹 페이지 제목과 섹션 구성하기 (0) | 2024.07.21 |
| HTML <footer> 태그로 웹 페이지 마무리하기 (0) | 2024.07.18 |
| HTML <aside> 태그, 사이드바와 부가 콘텐츠 관리하기 (0) | 2024.07.16 |
| HTML5 <article> 태그, 웹 문서의 독립적인 콘텐츠 섹션 (0) | 2024.07.14 |
