<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구조 요소를 이용한 마크업 예시</title>
</head>
<body>
<header>
<h1>반응형 웹 앱 개발</h1>
<nav>
<ol>
<li>순서</li>
<li>있는</li>
<li>리</li>
<li>스</li>
<li>트</li>
</ol>
</nav>
<nav>
<ul>
<li>순서</li>
<li>없는</li>
<li>리</li>
<li>스</li>
<li>트</li>
</ul>
</nav>
</header>
<div id="container">
<!-- 단지 그룹으로 요소들을 묶어주기위한 요소 -->
<!-- container 가장 상위의 그룹요소 -->
<section>
<h2>콘텐츠 그룹1</h2>
</section>
<section>
<h2>콘텐츠 그룹2</h2>
</section>
<article>
<h3>기사, 광고</h3>
<!-- 주로하는 주제에 따라 h태그의 레벨이 달라짐 -->
</article>
<aside>광고, 배너, 위젯</aside>
<!-- 기능은 없다..! -->
</div>
<footer>
<!-- 옛날 방식이라 잘 안씀 -->
<p>고객센터 회사명 등등...</p>
</footer>
</body>
</html>
