10-1 HTML4 문서 vs HTML5 문서
HTML4 문서
실제로 웹 사이트를 만들 때는 소스가 수천 줄이 넘기 때문에 <div id="header">나 <div id="content"> 등을 일일이 살펴보면서 헤더, 메뉴, 사이드바 등을 찾는 것이 쉽지 않다. 그렇다면 헤더나 사이트 내용, 메뉴 등 반드시 필요한 요소에 맞는 태그를 미리 약속해 놓으면 어떨까 하는 이유에서 HTML5 표준안에서 문서 구조를 만드는 시맨틱 태그가 등장했다.
시맨틱 태그가 사용된 HTML5 문서
'시맨틱'이란 '의미론적인, 의미가 통하는'이라는 뜻으로 시맨틱 태그(semantic tag)를 보면 그 부분이 어떤 역할을 하는지 쉽게 알 수 있다.
- 사이트 제목과 로고, 검색 창 등이 있는 헤더(header)
- 여러 내용이 있는 본문(contents)
- 본문 외 내용을 나타내는 사이드바(sidebar)
- 저작권 정보와 제작자 정보를 표시하는 푸터(footer)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<header>
<h1>애완견 종류</h1>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</header>
<section>
<h2>활달한 강아지</h2>
<article>
<h3>요크셔테리어</h3>
<p>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</p>
</article>
<article>
<h3>말티즈</h3>
<p>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</p>
</article>
<article>
<h3>포메라이언</h3>
<p>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.</p>
</article>
<article>
<h3>골든 리트리버</h3>
<p>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</p>
</article>
</section>
<footer>
<p>published by funnycom</p>
</footer>
</body>
</html>
왜 시맨틱 태그로 레이아웃을 만들어야 할까?
HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 나타나는 모습은 똑같다. 하지만 실제로 웹 브라우저에서 문서를 처리할 때는 매우 큰 차이가 있다.
HTML5의 시맨틱 태그로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있다.