시멘틱 태그란?
시멘틱 태그(semantic tags)는 HTML 문서의 요소들에 의미를 부여하는 역할을 하는 태그들입니다. 이러한 태그는 웹 페이지의 구조와 내용을 의미적으로 표현하여 검색 엔진이나 웹 브라우저가 문서를 이해하고 적절한 방식으로 처리할 수 있도록 돕습니다. 즉, 시멘틱 태그를 사용하면 구글, 빙, 네이버, 다음 등의 검색엔진의 크롤러가 우리 사이트의 글을 볼 때, 웹 페이지의 가독성을 높이고 접근성을 향상시킬 수 있습니다.
시멘틱 태그는 HTML5에서 도입된 요소들로, 웹 페이지의 구조와 의미를 명확하게 전달하기 위해 사용됩니다.
이전의 HTML 버전에서는 일반적인 태그는 단순히 레이아웃을 구성하는 데 사용되어 의미적인 정보를 전달하지 않았습니다.
시멘틱 태그는 웹 페이지의 구조와 의미를 더 명확하게 표현하는데 도움을 줍니다. 각각의 시멘틱 태그는 특정한 의미를 내포하며, 해당 요소의 내용이나 목적을 표현합니다. 이는 검색 엔진 최적화(SEO), 웹 접근성, 코드 가독성, 유지 보수 등 다양한 측면에서 이점을 제공합니다.
이러한 시멘틱 태그들은 웹 페이지의 구조를 더 명확하게 표현함으로써 검색 엔진이 페이지를 이해하고 색인화하는 데 도움을 줍니다. 또한, 시각 장애인과 같은 장애를 가진 사용자를 위한 웹 접근성을 향상시키고, 코드의 가독성과 유지 보수성을 개선합니다.
즉, 온라인 상에 정보를 알리는 글은 인간뿐만 아니라 크롤러(bot)에게도 유용해야 상위에 위치할 수 있는 것입니다.
각 검색엔진 사이트들은 이 크롤러에게 ~한 요소가 있으면 유용한 정보로 처리하자라고 알고리즘을 구성해둡니다.
시멘틱 태그를 써야하는 이유
1. 웹 페이지의 구조 파악이 용이하다.
시맨틱 태그를 사용하면 웹 페이지의 구조가 명확해지기 때문에, 누구나 페이지 구조를 쉽게 파악할 수 있습니다. 페이지 구조를 파악하는 것은 페이지의 사용성을 높이는 데 중요합니다.
2. 검색 엔진 최적화(SEO) 효과가 높아진다.
시맨틱 태그를 사용하면, 검색 엔진이 페이지의 구조를 쉽게 파악할 수 있습니다. 이로 인해, 검색 엔진에서 웹 페이지가 노출되는 가능성이 높아집니다.
3. 웹 접근성(Web Accessibility) 기준 준수.
웹 접근성은 장애인 뿐만 아니라 모든 사용자가 웹 페이지를 이용하는 데 있어서 무리 없이 이용할 수 있도록 보장하는 것을 의미합니다. 시맨틱 태그를 사용하면, 스크린 리더 등의 보조 기기를 사용하는 사용자도 웹 페이지를 쉽게 이용할 수 있습니다.
4. 코드의 가독성이 좋아진다
시맨틱 태그를 사용하면 코드의 의미가 명확해지기 때문에, 코드의 가독성이 좋아집니다. 이를 통해, 코드를 작성하는 과정에서 오류 발생 가능성을 줄일 수 있습니다.
시멘틱 태그 종류
1. <header>
<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>2. <nav>
문서의 네비게이션 영역을 나타냅니다. 주로 링크 목록을 포함하며, 사이트의 주요 탐색 기능을 제공합니다.
본 사이트의 목차와 같은 영역에 사용되며, 때로는 사이드바에 적용되기도 합니다.
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>3. <main>
문서의 주요 콘텐츠를 나타냅니다. 페이지의 핵심 내용이 들어가는 부분으로, 한 문서에 하나의 <main> 요소만 사용해야 합니다. 반복 사용은 절대 금물입니다.
<main>
<h2>웹사이트 소개</h2>
<p>여기에 웹사이트의 내용이 들어갑니다.</p>
</main>4. <article>
문서 내의 독립적인 콘텐츠 블록을 나타냅니다. 뉴스 기사, 블로그 글 등의 개별 항목을 감싸는 데 사용될 수 있습니다.
하나의 문서에 여러 article이 있을 수 있으나, 각각 독립적인 article을 표현합니다.
<article>
<h3>글 제목</h3>
<p>글 내용...</p>
<p>더 많은 내용...</p>
</article>5. <footer>
문서의 바닥글 영역을 나타냅니다. 일반적으로 연락처 정보, 저작권 정보 등을 포함합니다.
<footer>
<p>© 2023 웹사이트. All rights reserved.</p>
<p>문의: example@example.com</p>
</footer>6. <section>
문서 내에서 관련된 콘텐츠를 그룹화하는 데 사용됩니다. 일반적으로 제목(<h1>, <h2> 등)과 함께 사용하여 주제나 내용을 구분합니다.
<section>
<h2>서비스</h2>
<p>서비스에 대한 설명...</p>
</section>
7. <aside>
문서의 주요 내용과는 독립적인 내용을 나타냅니다. 주로 사이드바, 광고, 부가 정보 등을 포함하며, 문서의 주요 내용과의 관련성은 떨어질 수 있습니다.
<aside>
<h3>광고</h3>
<p>특별 할인 이벤트 중입니다!...</p>
</aside>8. <figure>와 <figcaption>
이미지나 그래픽 요소를 감싸고, 해당 요소의 설명을 제공하는 데 사용됩니다. <figure>는 이미지나 그래픽 요소를 나타내고, <figcaption>은 해당 요소의 캡션을 제공합니다.
<figure>
<img src="image.jpg" alt="이미지 설명">
<figcaption>이미지 캡션...</figcaption>
</figure>9. <time>
날짜, 시간, 시간대 등의 시간 정보를 나타냅니다. <time> 요소에는 datetime 속성을 사용하여 기계가 읽을 수 있는 형식으로 날짜와 시간을 지정할 수 있습니다.
<p>게시일: <time datetime="2023-06-12">2023년 6월 12일</time></p>10. <mark>
텍스트 내에서 중요한 부분을 강조합니다. 보통 형광펜으로 텍스트를 칠한 것과 같은 시각적 효과를 줍니다.
<p>이 부분은 <mark>중요한 내용</mark>입니다.</p>11. <blockquote>
다른 소스에서 인용한 텍스트를 나타냅니다. 일반적으로 들여쓰기나 특별한 스타일을 적용하여 인용된 내용을 구분합니다.
<blockquote>
<p>인용된 내용...</p>
<footer>인용 출처</footer>
</blockquote>12. <abbr>
약어 또는 머리글자를 나타냅니다. title 속성을 사용하여 약어 또는 머리글자의 전체 내용을 제공할 수 있습니다.
<p>HTML은 <abbr title="HyperText Markup Language">HTML</abbr>의 약어입니다.</p>15. <datalist>,<option>: <input>
<input> 요소의 미리 정의된 선택 항목 목록을 제공합니다. <datalist> 요소 내에 <option> 요소를 추가하여 선택 가능한 항목을 지정할 수 있습니다.
<label for="fruit">좋아하는 과일: </label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="사과">
<option value="바나나">
<option value="딸기">
<option value="오렌지">
</datalist>16. <progress>
작업 진행 상태를 표시합니다. value 속성을 사용하여 현재 진행 상태를 나타내고, max 속성을 사용하여 작업의 전체 크기 또는 진행 상태의 최댓값을 지정할 수 있습니다.
<p>파일 업로드 진행 상태: <progress value="50" max="100">50%</progress></p>17. <meter>
범위 또는 측정값을 나타냅니다. value 속성을 사용하여 측정값을 지정하고, min과 max 속성을 사용하여 범위를 지정할 수 있습니다.
<p>현재 온도: <meter value="25" min="0" max="100">25°C</meter></p>18. <details>와 <summary>
추가 정보나 상세 내용을 표시하고 숨기는 기능을 제공합니다. <details> 요소는 상세 내용을 감싸고, <summary> 요소는 상세 내용을 열고 닫는 제목을 제공합니다.
<details>
<summary>자세한 내용 보기</summary>
<p>자세한 내용...</p>
</details>