html5로 들어오면서 가장 크게 변한 점 중 하나가 시맨틱 태그를 도입했다는 점이다.
기존의 html은 레이아웃을 짜기 위해 주로 div를 많이 사용했고,
이런 div는 레이아웃을 단지 짜기 위한 공간을 마련할 뿐 어떤 의미론적인 태그도 부여받지 못한다.
시맨틱이란 말그대로 의미론적이라는 뜻이다.
결국은 시맨틱 태그는 의미론적인 태그라는 뜻인데, 이런 시맨틱 태그를 도입하면서 컴퓨터가 전보다 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조까지 만들어졌다.
기존에는 header나 content나 footer를 줄 때,
<div id="header">이 부분은 헤더!</div>
<div class="section">이 부분은 섹션!</div>
<div id="footer">이 부분은 푸터!</div>
위의 div에 class나 id를 의미적으로 헤더,섹션,푸터를 부여해주면서 레이아웃을 나누곤 했는데
시맨틱 태그로 들어서면 아예 태그로 만들어졌다.
<header>이 부분은 헤더!</header>
<nav>이 부분은 네비게이션!</nav>
<main>
<section>섹션!</section>
<article>아티클!</article>
</main>
<aside>aside 부분!</aside>
<footer>이 부분은 푸터!</footer>
위 코드를 보면 div id나 class에 넣어주는게 아니라 아예 태그에 시맨틱적으로 명시해줘서
태그를 짜는 사람도, 보는 사람, 컴퓨터도 사이트의 레이아웃을 훨씬 알아보기가 쉬어졌다.