HTML5에 추가된 웹 페이지 구조 관련 태그

HTML4에서는 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때 <div> 태그에 CSS를 활용하는 방식으로 작업을 했습니다. 그러다 보니 <div> 태그만 봐서는 그 의미를 잘 알 수 없다는 문제가 있었습니다.

따라서 HTML5에서는 이 문제를 보완하기 위해 의미 있는 구조를 나타낼 수 있는 태그들을 추가하여 가독성을 높였습니다. HTML5에 추가된 태그를 다음 표에 정리했습니다.

태그	설명
<header>	머리말을 나타내는 태그
<hgroup>	제목과 부제목을 몪는 태그
<nav>	메뉴 부분을 나타내는 태그
<section>	제목별로 나눌 수 있는 태그
<article>	개별 콘텐츠를 나타내는 태그
<aside>	왼쪽 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그
<footer>	하단의 정보를 표시하는 태그

 

이것만 봐서는 이해가 잘 되지 않을 것입니다. 그림을 통해 HTML4와 HTML5의 웹 페이지 구조가 어떻게 다른지 비교해보겠습니다. 먼저 HTML4의 <div> 태그를 이용해 화면의 레이아웃를 구성하는 방법을 다음 그림에 나타내었습니다,

기초의 화면 레이아웃 구성

 

다음은 시멘틱 웹의 자채 태그를 이용해 구성한 레이아웃입니다. 위 그림과 비교했을 때 디자이너가 좀 더 쉽게 레이아웃을 구성할 수 있습니다.

HTML5를 이용한 화면 래이아웃 구성

 

가독성이 향상된 것을 알 수 있습니다.