웹 문서의 구조

HTML 태그는 태그의 이름만 보더라도 그 의미를 알 수 있어 시맨틱(semantic) 태그라고 한다.

웹 페이지가 모두 다르게 보이지만 기본 골격은 기능적으로 위의 범위를 크게 벗어나지 않는다.

웹 문서의 구조를 만드는 주요 시맨틱 태그

꼭 시맨틱 태그를 이용하여 문서를 작성할 필요는 없다. 하지만 시맨틱 태그를 이용하여 문서를 구조화시키면 가독성이 올라가며, 웹 문서 내의 검색엔진을 활용할 때도 본문 내에서만 키워드를 찾게 할 수도 있어 웹사이트의 효율성이 높아진다.

header

사이트의 헤더는 주로 맨 위쪽이나 왼족에 있으며, 검색창이나 사이트 메뉴가 삽입된다.

nav

웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만들 때 사용한다. nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드바 안에도 포함할 수 있고 독립하여 사용할 수도 있다.

<header>
  <div id="logo">
    <a href="#><h1>logo</h1></a>
  </div>
  <nav>
   <ul id="menu">
    <li><a href="#">홈</a></li>
    <li><a href="#">의견 남기기</a></li>
</header>