<header>
태그의 정의 및 사용법
<header>
태그는
일반적으로 말하는 웹 페이지의 맨 위에 있는 글로벌(혹은 전역) 헤더나,
글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때 사용합니다.
글로벌 헤더(Global Header, 전역 헤더)를 나타낼 때
<header>
태그는 일반적으로 웹 페이지 상단에 있는 전체적인 헤더 부분을 나타내기 위해 사용됩니다.
이 공간에는 웹 페이지의 제목, 로고, 주요 네비게이션 메뉴 등이 포함될 수 있습니다.
HTML 요소(Element)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 role
속성의 값은 banner
입니다. 이것은 스크린 리더를 사용하는 사용자를 위한 웹 접근성을 고려하기 위해 사용됩니다. 글로벌 헤더임을 명시적으로 나타내기 위해서는 role="banner"
를 사용하세요.
다음은 <header>
태그가 글로벌 헤더로 사용되는 예입니다.
<header>
요소를 사용할 경우 웹 접근성을 위한 스크린 리더는 HTML 문서의 맥락상 글로벌 헤더인지 판단합니다.
다음은 <header>
태그를 사용하지 않고 <div>
태그에 role="banner"
를 사용해서 글로벌 헤더로 사용되는 예입니다.
글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때
<header>
태그는 글이나 콘텐츠의 서두를 나타내기 위해 사용됩니다.
<header>
태그는 글로벌 헤더뿐만 아니라, 웹 페이지의 내용을 시작하기 전에 간단한 소개, 요약, 또는 서두 부분을 나타내기 위해 사용됩니다. 이를 통해 웹 페이지의 내용을 시멘틱하게 하고 이해하기 쉽게 합니다. 주로 다음의 요소들의 하위 요소로 사용됩니다.
이러한 요소들의 하위 요소로 <header>
태그가 사용될 경우 글로벌 헤더로 간주되지 않습니다. role
속성의 값도 banner
로 간주되지 않습니다.
다음은 <header>
태그가 글이나 콘텐츠의 서두로 사용되는 예입니다.
구문 형식
하나의 HTML 문서에 여러 <header>
태그를 가질 수 있습니다.
하지만, <header>
태그는 허용되지 않는 자손 요소와 허용되지 않는 조상 요소가 있습니다.
이러한 규칙들은 <header>
태그가 특정 상황에서 사용될 경우 웹 페이지의 콘텐츠를 파악하는데 어려움이 발생할 수 있기 때문에 생긴 것으로서, <header>
태그를 사용할 때 반드시 고려해야 합니다.
허용되지 않는 자손 요소
<header>
태그의 자손으로 사용할 수 없는 태그입니다.
<header>
-
<footer>
허용되지 않는 조상 요소
<header>
태그의 조상으로 사용할 수 없는 태그입니다.
참고 사항
<header>
태그는 보통 제목 태그(h1~h6
)를 포함하는 경향이 있으나 이는 필수적인 조건이 아닙니다. 또한 섹션의 목차, 검색 양식 또는 관련 로고를 감싸는 데 사용될 수 있습니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<header>
|
5 | 12 | 4 | 5 |
명세서
명세서 사양 | |
---|---|
<header>
|
HTML Standard #the-header-element |
같이 보기
- HTML role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공
- HTML <footer> 태그 - 올바른 이해와 사용 방법
- HTML <main> 태그 – 올바른 이해와 사용 방법
- HTML <aside> 태그 – 올바른 이해와 사용 방법
- HTML <nav> 태그 – 올바른 이해와 사용 방법
- HTML <article> 태그 – 올바른 이해와 사용 방법
- HTML <section> 태그 - 올바른 이해와 사용 방법
- HTML <address> 태그 - 올바른 이해와 사용 방법
- HTML <div> 태그 - 올바른 이해와 사용 방법
- HTML <head> 태그 - 올바른 이해와 사용 방법