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에 넣어주는게 아니라 아예 태그에 시맨틱적으로 명시해줘서

태그를 짜는 사람도, 보는 사람, 컴퓨터도 사이트의 레이아웃을 훨씬 알아보기가 쉬어졌다.