Sections
1. 왜 시멘틱한 마크업을 해야할까?
시멘틱 마크업은 인터넷에 떠다니는 정보들을 컴퓨터가 이해할 수 있고, 그 정보를 가공할 수 있도록 하는 것이 목적입니다. 또한, 웹 접근성을 향상시켜 정보 격차를 해소하는 데 도움을 줍니다.
2. <header>
-
소개 및 탐색에 도움을 줍니다.
-
회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함 될 수 있어요.
-
<head>
태그와 혼동하지 마세요! -
HTML 문서가 여러 섹션으로 구성되어 있을 때 각 섹션의 시작 부분에
<header>
를 사용할 수 있습니다 -
헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 없습니다
<!-- 잘못된 예 --> <header> <header></header> </header> <header> <footer></footer> </header>
<!-- 잘못된 예 --> <header> <header></header> </header> <header> <footer></footer> </header>
3. <nav>
-
navigation bar
-
문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여줍니다.
-
내부에는 메뉴, 목차, 브레드크럼(breadcrumb)이 포함됩니다.
- 메뉴
<nav> <ul> <li><a href="#">위니브</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
<nav> <ul> <li><a href="#">위니브</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
- 브레드크럼
<nav> <ol> <li><a href="#">위니브</a></li> <li><a href="#">캐릭터소개</a></li> <li>라이캣</li> </ol> </nav>
<nav> <ol> <li><a href="#">위니브</a></li> <li><a href="#">캐릭터소개</a></li> <li>라이캣</li> </ol> </nav>
-
문서의 모든 링크가
<nav>
안에 있을 필요는 없어요. 페이지의 주요 탐색 링크를 위한 태그입니다. -
하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 웹페이지에 여러 개의
<nav>
태그를 가질 수 있습니다.
4. <footer>
- 페이지의 작성자, 저작권정보, 페이지 관련 문서 등의 내용을 담습니다.
5. <main>
- body의 주요 콘텐츠를 나타냅니다.
- 웹페이지에서 한 번만 사용할 수 있습니다.
- 사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안 됩니다.
- 검색 폼이 주요 기능이라면 예외입니다.
6. <article>
- 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
- 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행합니다.
- 아티클 영역을 제거해도 페이지는 정상적으로 돌아갑니다.
- 아티클이 대표적으로 사용되는 곳은 뉴스 홈페이지입니다.
- 다양한 기사들이 한 페이지에 담겨있지만, 이 기사들은 각각 독립적으로 사용됩니다.
- 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영됩니다.
- 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등
- 제목 요소를 자식으로 포함하여야 합니다!
7. <section>
- 문서 내에서 특정한 섹션을 정의하는 데 사용됩니다. 이 태그는 일반적으로 주제나 컨텐츠를 구분짓기 위해 사용됩니다.
- 뉴스의 사회면 / 연예면 각각의 부분을 나타낼 수 있습니다
- 제목 요소를 자식으로 포함하여야 합니다!
<article>
vs <section>
일단 article 사용을 우선 고민해보세요. 독립적으로 사용한다면 article 사용하시고, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 section을 사용하세요! 단순 스타일링이 목적이라면 div 요소를 사용합니다!
8. <aside>
- 문서의 주요 내용과 간접적으로 연관된 부분을 나타냅니다.
- 문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 하는 공간입니다.
- 광고 배너,사이드바 등에 사용합니다.
9. <hr>
- 이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용합니다.
- 단락을 구분할 때 사용하므로
<p>
태그 내의 사용은 하지 않습니다!
+) 그래도 호환 이슈가 걱정된다면?
- 대부분의 모던 웹 브라우저(Chrome, Firefox, Safari, Edge 등)은 HTML5를 완벽하게 지원합니다. 하지만 오래된 버전의 Internet Explorer(IE)는 HTML5와 시맨틱 태그 지원에 제한이 있습니다.
- 오래된 브라우저와의 호환성을 위해 div 태그를 함께 사용하는 방법도 있습니다.
<div id="header">
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</div>
<div id="main">
<main>
<article>
<h2>Welcome to my website!</h2>
<p>This is the main content area.</p>
</article>
</main>
</div>
<div id="footer">
<footer>
<p>© 2024 Weniv Website. All rights reserved.</p>
</footer>
</div>
<div id="header">
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</div>
<div id="main">
<main>
<article>
<h2>Welcome to my website!</h2>
<p>This is the main content area.</p>
</article>
</main>
</div>
<div id="footer">
<footer>
<p>© 2024 Weniv Website. All rights reserved.</p>
</footer>
</div>
이렇게 div 태그와 시맨틱 태그를 함께 사용하면 오래된 브라우저에서도 문제없이 동작하면서, 동시에 시맨틱 태그의 장점을 활용할 수 있습니다.
시멘틱한 웹사이트 참고하기