시맨틱 마크업이란?
시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다.
시맨틱 마크업이란 웹페이지의 의미를 전달하기 위해 구조적으로 의미를 지닌 마크업을 뜻합니다.
이는 곧 검색엔진최적화(SEO)에도 영향을 미치며, 웹 페이지의 가독성과 접근성을 높일 수 있어 전체적인 웹 페이지의 정보전달을 꾀할 수 있습니다.
시맨틱 마크업 예시
<header>
웹 페이지의 머리말을 나타냅니다. 사이트 제목, 로고, 주요 내비게이션 등을 포함할 수 있습니다.
<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>
<nav>
웹 페이지의 주요 내비게이션을 나타냅니다.
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
<section>
문서의 주요 섹션을 나타냅니다. 각 섹션은 일반적으로 제목(<h1> ~ <h6>)을 가지며 뉴스, 블로그 게시물 등과 같은 콘텐츠를 포함할 수 있습니다.
<section>
<h2>섹션 제목</h2>
<p>내용...</p>
<p>내용...</p>
</section>
<article>
독립적으로 구성될 수 있는 콘텐츠 영역을 나타냅니다. 뉴스 기사, 블로그 포스트 등과 같이 독립적으로 구성될 수 있는 내용을 포함할 수 있습니다.
<article>
<h2>제목</h2>
<p>내용...</p>
<p>내용...</p>
</article>
<footer>
웹 페이지의 바닥 글을 나타냅니다. 연락처 정보, 저작권, 페이지 제작일 등을 포함할 수 있습니다.
<footer>
<p>저작권 정보...</p>
<p>연락처 정보...</p>
</footer>
<main>
<body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
<main>
<p>메인 정보1</p>
<p>메인 정보2</p>
</main>
<aside>
문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
<p>
도롱뇽은 도마뱀처럼 생긴 양서류의 일종으로, 애벌레와 성체 모두 짧은 다리와 꼬리를 가지고 있습니다.
</p>
<aside>
<p>거친피도룡뇽은 치명적인 신경독으로 자신을 방어합니다.</p>
</aside>
<figure>
독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
<figcaption>석양의 코끼리</figcaption>
</figure>
마치며
이 밖에도, 다양한 태그들을 통해 의미론적 웹 페이지를 구성할 수 있으며, 의미론적 태그들을 통해 더 나은 웹 페이지 구성은 곧 경쟁력으로 작용합니다. 시맨틱 마크업을 통해 웹 표준을 지키며, 웹 접근성을 향상시켜 웹 페이지 가독성을 높일 수 있으며 웹 페이지의 구조를 의미적으로 선언하고 각 영역의 목적을 명확하게 전달할 수 있습니다.
'Dev > HTML' 카테고리의 다른 글
| 이미지 및 멀티미디어 콘텐츠를 삽입하는 HTML 작성법 (1) | 2023.11.04 |
|---|---|
| 웹 표준과 웹 접근성을 위한 HTML 작성법 (0) | 2023.11.02 |
| 웹 폼 디자인과 유효성 검사를 위한 HTML 작성법 (0) | 2023.10.31 |
| 검색엔진최적화(SEO)를 위한 HTML 마크업 기법 (4) | 2023.10.29 |
| HTML 이란? (0) | 2023.10.25 |
