HTML <header> tag 정리, 한글 설명

---

HTML <header> element

mdn, w3c 정리 & 한국어 설명

 

자료 수집 : 2022년 3월

 

header 태그란?

header 엘리먼트는 보통 도입부에 해당하는 콘텐츠나, 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.

문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용한다.

 

 

header 태그를 어디에서 사용할까?

• header 는 보통 웹 페이지나 섹션의 상단에서 사용한다.
• HTML 문서는 여러 개의 header 를 포함할 수 있다.
• header 태그 안에는 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있다.

- 하나 또는 그 이상의 제목 요소 (h1 ~ h6)
- 저자(author) 정보
- 로고(logo) 또는 아이콘(icon)

 

 

주의사항

• 하나의 HTML 문서 안에 몇 개의 header 엘리먼트를 사용할 수 있지만, header 태그 내에 footer, address, 다른 header 엘리먼트를 사용할 수 없다.

 

 

header 태그의 사용 예제들

 

header태그는 도입부에 해당하는 콘텐츠를 나타낸다.

 

<article>
  <header>
    <h1>article 내에 사용했으므로 이것은 기사의 제목</h1>
    <p>Posted by John Doe</p>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

 

header 태그 안에는 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있다.

 

<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>

 

문서의 헤더를 정의할 때 사용한다.

 

<header>
  <h1><img src="logo.png" alt="W3C"></h1>
</header>

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

 

<header>
 <hgroup>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <h2>W3C Working Draft 27 October 2004</h2>
 </hgroup>
 <dl>
  <dt>This version:</dt>
  <dd>
  	<a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">
    	http://www.w3.org/TR/2004/WD-SVG12-20041027/
    </a>
  </dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">
  	http://www.w3.org/TR/2004/WD-SVG12-20040510/</a>
  </dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

 

헤더 엘리먼트는 개요 알고리즘에 속하지 않는다.

 

<header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>

 

 

기타사항

• 태그는 HTML5에서 새롭게 추가된 요소이다.
• 이 요소는 전역 특성만 포함한다.
• 가능한 ARIA 역할 : group, presentation, none
• 구획의 제목(<h1>-<h6> 요소)을 감싸기 위한 요소지만, 필수 사항은 아니다. (h1-h6 요소들이 꼭 header 태그 안에 들어가야 한다는 뜻이 아니라는 점이 포인트)

 

 

출처

W3schools, tcpschool, 모질라

https://www.w3.org/html/wiki/Elements/header

https://www.w3.org/community/webed/wiki/HTML/Training/Sections#Header