본문 바로가기
html5/웹 접근성(Web Accessibility)

[웹접근성] header/footer는 오직 한번 사용? 아니!

by by-choice 2023. 8. 27.
반응형

일반적으로 header는 로고를, footer는 coryright를 담기 위해 한 번씩만 사용하는데, 사실 header는 가까운 부모의 타이틀 영역을, footer는 출처 영역을 담는 태그로, 반드시 한 번만 사용할 수 있는 건 아니다.

<div class="wrap">
    <header></header>
    <main>
        <article>
            <header></header>
            { ...content }
            <footer></footer>
        </article>
    </main>
    <footer></footer>
</div>

다만 위에서 "영역"이라 표현했듯이 header안에 h2 하나만 들어가는 경우라면 header는 불필요한 태그라는 의견도 있다. mian / article과 같이 큰 영역에 타이틀 영역이라 구분할 수 있는 영역이 있을 때에 사용하는 것을 추천한다.

 

<article>
   <header>
      <h2>article title</h2>
      <time datetime="2023-08-27 20:00">2023.08.27</time>
   </header>
   <p>article contents 1</p>
   <p>article contents 2</p>
   <p>article contents 3</p>
</article>
<article>
   <h2>article title</h2>
   <p>article contents 1</p>
   <p>article contents 2</p>
   <p>article contents 3</p>
</article>

 


 

HTML Standard

In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document's body element. Some DOM operations (for example, parts of the drag and drop model) are defined in terms of "the body e

html.spec.whatwg.org

 

반응형

댓글