Semantic Tag란?
html 태그는 의미를 가지는 태그와 의미가 없는 태그로 나뉘어 진다. 태그가 의미를 가진다는 건 브라우저와 개발자가 html 코드를 읽으면서 해당 태그가 어떤 의미를 가지는지 알 수 있다는 것이다. 의미가 없는 태그는 내용에 대해 아무 것도 알려주지 않지만 의미가 있는 태그는 내용을 명확하게 정의한다. style 속성으로 눈에 보여지는 부분만 바꿔서는 안되고 Semantic Tag를 활용해야 한다.
의미 없는 태그의 예 : <div>및 <span>
의미를 가지는 태그의 예 : <form>, <table>, <article>Semantic Tag를 사용함으로서 얻는 이점
1. SEO (Search Engine Otimization)
검색엔진은 검색결과를 낼 때, HTML에 담긴 태그를 분석한다. Semantic 태그는 검색엔진이 해당 웹페이지가 어떤 내용을 가지고 있는지 식별할 수 있게 해준다.
2. 소스코드 구조화
브라우저가 소스코드를 보고 어느 부분이 헤더인지 어느 부분이 본문인지 알 수 있다. 따라서 웹 문서를 분석하는 서비스들(ex. 스크린리더기)이 분석하기 용이해진다. 구조화된 코드 덕분에 개발자도 코드 해석이 쉬워져 유지보수하기 용이하다.
Semantic Tag의 종류
<b>태그
<b>태그는 글자를 굵게 표시하는 태그로, bold의 약자이다.
<strong>태그도 같은 기능 하며 최신 표준은 <b>태그 보다는 <strong>태그를 권하고 있다.
예제
<html>
<body>
<b>bold content</b>
normal content
</body>
</html><em>태그
<em> 태그는 강조된 텍스트(emphasized text)를 표현할 때 사용한다.
예제
<p>이제 학교 갈 시간이니 어서 일어나렴. <em>얼른!!</em></p><mark>태그
<mark> 태그는 형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의할 때 사용한다.
예제
<p>이제 학교 갈 시간이니 어서 일어나렴. <mark>얼른!!</mark></p><i>태그
태그는 이탤릭체를 표현할 때 사용하는 태그이다.
예제
<p>이제 학교 갈 시간이니 어서 일어나렴. <i>얼른!!</i></p><article>태그
태그는 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용한다.
예제
<article>
<h2>2월 19일 날씨 정보</h2>
<h3>서울</h3>
<p>맑음</p>
<h3>대전</h3>
<p>흐림</p>
<h3>부산</h3>
<p>비</p>
</article><header>태그
문서나 특정 섹션의 헤더를 정의할 때 사용한다.
예제
<article>
<header>
<h3>날씨 정보</h4>
<h4>2월 19일</h4>
<p>- 기상청 제공 -</p>
</header>
<p>서울 : 맑음</p>
<p>대전 : 흐림</p>
<p>부산 : 비</p>
</article><nav>태그
다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용한다.
예제
<nav>
<a href="/html/intro">HTML</a> |
<a href="/css/intro">CSS</a> |
<a href="/javascript/intro">JavaScript</a>
</nav>### ``태그
HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용한다.
예제
<section>
<h1>HTML</h1>
<p>HTML(HyperText Markup Language)은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의
웹 페이지를 위한 마크업 언어이다.</p>
</section>
<section>
<h1>HTML의 역사</h1>
<p>최초의 HTML은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.</p>
</section>### ``태그
문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.
예제
<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>
<aside>
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>### ``태그
문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용한다.
푸터(footer)는 보통
요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함한다.- 저자(author) 정보
- 저작권 정보
- 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
- 연관 페이지 등
하나의 HTML 문서에는 여러 개의
요소가 포함될 수 있다.예제
<footer>
<p>Copyright © 2018 tcpschool.co.,Ltd. All rights reserved.</p>
<address>Contact webmaster for more information. 070-1234-5678</address>
</footer>