HTML5 Semantic 태그라는 용어는 낱말에서 의미를 유추할 수 있는 유의미의 태그라는 의미입니다.
반면 무의미 태그는 <div> 또는 <span> 처럼 낱말에 어떤 특정한 의미가 없이 여러가지 용도로 구역을 구분하기 위해 쓰는 타입이라고 볼 수 있습니다.
유의미 태그들은 단어 자체에 의미가 포함된 것으로 예를 들면 <form>, <table>, 및 <img> 같은 것도 포함되는데 그 태그안에 포함될 내용을 그 태그가 의미하고 있습니다.
크롬, 사파리, 파이어폭스, 익스플로러 등 대부분의 브라우저가 HTML5 의 유의미 태그를 지원합니다.
HTML5 에서는 웹 페이지를 여러 영역으로 나누고 각각 새로운 유의미 태그들을 제안하였습니다.
그 전의 HTML4 까지는, 웹 개발자들은 자기 자신의 속성 이름을 태그내에 생성하고 스타일 페이지에 각자 정의해서 사용해 왔었습니다.
그러다 보니 서치 엔진들이 웹페이지 내용을 정확하게 인식하는 것이 매우 어려웠습니다.
그래서 HTML5 에서는 이를 표준화하기 위하여 <header> <footer> <nav> <section> <article> 등의 유의미 태그들을 규정하게 되었습니다.
<header>
<nav>
<section>
<article>
<aside>
<footer>
HTML5 <section> 태그는 말그대로 문서에서 섹션을 지정하는데, 섹션이란 일반적으로 머리글을 가지면서 같은 주제단위로 묶어진 내용의 그룹을 의미합니다.
웹 사이트 홈페이지의 내용은 예를 들면, 회사소개, 주요제품, 찾아오시는 길 등으로 주제별(섹션별)로 내용을 구분할 수 있겠습니다.
<section>
<h1>네이버 회사 소개</h1>
<p>네이버는 1998년 1월에 서비스를 시작한 대한민국의 포털 사이트이다....</p>
</section>
HTML5 <article> 태그는 웹 사이트의 다른 내용들과는 상관없이 독립적으로 읽을 수 있을 만한 내용들을 의미합니다.
예를 들면 신문 기사, 블로그 포스트가 아티클 태그에 적당합니다.
<article>
<h1>네이버, 십 년 앞을 바라보는 기업</h1>
<p>최근 인포테인먼트 서비스 강화를 위해 현대엠엔소프트와의 전략적 제휴를 맺었다. 솔루션 및 지도/네비게이션 분야에서...</p>
</article>
HTML5 <header> 태그는 문서 또는 섹션의 헤더를 정의합니다.
<header> 태그는 도입부에서 제목을 담는 용도로 사용됩니다.
<header> 태그는 한 문서에서 여러번 나타날 수 있는데 아래는 아티클 내에서 헤더를 사용한 예입니다.
<article>
<header>
<h1>네이버 회사 소개</h1>
<p>네이버 서비스의 시작 :</p>
</header>
<p>네이버는 1998년 1월에 서비스를 시작한 대한민국의 포털 사이트이다....</p>
</article>
HTML5 <footer> 태그는 문서나 섹션의 바닥글을 의미합니다. 바닥글에는 일반적으로 문서의 작가, 저작권 표시, 사용 약관, 연락처 정보 등을 담게 됩니다. <footer> 태그도 한 페이지내에 여러번 사용될 수 있습니다.
HTML5 <aside> 태그는 사이드 바 처럼, 부수적인 내용을 정의할 때 사용합니다.
<p>주제와 관련된 내용 적는 곳</p>
<aside>
<h3>부수적인 내용의 제목</h3>
<p>부수적인 내용 본문 적는 곳.</p>
</aside>
HTML5 <figure> 및 <figcaption> 태그는 서적이나 신문에서 이미지에 딸린 캡션으로 표시합니다.
캡션의 목적은 이미지에 대한 직접적인 설명을 추가하기 위함입니다.
HTML5 에서는 이미지와 캡션이 <figure> 태그로 하나의 그룹이 될 수 있습니다.
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/38/VanGogh_1887_Selbstbildnis.jpg" alt="빈센트 반 고흐" width="220" height="278">
<figcaption>그림1. - 빈센트 반 고흐 자화상</figcaption>
</figure>
<img> 태그와 함께 <figcaption> 태그로서 그림설명을 추가하였습니다.
그림1. - 빈센트 빌럼 반 고흐 자화상
<style>
table {
border-collapse: collapse;
}
table, td {
border: 1px solid black;
}
</style>
<table style="width:100%">
<tbody>
<tr>
<td colspan="2"><header></td>
</tr>
<tr>
<td colspan="2"><nav></td>
</tr>
<tr>
<td><section></td>
<td rowspan="2"><aside></td>
</tr>
<tr>
<td><article></td>
</tr>
<tr>
<td colspan="2"><footer></td>
</tr>
</tbody>
</table>
<style> body {font-family: Verdana, sans-serif;} header, nav, section, article, aside, footer {border:1px solid grey; margin:5px; padding:5px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style>
<p><br /></p>
<nav>
<a href="/1/" target="_blank">회사 소개</a> |
<a href="/2/" target="_blank">주요 제품</a> |
<a href="/3/" target="_blank">찾아 오시는 길</a> |
<a href="/4/" target="_blank">연락처</a>
</nav>
<section>
<h1>네이버 회사 소개</h1>
<p>네이버는 1998년 1월에 서비스를 시작한 대한민국의 포털 사이트이다....</p>
<p>주제와 관련된 내용 적는 곳</p>
</section>
<aside>
<h3>부수적인 내용의 제목</h3>
<p>부수적인 내용 본문 적는 곳.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/38/VanGogh_1887_Selbstbildnis.jpg" alt="빈센트 반 고흐" width="220" height="278">
<figcaption>그림1. - 빈센트 반 고흐 자화상</figcaption>
</figure>
</aside>
<article>
<h1>네이버, 십 년 앞을 바라보는 기업</h1>
<p>최근 인포테인먼트 서비스 강화를 위해 현대엠엔소프트와의 전략적 제휴를 맺었다.
솔루션 및 지도/네비게이션 분야에서...</p>
</article>
<article>
<header>
<h1>네이버 회사 소개</h1>
<p>네이버 서비스의 시작 :</p>
</header>
<p>네이버는 1998년 1월에 서비스를 시작한 대한민국의 포털 사이트이다....</p>
</article>
<footer>
<p>글쓴이: 핸리 짐꾼</p>
<p>연락처: <a href="mailto:hanleyThePorter@koreaTeam.com">
hanleyThePorter@koreaTeam.com</a>.</p>
</footer>
