[HTML5] 시맨틱 태그(semantic tag)란?, 자주 쓰는 태그들
"시맨틱 태그"는 HTML에서 특정 의미를 가지는 태그를 말합니다. 이런 태그들은 웹 페이지의 콘텐츠가 어떤 의미를 가지는지, 어떤 역할을 하는지를 명확하게 설명해줍니다.
예를 들어, <header> 태그는 웹 페이지의 머리글 부분을 나타내고, <footer> 태그는 바닥글 부분을 나타냅니다. <nav> 태그는 네비게이션 링크들을 그룹화하는데 사용되며, <article> 태그는 독립적인 콘텐츠를 나타냅니다.
이런 시맨틱 태그들을 사용하면 웹 사이트를 이해하기 쉬워지고, 검색 엔진이나 스크린 리더 등의 기계적인 도구들도 페이지의 구조와 콘텐츠를 더 잘 이해할 수 있게 됩니다.
header: 웹페이지의 헤더를 나타내는 부분으로, 로고, 제목, 네비게이션 등을 포함할 수 있습니다.
nav: 네비게이션 링크를 그룹화하는 태그로, 보통 메뉴 항목을 포함합니다.
section: 문서의 독립적인 구역을 표시하며, 일반적으로 제목을 포함합니다.
article: 독립적으로 구분되거나 재사용 가능한 영역을 나타내는데 사용합니다. 블로그 글이나 뉴스 스토리와 같은 항목에 사용할 수 있습니다.
aside: 주요 콘텐츠와 간접적으로만 관련이 있는 부분을 나타냅니다. 사이드바나 콜아웃 박스 등으로 사용됩니다.
iframe: 현재 문서 안에 다른 HTML 페이지를 내장할 때 사용합니다.
footer: 웹페이지의 바닥글을 나타내는 부분으로, 저작권 정보, 작성자 정보 등을 포함할 수 있습니다.
address: 문서나 기타 요소의 연락처 정보를 나타냅니다.
코드 예시:
<!DOCTYPE html>
<html>
<head>
<title>시맨틱 태그 예제</title>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
</nav>
</header>
<section>
<h2>섹션 제목</h2>
<article>
<h3>기사 제목</h3>
<p>기사 내용...</p>
</article>
<aside>
<h3>관련 정보</h3>
<p>이 부분은 주요 콘텐츠와 간접적으로만 관련이 있는 정보를 담습니다.</p>
</aside>
</section>
<footer>
<address>
작성자: 홍길동<br>
이메일: hong@example.com
</address>
</footer>
</body>
</html>
