header 요소 안에 어떠한 내용이 들어가는 것이 적절한지 궁금합니다.

Question

header 요소 안에 어떠한 내용이 들어가는 것이 적절한지 궁금합니다.

조회수 2884회

fast-frontend

html

html5

header

semantic

0

싫어요

header 요소 안에 어떠한 내용이 들어가는 것이 적절한지 궁금합니다.
main 요소 내부에 header 요소가 직접 포함될 수는 없지만,  section 요소 내부에 header 를 사용하는 것은 가능하고, 사용해도 되고, 사용하지 않아도 된다고 들었는데요. 어떤 경우, main를 부모로 하는 section 요소 안에 header 요소를 사용하고, 사용한다면 어떠한 내용이 들어가는게 적절할지, 
header 요소를 적절하게 사용하는 용법을 알려주세요. 

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 3 · Accepted Answer

안녕하세요. 진실님 ^ ㅡ ^ 야무입니다.

질문에 답변 드립니다.

`<header>` 요소

HTML 5.2 표준 문서에는 header 요소에 대해 아래와 같이 기술하고 있습니다.

기술된 내용을 해석하면 다음과 같습니다.

<header> 요소는 가장 가까운 부모 요소( 예: <main> 또는 섹션 요소들: <body>, <section>, <article>, <nav>, <aside> )의 소개 내용을 대변할 때 사용됩니다. 일반적으로 <header> 요소는 소개 내용 또는 내비게이션 보조 내용을 포함합니다.

<header> 요소가 <body> 요소의 직계 자식으로 사용될 경우 (<main> 또는 다른 섹션 요소에 포함되지 않은 경우) 해당 헤더는 문서 본문으로 범위가 설정되고 문서 소개 내용을 나타냅니다.

보조 기술(예: 스크린 리더 등)은 문서에 설정된 <header> 요소의 의미를 사용자에게 전달할 수 있습니다. 헤더에 설정된 정보는 콘텐츠 유형에 대한 힌트를 제공할 수 있습니다.

예를 들어, 배너 역할(<header role="banner">)로 설정된 헤더의 경우, <body> 요소로 범위가 설정된 헤더 내비게이션을 사용자가 사용할 때 스크린 리더에 정보를 제공할 수 있습니다.

사용자 에이전트(예: 브라우저)는 <body> 요소로 범위가 설정된 헤더 내비게이션을 통해 이동하는 방법을 제공할 수도 있습니다.

진실님이 궁금해 하는 내용은 NOTE에서 말하고 있습니다.

<header> 요소는 섹션 제목(h1 ~ h6)을 포함할 때 사용합니다. 하지만 필수는 아닙니다. 즉, 이 말은 제목을 포함할 때 헤더 요소를 사용할 수도 있지만 꼭 그렇게 사용해야 하는 것을 강제 하지는 않는다는 말입니다.

<header> 요소는 섹션의 목차(TOC), 검색 폼, 로고 등을 포함할 수 있습니다.

예시

아래 나열된 예시는 모두 W3C 표준 문서에 기술된 것들입니다.

"게임 Voidwars 인트로" 구조화

<header>
  <p>환영합니다...</p>
  <h1>Voidwars!</h1>
</header>

"SVG 1.2 표준 문서 머리글" 구조화

<header>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <p>W3C 초안, 2004년 10월 27일</p>
  <dl>
    <dt>현재 버전:</dt>
    <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20041027/">https://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
    <dt>이전 버전:</dt>
    <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20040510/">https://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
    <dt>SVG 1.2 최종 버전:</dt>
    <dd><a href="https://www.w3.org/TR/SVG12/">https://www.w3.org/TR/SVG12/</a></dd>
    <dt>최종 SVG 표준:</dt>
    <dd><a href="https://www.w3.org/TR/SVG/">https://www.w3.org/TR/SVG/</a></dd>
    <dt>편집자:</dt>
    <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
    <dt>저자:</dt>
    <dd><a href="#authors">저자 목록</a> 참고</dd>
  </dl>
  <p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notic ...">...</a></p>
</header>

아래 예제의 경우 <header> 내부에 <header>가 포함되어 문제가 될 것 같지만, <article> 내부의 <header> 가 포함하는 것은 <aside> 요소이기 때문에 문제가 되지 않습니다. 중첩된 <header>는 <header>를 부모로 가진 것은 아니기 때문에 문제가 되지 않는 것입니다.

<article>
  <header>
    <h1>Flexbox: 완벽 가이드</h1>
    <aside>
      <header>
        <h2>작성자: Wes McSilly</h2>
        <p><a href="./wes-mcsilly/">그에게 연락해봅시다.</a></p>
      </header>
      <p>Flexbox 외에도 다양한 재능을 가진 전문가입니다.</p>
    </aside>
  </header>
  <p><ins>알고보니 Wes는 Flexbox의 전문가가 아니었습니다.</ins></p>
</article>

정리

참고로 <main> 요소 내부에 자식 요소로 <header>를 사용할 수 있습니다.

<header> 요소는 가장 가까운 섹션 요소를 소개하는 콘텐츠를 감쌀 때 사용합니다. 일반적으로 제목을 포함하지만, 필수적으로 요구되는 사항은 아닙니다. 로고, 검색 폼, 목차 등을 감싸는 용도로 사용할 수 있습니다.