HTML5 - Semantic Tag - 구조적 요소의 실제 사용법

From. 반응형 웹디자인

새로운 구조적 요소의 실제 예를 살펴보자. <header>나 <nav>, <footer> 요소는 이해하기 아주 쉬우므로, 현재 '그리고 우승자는 아니다...' 홈페이지 마크업에서 헤더와 내비게이션, 푸터 영역(다음 코드에서 강조된 부분)을 먼저 수정해 보자.

							<!DOCTYPE html>
							<html lang="en" manifest="offline.manifest">
							<head>
							<meta charset=utf-8>
							<meta name="viewport"  content="width=device-width,initial-scale=1.0" />
							<title>And the winner isn't…</title>
							<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
							<link href="css/main.css" rel="stylesheet" />

							</head>

							<body>

							<div id="wrapper"> 
								<!-- the header and navigation -->
								<header role="banner">
									<div id="logo">And the winner is<span>n't...</span></div> 
									<nav role="navigation"> 
										<ul>
											<li><a href="#">Why?</a></li>
											<li><a href="#">Synopsis</a></li>
											<li><a href="#">Stills/Photos</a></li>
											<li><a href="#">Videos/clips</a></li>
											<li><a href="#">Quotes</a></li>
											<li><a href="#">Quiz</a></li>
										</ul>
									</nav> 	
								</header> 
								<!-- the content -->
								<div id="content" role="main">							
									<article>
										<header>An article about HTML5</header>
										<nav>
											<a href="1.html">related link 1</a>
											<a href="2.html">related link 2</a>
										</nav>
										<footer>This was an article by Ben Frain</footer>
									</article>
									<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
									<h1>Every year <em>when I watch the Oscars I'm annoyed…</em></h1>
									<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
									<p><i>We’re here to put things right.</i></p>
								<a href="#">these should have won &raquo;</a>	
								</div>
								<!-- the sidebar -->
								<aside>
									<section role="complementary">
										<div class="sideBlock unSung">
											<h1>Unsung heroes...</h1>
											<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
											<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
										</div>
									</section>
									<section role="complementary">
										<div class="sideBlock overHyped">
											<h1>Overhyped nonsense...</h1>
											<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
											<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
										</div>
									</section>
								</aside> 
								<!-- the footer -->
								<footer role="contentinfo"> 
									<p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That’s a fact. Deal with it.</p>
								</footer> 

							</div> 
							</body>
							</html>
						

살펴본 바와 같이, article과 section 요소는 페이지 내에 존재하며 페이지당 한 번만 사용돼야 한다는 제한이 없다. 각각의 article과 section은 자체적으로 header와 footer, nav 요소를 포함할 수 있다. 예를 들어 <article> 요소를 마크업에 추가하면 다음과 같다.

							<body>

							<div id="wrapper"> 
								<!-- the header and navigation -->
								<header role="banner">
									<div id="logo">And the winner is<span>n't...</span></div> 
									<nav role="navigation"> 
										<ul>
											<li><a href="#">Why?</a></li>
											<li><a href="#">Synopsis</a></li>
											<li><a href="#">Stills/Photos</a></li>
											<li><a href="#">Videos/clips</a></li>
											<li><a href="#">Quotes</a></li>
											<li><a href="#">Quiz</a></li>
										</ul>
									</nav> 	
								</header> 
								<!-- the content -->
								<div id="content" role="main">							
									<article>
										<header>An article about HTML5</header>
										<nav>
											<a href="1.html">related link 1</a>
											<a href="2.html">related link 2</a>
										</nav>
										<footer>This was an article by Ben Frain</footer>
									</article>
						

위의 코드에서 볼 수 있듯이, <header>, <nav>, <footer> 요소는 페이지뿐만 아니라 article 요소 내에서도 사용하고 있따.

이제 사이드 바 영역을 수정해 보자. 다음은 현재 HTML4.01 마크업에서 작성되어 있는 코드다.

							<!-- the sidebar -->
							<div id="sidebar">
								<div class="sideBlock unSung">
									<h4>Unsung heroes...</h4>
									<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
									<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
								</div>
								<div class="sideBlock overHyped">
									<h4>Overhyped nonsense...</h4>
									<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
									<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
								</div>
							</div> 
						

현재 사이드바의 콘텐츠는 메인 콘텐츠와 관련되어 있다. 따라서 우선 <div id="sidebar">를 제거하고 <aside>로 교체한다.

							<!-- the sidebar -->
							<aside>
								<div class="sideBlock unSung">
									<h4>Unsung heroes...</h4>
									<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
									<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
								</div>
								<div class="sideBlock overHyped">
									<h4>Overhyped nonsense...</h4>
									<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
									<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
								</div>
							</aside> 
						

훌륭하다. 그러나 실제로 브라우저에서 확인해보면 결과가 실망스러울 것이다.

이유는 새로운 요소와 일치하는 CSS를 수정하지 않았기 때문이다. 다음 단계를 진행하기 전에 먼저 CSS를 변경해 보자. #header에 대한 참조를 단순히 header로 변경하고, #navigation은 nav로, #footer는 footer로 변경하면 된다. 예를 들어, 헤더에 대한 CSS 규칙은 다음 코드에서 아래와 같이 변경한다.

헤더나 내비게이션, 푸터는 ID가 새로운 요소와 동일하기 때문에 비교적 간단하다. 단지 앞에 붙어 있는 '#'만 생략하면 된다. 사이드바는 조금 다른데, #sidebar를 aside로 변경해야 한다. 아무튼 자신이 선호하는 코드 편집기에서 '찾기 및 바꾸기'를 하면 된다. 명확히 하기 위해, 아래의 규칙을 다음과 같이 변경한다.

아무리 커다란 CSS 스타일시트를 적성했다 하더라도, HTML 4.01 ID를 HTML5의 요소로 변경하는 일은 그다지 어려운 작업이 아니다.

* HTML5의 중복 요소에 주의하라 *
HTML5에서는 한 페이지 내에 header와 footer, aside 요소가 중복될 수 있다. 따라서 각 요소에 대해 좀 더 특징적인 스타일을 작성할 필요가 있다.

이제 '그리고 우승자는 아니다...'의 스타일이 제대로 수정됐다.

이것으로 브라우저에게 페이지의 어떤 섹션이 사이드바인지 명확하게 알려줄 수 있게 됐지만, 아직 UNSUNG HEROS 와 OVERHYPED HONSENSE의 두 섹션이 남아 있다. 해당 영역에 의미를 부여하기 위해 코드를 좀 더 수정해보자.

							<!-- the sidebar -->
							<aside>
								<section>
									<div class="sideBlock unSung">
										<h4>Unsung heroes...</h4>
										<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
										<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
									</div>
								</section>
								<section>
									<div class="sideBlock overHyped">
										<h4>Overhyped nonsense...</h4>
										<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
										<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
									</div>
								</section>
							</aside> 
						

<section>은 콘텐츠의 구분을 위한 것으로, 스타일링을 목적으로 하고 있지 않다는 점을 기억하자. 섹션은 문장에 맞게 자연스러운 헤더를 갖고 있어야 한다. HTML5의 개요 알고리즘 덕분에 <h4>태그를 <h1> 태그로 수정할 수 있으며, 여전히 문서에서 정확한 개요를 보여준다.

							<!-- the sidebar -->
							<aside>
								<section>
									<div class="sideBlock unSung">
										<h1>Unsung heroes...</h1>
										<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
										<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
									</div>
								</section>
								<section>
									<div class="sideBlock overHyped">
										<h1>Overhyped nonsense...</h1>
										<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
										<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
									</div>
								</section>
							</aside>