시멘틱태그는 개발자와 브라우저에게 해당 태그가 쓰인 용도를 명확하게 전달해줍니다.
예를들어 시멘틱태그가 아닌 <div>와 <span>같은 경우는 해당 내용에 대한 어떠한 정보도 전달해주지 않습니다.
하지만 <form>,<table>,<article>같은 시멘틱태그들은 해당 내용의 의미를 정확하게 전달할 수 있습니다.
기존 HTML4에서 개발자들은 태그에 직접 클래스나 아이디로 이름을 부여해왔습니다. header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav같은 것들을 말이죠.
위와 같은 작업방식은 검색엔진이 여러분의 웹페이지 컨텐츠를 검색하기 불가능하게 만들었습니다.
하지만 이제는 HTML5의 시멘택 태그를 (<header>,<footer>,<nav>,<section>,<article>) 이용해서 해당 작업이 보다 수월해 졌습니다.
W3C에서 제공하는 시멘틱웹 문서에 따르면 "시멘틱 태그를 이용하면, 애플리케이션, 기업 및 커뮤니티간에 데이터를 서로 공유하고 재사용 할수 있다고" 말하고 있습니다.
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
문서에서 하단부분의 영역을 지정하는 태그입니다. <footer>태그는 해당 내용에 대한 정보를 포함하고 있어야합니다.
일반적으로 푸터에는 문서의 저자, 저작권에 대한 정보 약관, 컨택 정보등을 표시합니다.
마찬가지로 하나의 문서안에 여러개의 <footer>태그가 올 수도 있습니다.
문서의 상단영역
<header>태그는 문서나 섹션의 머리말 부분을 지칭합니다. <header>태그는 소개내용에 해당하는 컨첸트의 그릇으로써 사용되야 합니다.
하나의 문서에 여러개의 <header>태그도 사용가능합니다.
아래 예제는 하나의 기사안에 적절하게 머리말부분을 적용한 사례입니다.
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
<section> 태그는 문서에서 특정 구역을 나타낼때 쓰입니다.
W3C에서 제공하는 HTML5관련 문서에 따르면, 해당 태그는 제목과 컨텐츠로 구성되어진 의미있는 그룹덩어리를 표현할때 쓰인다고 말하고 있습니다.
일반적으로 홈페이지는 소개, 본문, 연락처정보등의 섹션으로 분할될 수 있습니다.
