*본 포스팅은 책<실전프로젝트 반응형 웹퍼블리싱>의 내용을 기반으로 작성됨.
새로운 구조(New Structure)
HTML5에서는 기존의 XHTML보다 더 의미론적인 구조를 가진 웹 문서를 만들 수 있도록 새로운 요소들이 추가되었다.
예를 들어 웹 문서의 일반적인 구조가 header(머리말), content(내용), footer(꼬리말)의 형식으로 되어 있지만 XHTML에서는 이러한 의미를 가진 요소들이 없었기 때문에 문서의 header 역역인 경우 그룹화 요소인 <div>에 id 속성을 이용해서 <div id="header">와 같이 그 의미를 대신 하였다. 하지만 이러한 방법으로 처리한따고 해서 <div>요소가 문서에서 header의 의미를 가질 수는 없었다.
HTML5에서는 이러한 부분을 해결할 수 있는 <header>요소, <nav>요소, <section>요소, <article>요소, <footer>요소 등의 문서 구조에 대한 요소들이 새롭게 추가되어 더욱 의미 있는 마크업이 가능해졌다. 다만, 문법 규칙에 있어서는 XHTML에 비해 많이 유연해졌다.
예를 들어 XHTML에서는 소문자만 써야 했지만, HTML5에소는 예전의 HTML 4.0 방식처럼 대소문자를 구분하지 않는다든지 <br />, <img />, <input />, <hr />등 빈 요소를 <br>, <img>, <input>, <hr>로 처리하여도 문법적으로 문제가 발생하지 않는다.
여기에서는 앞에서 배웠던 XHTML 문법 규칙을 따르도록 하겠다.
HTML 기본 문서 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta vharset>
<title>HTML5</title>
</head>
<body>
내용
</body>
</html>기존의 XHTML 기본 문서 구조와 비교해 보면 매우 간단해진 것을 알 수 있다. 그런데 현재까지는 모든 부라우저에서 HTML5를 지원하고 있지는 않다. 특히 IE9.0 이하 버전에서는 HTML5가 지원되지 않는다.
본인이 사용하고 있는 브라우저가 HTML5를 얼마나 지원해 주는지 알고 싶다면 http://html5test.com사이트에서 확인할 수 있다. 또, 현재 브라우저가 HTML5를 가장 잘 지원해 주는지도 알 수 있다.
여기에서는 크롬 브라우저로 마크업에 대한 실행 화면을 보도록 하겠다.
header 요소, footer 요소, nav 요소
<header>요소는 문서의 머리말을 나타내는 요소로써 기존 <div id="header"> 영역 안에 있던 문서의 큰 제목이나 내비게이션, 검색폼 등의 내용들을 포함할 수 있다.
<footer>요소 또한 문서의 꼬리말을 나타내는 요소로 기존 <div id="header"> 영역 안에 있던 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있다.
<header>요소나 <footer>요소는 일반적으로 문서 전체의 머리말, 꼬리말로 사용되지만 경우에 따라 앞으로 배울 섹셔닝 컨텐츠 요소의 머리말이나 꼬리말로도 사용이 가능하다. 이 부분에 대한 것은 <article>요소에서 더 자세히 설명하도록 하겠다.
<nav>요소는 주로 메인 네비게이션의 의미를 줄 때 사용하며 모든 링크 그룹에 <nav>요소로 마크업할 필요는 없다.
다음 예제를 통하여 좀 더 자세히 알아보도록 하자.
예제1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>header 요소, footer 요소, nav 요소</title>
</head>
<body>
<header>
<h1><img src="images/icox_logo.gif" alt="icox" ></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
<nav>
<h2>메인메뉴</h2>
<ul>
<li><a href="#">아이콕스</a><li>
<li><a href="#">신간도서</a><li>
<li><a href="#">iCox커뮤니티</a><li>
<li><a href="#">iCox자료실</a><li>
</ul>
</nav>
<form name="sform" action="#" method="get" id="sform">
<fieldset>
<legend>
<label for="sbox">도서 검색어 입력</label><input type="search" id="sbox" />
<input type="submit" value="검색" />
</fieldset>
</form>
</header>
<div>
<h2>메인컨텐츠</h2>
<p>메인 컨텐츠 내용</p>
</div>
<footer>
<small>COPYRIGHT © iCox. All Rights Reserved</small>
</footer>
</body>
</html><header>요소,<footer>요소 안에 일반적으로 들어갈 수 있는 내용들을 마크업해 보았다.<header>나<footer>두 요소 모두 대부분의 요소를 포함 할 수 있지만 같은<header>요소와<footer>요소는 포함할 수 없다.- 예제1에 보면
<ul>요소가 두 개 있다. 하나는 '상단메뉴 링크 그룹'(Home, About us, News, Contact)이고 하나는 '메인메뉴 링크 그룹'(아이콕스, 신간 도서, iCox 커뮤니티, iCox 자료실)이다.
'메인메뉴 링크 그룹'에만 <nav>요소로 감싸줬는데 이렇게 하면 '메인메뉴 링크 그룹'을 주 내비게이션으로 하겠다는 의미가 된다. '상단메뉴 링크 그룹'에도 <nav>요소를 줄 수 있지만 사이트의 모든 페이지를 연결할 수 있는 '메인메뉴 링크 그룹'이 좀 더 주된 내비게이션의 의미를 가지고 있기 떄문에 '메인메뉴 링크 그룹'에만 <nav>요소를 감싼 것이다.
section 요소
<section>요소는 문서 내에서 의미가 같은 내용들을 묶어주는 의미적 그룹 요소이며 보통 제목 요소로 시작한다. 묶어 주는 요소라고 하여 기존의 <div>요소처럼 생각하면 안 된다. 레이아웃을 잡거나 스타일을 적용 또는 자바스크립트의 편의성이 목적이라면 <div>요소를 사용해야 한다.
예제2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>section 요소</title>
</head>
<body>
<h1>아이콕스</h1>
<section>
<h1>아이콕스 소개</h1>
<p>아이콕스 스토리</p>
<p>아이콕스 인포</p>
</section>
<section>
<h1>신간소개</h1>
<p>안드로이드로 용돈벌기</p>
<p>아이폰으로 용돈벌기</p>
</section>
<section>
<h1>아이콕스 이벤트</h1>
<p>아이콕스 도서구매 시 커피증정</p>
<p>제2회 앱 아이디어 공모</p>
</section>
</body>
</html>- 의미가 같은 내용들을
<section>요소로 그룹화하였다. 전체적으로 볼 때 '아이콕스'에 대해 주제별 3개의 섹션으로 나누어져 있다. 다시 말해서 의미가 같은 컨텐츠들로 그룹화하여 영역을 나눈 것이지 레이아웃 구조를 위해 그룹화한 것이 아님을 알아야 한다. <section>요소에 제목요소를 포함하지 않거나 의미가 다른 내용들을 그룹화하였다고 문법적으로 틀린 것은 아니다.
중요한 것은 하나의 <section>요소를 만들 때 의미상 내용들을 그룹으로 묶는 것이 가능하고 그 그룹에 제목을 명료하게 명시할 수만 있다면 <section>요소를 사용하는데 큰 문제가 없을 것이다.
article 요소
신문 기사나 블로그의 글은 보면 문서 내에서 하나의 자립적인 컨텐츠라는 것을 알 수 있다. 또 이러한 컨텐츠들은 수정이나 가공 없이 다른 사이트로 배포 또는 재사용할 수 있다는 특징을 가지고 있다. 이처럼 독립적으로 배포 또는 재사용이 가능한 모든 내용들을 <article>요소에 포함할 수 있다.
예제3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>article 요소</title>
</head>
<body>
<h1>신간소개</h1>
<article>
<header>
<h1>안드로이드로 용돈벌기</h1>
</header>
<ul>
<li><img src="images/newbook.gif" alt="안드로이드로 용돈벌기" /></li>
<li>
가히 아이폰, 안드로이드 앱이 "문화를 바꾸었다"고 할 수 있을 정도로, 이제 휴대폰과 앱은 따로 분리해서 생각하기 어려워졌으며...
</li>
</ul>
<footer>작성자 : 아이콕스</footer>
</article>
</body>
</html>-
예제3은
<article>요소의 일반적인 형식이다. 그렇다고<header>요소나<footer>요소를 항상 마크업할 필요는 없다. 보통 제목 요소와 내용만 마크업하는 경우가 많다.<article>요소는 자립적이고 독립적인 배포나 재사용 가능한 컨텐츠라는 의미에서 제목 요소를 포함하는 것이 바람직하다. -
<section>요소와<article>요소에 대한 혼동이 종종 있다. 쉽게 생각해서<section>요소는 의미가 같은 내용을 묶는 의미적 그룹 요소이고<article>요소는 하나의 자립적인 요소라고 보면 된다. -
<section>요소는<section>요소나<article>요소를 포함할 수 있고<article>요소 또한<article>요소나<section>요소를 포함할 수 있다.예를 들어 자립적이고 배포나 재사용이 가능한 내용들이 모두 같은 의미를 가졌다면 이것은
<section>요소로<article>요소들을 그룹화할 수 있는 것이며<article>요소 안에서 의미가 같은 내용들을 그룹화해야 한다면 이것은<article>요소 안에<section>요소가 포함될 수 있는 것이다.
aside 요소
<aside>요소는 주위의 내용들과 관련이 없고 메인 컨텐츠와 분리할 수 있는 독립적인 요소이다. 블로그나 문서에서 메인 컨텐츠의 왼쪽이나 오른쪽에 위치한 '사이드 바'영역이라고 보면 된다.
예제4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>aside 요소</title>
</head>
<body>
<h1>아이콕스</h1>
<div id="content">
<h2>메인 컨텐츠</h2>
<p>신간소개</p>
<p>아이콕스 이벤트</p>
<p>저자칼럼</p>
</div>
<aside>
<h1>IT 동향</h1>
<ul>
<li><a href="#">이제 반응형 웹...</a><li>
<li><a href="#">HTML5의 새로운...</a><li>
</ul>
</aside>
</body>
</html>