HTML 시맨틱 마크업은 웹 페이지를 의미론적으로 설계하는 방식입니다. 즉, 내용의 의미를 이해할 수 있도록 태그를 사용하는 것입니다. 이 방식을 사용하면 검색 엔진이 페이지의 내용을 더 잘 이해할 수 있고, 스크린 리더 사용자와 같이 시각적으로 정보를 이해하기 어려운 사용자도 콘텐츠에 더 쉽게 접근할 수 있습니다.
시맨틱 마크업은 기본적으로 HTML5에서 적극적으로 도입되었습니다. 시맨틱 태그는 헤더, 푸터, 내비게이션, 섹션, 아티클, 사이드바, 폼 등과 같은 의미적으로 구분되는 영역에 사용됩니다. 시맨틱 마크업을 사용하여 웹 페이지를 구성하면 검색 엔진 최적화(SEO)에도 유리하고, 웹 접근성도 향상됩니다.
시맨틱 마크업을 사용할 때는 구조와 의미를 가지는 태그를 선택하는 것이 중요합니다. 예를 들어, 기존에는 <div> 태그로 모든 요소를 감쌌지만, 시맨틱 마크업에서는 적절한 태그를 사용하여 요소를 구분합니다. 이렇게 하면 웹 페이지의 구조와 의미를 더욱 명확하게 전달할 수 있습니다.
사용법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시맨틱 마크업 예시</title>
</head>
<body>
<header>
<h1>웹 페이지 제목</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>섹션1 제목</h2>
<p>섹션1 콘텐츠</p>
</section>
<section>
<h2>섹션2 제목</h2>
<p>섹션2 콘텐츠</p>
</section>
</main>
<footer>
<p>저작권 © 2023</p>
</footer>
</body>
</html>
위의 예시에서는 <header>, <nav>, <main>, <section>, <footer> 등의 시맨틱 태그를 사용하여 웹 페이지의 구조를 표현합니다. 이러한 태그를 사용하면 코드를 읽고 이해하는 데 편리하고, 검색 엔진에서도 웹 페이지의 내용을 더 잘 이해할 수 있습니다.
'IT > html' 카테고리의 다른 글
| html colspan rowspan (0) | 2023.02.23 |
|---|---|
| html 테이블 (0) | 2023.02.23 |
| html 엔티티코드 (0) | 2023.02.22 |
| html sup sub 태그 (0) | 2023.02.22 |
| html br 태그 (0) | 2023.02.22 |
댓글