<header> 태그의 정의 및 사용법

<header> 태그는
일반적으로 말하는 웹 페이지의 맨 위에 있는 글로벌(혹은 전역) 헤더나,
글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때 사용합니다.

글로벌 헤더(Global Header, 전역 헤더)를 나타낼 때

<header> 태그는 일반적으로 웹 페이지 상단에 있는 전체적인 헤더 부분을 나타내기 위해 사용됩니다.
이 공간에는 웹 페이지의 제목, 로고, 주요 네비게이션 메뉴 등이 포함될 수 있습니다.

HTML 요소(Element)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 role 속성의 값은 banner입니다. 이것은 스크린 리더를 사용하는 사용자를 위한 웹 접근성을 고려하기 위해 사용됩니다. 글로벌 헤더임을 명시적으로 나타내기 위해서는 role="banner"를 사용하세요.

HTML role 속성 참조

다음은 <header> 태그가 글로벌 헤더로 사용되는 예입니다.

<header> 요소를 사용할 경우 웹 접근성을 위한 스크린 리더는 HTML 문서의 맥락상 글로벌 헤더인지 판단합니다.

HTML <header> 태그를 사용해서 글로벌 헤더임을 나타냈습니다. 
<header role="banner">
    <h1>웹사이트 제목<h1>
    .... 로고, 네비게이션, 검색....
</header>
HTML 제목(<h1>~<h6>) 태그

다음은 <header> 태그를 사용하지 않고 <div> 태그에 role="banner"를 사용해서 글로벌 헤더로 사용되는 예입니다.

HTML <header> 태그를 사용하지 않고 <div> 태그에 role="banner"를 사용해서 글로벌 헤더임을 나타냈습니다. 
<div role="banner">
    <h1>웹사이트 제목<h1>
    .... 로고, 네비게이션, 검색....
</div>

글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때

<header> 태그는 글이나 콘텐츠의 서두를 나타내기 위해 사용됩니다.

<header> 태그는 글로벌 헤더뿐만 아니라, 웹 페이지의 내용을 시작하기 전에 간단한 소개, 요약, 또는 서두 부분을 나타내기 위해 사용됩니다. 이를 통해 웹 페이지의 내용을 시멘틱하게 하고 이해하기 쉽게 합니다. 주로 다음의 요소들의 하위 요소로 사용됩니다.

이러한 요소들의 하위 요소로 <header> 태그가 사용될 경우 글로벌 헤더로 간주되지 않습니다. role 속성의 값도 banner로 간주되지 않습니다.

다음은 <header> 태그가 글이나 콘텐츠의 서두로 사용되는 예입니다.

HTML <header> 태그를 사용해서 글의 서두임을 나타냈습니다. 
<article>
    <header>
        <h2>HTML 소개</h2>
        <p>
            <time datetime="2022-05-13">2022년 5월 13일</time> 코딩에브리바디 작성
        </p>
    </header>
    <p>
        HTML(Hyper Text Markup Language)은 웹 페이지를 만들기 위한 가장 기본적인 언어로서...
    </p>
    <p>
        <a href="https://example.com/html">더 보기...</a>
    </p>
</article>

구문 형식

하나의 HTML 문서에 여러 <header> 태그를 가질 수 있습니다.

하지만, <header> 태그는 허용되지 않는 자손 요소와 허용되지 않는 조상 요소가 있습니다.
이러한 규칙들은 <header> 태그가 특정 상황에서 사용될 경우 웹 페이지의 콘텐츠를 파악하는데 어려움이 발생할 수 있기 때문에 생긴 것으로서, <header> 태그를 사용할 때 반드시 고려해야 합니다.

허용되지 않는 자손 요소

<header> 태그의 자손으로 사용할 수 없는 태그입니다.

허용되지 않는 조상 요소

<header> 태그의 조상으로 사용할 수 없는 태그입니다.

참고사항

<header> 태그는 보통 제목 태그(h1~h6)를 포함하는 경향이 있으나 이는 필수적인 조건이 아닙니다. 또한 섹션의 목차, 검색 양식 또는 관련 로고를 감싸는 데 사용될 수 있습니다.

HTML 
<header>
    <!-- 섹션의 목차 -->
    <nav>
        <ul>
            <li><a href="#section1">섹션 1</a></li>
            <li><a href="#section2">섹션 2</a></li>
            <li><a href="#section3">섹션 3</a></li>
        </ul>
    </nav>
    
    <!-- 검색 양식 -->
    <form action="/search" method="get">
        <label for="search">검색어</label>
        <input id="search" type="text" name="q" placeholder="검색어를 입력하세요">
        <button type="submit">검색</button>
    </form>
    
    <!-- 로고 -->
    <img src="logo.png" alt="웹 페이지 로고">
</header>

브라우저 호환성

header 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<header> 5 12 4 5

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

header 태그의 명세서 사양
명세서 사양
<header> HTML Standard
#the-header-element

참고문헌

같이 보기