<html>
  <head>        <!-- = <div class="header"> -->
  </head>
  <body>
      <header>메뉴</header>
      <div id="container">
        <nav>
          <ul>
            <li>home</li>
            <li>news</li>
          </ul>
        </nav>
        <aside>
          <ul>
            <li>날씨</li>
            <li>운세</li>
          </ul>
        </aside>
        <section>
	    <article>
            <p>Lorem ipsum dolor sit amet</p>
            </article>
            <article>
            <p>Lorem ipsum dolor sit amet</p>
            </article>
         </section>
      </div>
      <footer>ⓒCopyright</footer>       <!-- = <div class="footer"> -->
  </body>
</html>

  • 시맨틱 태그
    1. header : 머리말 (페이지 제목, 페이지 소개)
    2. nav : 내비게이션 (하이퍼링크의 모음)
    3. aside : 본문 흐름에 벗어나는 노트 및 팁
    4. section : 문서의 장이나 절에 해당하는 내용
    5. article : 본문, 독립적인 콘텐츠 영역
    6. footer : 꼬리말 (저자, 저작권 정보)

시맨틱 웹 : 컴퓨터 프로그램이 코드를 읽고 의미를 인식하는 지능형 웹