시멘트 마크업
• bamjun
시멘틱 마크업은 웹 페이지의 HTML을 작성할 때 사용되는 개념입니다. 이는 웹 페이지의 요소들이 그들의 의미나 콘텐츠의 유형에 따라 태그로 구분되는 것을 의미합니다. 예를 들어, <article> 태그는 독립적인 콘텐츠를, <nav> 태그는 탐색 링크들을, <footer> 태그는 푸터 정보를 나타냅니다. 시멘틱 마크업의 목적은 웹 페이지의 구조를 더 명확하게 하여 검색 엔진 최적화(SEO)에 도움을 주고, 웹 접근성을 향상시키며, 웹 개발자들이 코드를 더 쉽게 이해하고 관리할 수 있게 하는 것입니다.
시멘틱 마크업의 예제를 보겠습니다. 아래는 HTML5에서 사용되는 몇 가지 시멘틱 태그들을 포함하는 간단한 웹 페이지의 구조입니다:
<!DOCTYPE html>
<html>
<head>
<title>시멘틱 마크업 예제</title>
</head>
<body>
<header>
<h1>나의 웹사이트</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#news">뉴스</a></li>
<li><a href="#contact">연락처</a></li>
<li><a href="#about">정보</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>홈</h2>
<p>여기는 홈 섹션입니다.</p>
</section>
<article id="news">
<h2>뉴스</h2>
<p>최신 뉴스를 여기에서 확인하세요.</p>
</article>
<footer>
<p>저작권 © 2024 나의 웹사이트</p>
</footer>
</body>
</html>
이 예제에서는 <header>, <nav>, <section>, <article>, <footer>와 같은 시멘틱 태그들을 사용하여 웹 페이지의 구조를 구성했습니다. 각 태그는 웹 페이지의 다른 부분을 의미론적으로 표현합니다. 예를 들어, <header>는 페이지의 머리글을, <nav>는 탐색 링크들을, <article>는 독립적인 콘텐츠를, <footer>는 페이지의 바닥글을 나타냅니다. 이런 방식으로 구조화하면 콘텐츠의 의미가 명확해지고, 웹 페이지가 더 접근하기 쉽고, 검색 엔진에 의해 더 잘 이해될 수 있습니다.