HTML - 구조를 잡을 때 사용하는 태그

웹사이트의 구조

책이 목차, 본문, 부록으로 구성되어 있는 것처럼 웹사이트도 목차, 본문, 부록이 있음. 웹사이트를 구성하는 태그들은 개발자마다 조금씩 다르게 쓰고 있어서 아래 설명하는 태그들이 모두 다 필수적으로 들어가는 것은 아님.

 

 

 

<header>, <nav> 태그

  <header>    <!-- 상단 영역 -->
    <nav>     <!-- 메뉴 영역 -->
    ...
    </nav>
  </header>

• <header>태그 : 웹사이트의 머리글을 담는 공간. 사용자가 웹사이트에 접속했을 때 가장 먼저 보여지는 영역. 이 헤더 태그 안에는 보통 네이게이션이 담겨져 있는 경우가 많아. 그래서 네비게이션을 담고 있는 영역이라고 해서 <nav>태그를 같이 써줘.
• <nav>태그 : 네이게이션과 관련된 정보들이 들어가는 공간을 의미. 메뉴 버튼을 만들 때 사용하는 <ul>, <li>, <a>태그들과 함께 사용.

 

네이버를 예를 들어보면, 

<header>    <!-- 상단 영역 -->
  <img src="naver_logo.png" alt="네이버 로고">
  <nav>     <!-- 메뉴 버튼 영역 -->
    <ul>
      <li><a href="http://mail.naver.com">메일</a></li>
      <li><a href="http://cafe.naver.com">카페</a></li>
      <li><a href="http://blog.naver.com">블로그</a></li>
    </ul>
  </nav>
</header>

<header>태그 안에는 보통 회사 로고를 넣어주기 때문에 <img> 태그가 들어감. 그리고 네비게이션을 헤더 태그 안에서 표현해주기 위해서 <nav>태그가 들어가고, 그 안에는 <ul>과 <li>, <a>태그를 같이 넣어줌. 

 

 

 

<main>, <article> 태그

웹사이트의 본문을 만들 때, <main>이라는 태그 사용. 그리고 이 <main>태그는 자식으로 <article>이라는 태그가 있음.  <main>태그 안에 들어가는 주요 텍스트 정보들 같은 경우 <article>이라는 태그 안에서 표현.

 

• <main>태그 : 문서의 주요 내용을 담는 태그. 그런데, IE(Internet Explorer)에서는 지원하지 않으므로 role="main" 속성을 필수로 입력해줘야함. 
• <article>태그 : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그. <article>태그 안에는 구역을 대표하는 타이틀 정보가 필요하기 때문에, 반드시 <h#>태그를 가지고 있어야 함.

  <main role="main">    <!-- 본문 영역 -->
    <article>           <!-- 정보 영역 -->
      <h#> ... </h#>
    ... 
    </article>
  </main>

 

 

 

<footer>태그

• <footer>태그 : 가장 하단에 들어가는 정보를 표기할 때 사용. 보통 웹사이트를 소유하고 있는 회사의 정보들이 담김.
• <div>태그 : 임의의 공간을 만들 때 사용. 공간을 명확하게 구분하기 힘들 때, 애매한 작은 구역들을 표기해주기 위해서 <div>태그를 이용.

  <footer>    <!-- 하단 영역 -->
    <div>     <!-- 데브쏨 정보 -->
      <p>주소 : 서울시 어딘가</p>
      <p>이메일 : devssom@email.com</p>
    </div>
    <div>     <!-- 전자상거래소비자보호법 필수정보 -->
      <p>사업자등록번호: 000-00-00000 | 대표 : 데브쏨</p>
      <p>통신판매업신고번호: 제0000-서울어디구-0000호</p>
    </div>
  </footer>