시멘틱 요소
시멘틱 요소란 의미가 있는, 의미론적인 요소를 말한다. 시멘틱 요소를 사용하면 웹페이지의 구조가 달라지지 않지만, 눈에 보이는 차이는 없다. 그러나 의미에 따라 요소를 구분하고 사용하기 수월해진다. 이는 코드의 가독성을 높이고, 검색 엔진 최적화(SEO)에 도움을 준다.
예를 들어, 시멘틱 요소를 사용하지 않은 HTML 문서와 시멘틱 요소를 사용한 HTML 문서를 비교해보자.
[코드 1-1] 시멘틱 요소를 사용하지 않은 HTML 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 요소 예제 페이지</title>
</head>
<body>
<div class="header">
<h1>웹사이트 제목</h1>
<div class="nav">
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="article">
<h2>독립적인 콘텐츠 제목</h2>
<p>이것은 독립적이고 자체 포함된 콘텐츠의 예시입니다. 예를 들어, 블로그 포스트나 뉴스 기사 등이 이에 해당됩니다.</p>
</div>
<div class="aside">
<h3>관련 정보</h3>
<p>이것은 본문 콘텐츠와 관련된 추가 정보를 제공하는 사이드바의 예시입니다. 여기에는 광고, 링크 목록, 소셜 미디어 버튼 등이 포함될 수 있습니다.</p>
</div>
</div>
<div class="footer">
<p>저작권 © 2024. 모든 권리 보유.</p>
<p>연락처 정보: <a href="mailto:example@example.com">example@example.com</a></p>
</div>
</body>
</html>
[코드 1-2] 시멘틱 요소를 사용한 HTML 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 요소 예제 페이지</title>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>독립적인 콘텐츠 제목</h2>
<p>이것은 독립적이고 자체 포함된 콘텐츠의 예시이다. 예를 들어, 블로그 포스트나 뉴스 기사 등이 이에 해당된다.</p>
</article>
<aside>
<h3>관련 정보</h3>
<p>이것은 본문 콘텐츠와 관련된 추가 정보를 제공하는 사이드바의 예시이다. 여기에는 광고, 링크 목록, 소셜 미디어 버튼 등이 포함될 수 있다.</p>
</aside>
</main>
<footer>
<p>저작권 © 2024. 모든 권리 보유.</p>
<p>연락처 정보: <a href="mailto:example@example.com">example@example.com</a></p>
</footer>
</body>
</html>
설명
- <header>: 문서나 섹션의 헤더를 나타낸다. 예를 들어, <header> 태그는 웹사이트 제목과 내비게이션 링크를 포함할 수 있다.
- <nav>: 내비게이션 링크를 그룹화하는 데 사용된다.
- <main>: 문서의 주요 콘텐츠를 나타낸다.
- <article>: 독립적이고 자체 포함된 콘텐츠를 나타낸다. 예를 들어, 블로그 포스트나 뉴스 기사 등이 이에 해당된다.
- <aside>: 본문 콘텐츠와 관련된 추가 정보를 제공하는 사이드바를 나타낸다. 예를 들어, 광고, 링크 목록, 소셜 미디어 버튼 등이 포함될 수 있다.
- <footer>: 문서나 섹션의 푸터를 나타낸다. 저작권 정보나 연락처 정보를 포함할 수 있다.
시멘틱 요소를 사용하면 구조적으로나 의미적으로 더 명확한 HTML 문서를 작성할 수 있으며, 이는 유지보수와 검색 엔진 최적화에 유리하다.