HTML5에는 여러 가지 요소들이 새로 추가되었는데 그 중의 하나가 header 요소입니다.
일반적으로 웹 사이트에 헤더 요소를 추가하려고 할 때 다음과 같은 방법을 사용합니다.
<div id="header">
하지만 HTML5에서는 더 이상 이런 방법을 사용하지 않고, <header> 요소를 사용할 수 있습니다.
header 요소로 무얼 표현할 수 있지?
header 요소의 spec을 보면 다음과 같이 명시되어 있습니다.
"a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.
사이트(블로그)를 소개하거나 둘러볼 수 있게 해주는 것들. 일반적으로 헤더 요소에는 섹션의 머리글(h1~h6 요소나 hgroup 요소)들이 포함되는데, 표 형태의 콘텐츠나 검색 폼, 로고 등의 다른 콘텐츠가 포함될 수도 있다.
<header> 요소는 새로운 섹션을 시작하지는 않지만 섹션의 시작 부분에 온다는 점을 명심하십시오. 또한 기존의 <head> 요소와 <header> 요소를 혼동하지 않도록 해야 합니다.
<header> 요소는 어디에서 사용할까?
<header> 요소를 갖다놓을 명확한 위치는 페이지 시작 부분입니다. 여기에는 페이지 머릿말 등이 오겠지요.
<header>
<h1> 이 페이지의 가장 중요한 머릿말 </h1>
</header>
명심해 둘 것은 <header> 요소를 한 사이트에 한번만 사용하는게 아니라는 것입니다. 즉, <header> 요소를 여러번 사용할 수 있고, 문서의 섹션마다 헤더를 둘 수 있고 그 때마다 <header>를 이용해서 표현할 수 있다는 것입니다.
<header>
<h1> 이 페이지의 가장 중요한 머릿말 </h1>
</header>
<article>
<header>
<h1> 이 아티클의 제목</h1>
</header>
<p> ... 아티클의 내용...</p>
</article>
html 안에 있는 두 개의 <h1>은 HTML4나 HTML5에서 맞는 표현이지만 접근성(accessibility)에 있어서 문제를 일으킬 수 있습니다.페이지에 article의 갯수가 많아진다면 <h1>을 계속해서 사용해서는 안될 것입니다.
<header> 요소에서 더 포함시킬 수 있는 것은?
일반적으로 <header> 요소에는 하나의 머리말 태그(<h1>~<h6>)를 가지고 이외에 <hgroup> 요소를 가질 수 있고, 표 형태의 콘텐츠나 검색 폼, 로고 등을 포함할 수 있습니다. 또한 <nav> 요소를 이용해서 내비게이션을 포함할 수도 있습니다.
<header> 스타일링
<header> 요소를 렌더링하려면 아직 일부 브라우저에서 <header> 태그를 인식하지 못하기 때문에 스타일시트에서 다음과 같이 명시적으로 블로킹해 주어야 합니다.
header { display : block; }
