시맨틱 HTML은 웹 페이지에서 콘텐츠의 의미를 명확하게 표현하기 위한 방법입니다. 이를 위해 HTML5에서는 새로운 시맨틱 태그가 도입되었으며, 이를 사용하여 각 콘텐츠 영역의 의미를 명확하게 표현할 수 있습니다. 시맨틱 태그들은 사용자가 보기에는 전혀 차이가 없으나, 검색엔진(SEO)과 브라우저에서 해석하는데, 많은 영향을 주는 태그들입니다.
시맨틱 HTML에서 사용되는 몇 가지 대표적인 태그를 예제와 함께 설명해보겠습니다.
1. <header> 태그
웹 페이지나 섹션의 제목을 정의합니다. 보통 웹 사이트 상단에 위치하며, 로고, 검색창, 로그인 버튼 등이 포함될 수 있습니다.
<header>
<img src="logo.png" alt="My Site Logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
2. <nav> 태그
주요 탐색 링크를 정의합니다. 즉, 사용자가 사이트 내에서 원하는 콘텐츠를 찾을 수 있도록 하는 메뉴를 나타냅니다.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
3. <section> 태그
콘텐츠 영역을 그룹화하며, 주제나 콘텐츠의 흐름을 나타냅니다. 한 페이지에 여러 개의 <section>이 있을 수 있습니다.
<section>
<h2>Section Title</h2>
<p>Section content goes here...</p>
</section>
4. <article> 태그
독립적으로 구성되거나 재사용 가능한 콘텐츠 블록을 정의합니다. 예를 들어 블로그 게시물, 뉴스 기사, 포럼 게시물 등이 해당됩니다.
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>
5. <aside> 태그
주로 콘텐츠 옆에 사이드바를 추가하는 데 사용됩니다. 일반적으로 메인 콘텐츠와 관련된 내용이지만, 필수적이지 않은 부가 정보를 제공합
<body>
<header>
<h1>웹사이트 제목</h1>
</header>
<main>
<section>
<h2>본문 제목</h2>
<p>본문 내용</p>
</section>
<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>
<footer>
<p>저작권 정보</p>
</footer>
</body>
주요 시맨틱 HTML
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
더 많은 요소에 대해서 알고 싶다면, 아래의 링크를 참고하세요.
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
댓글