footer

설명
페이지나 섹션의 바닥글. 저작권 정보, 연락처 정보, 사이트 맵, 사이트 내 중요한 링크들, 저자 정보, 개인정보처리방침, sns링크
Primary
Primary
content category
section
flow

설명

주로 저작권 정보, 연락처 정보, 사이트 맵, 사이트 내 중요한 링크들, 저자 정보 등의 정보를 담는 용도로 사용한다.

예시

  • 섹션화된 것에서는 해당 섹션화된 콘텐츠의 끝부분을 나타내고,
      • 페이지 전체 하단에 저작권 등!
섹션화되지 않은 경우, 페이지 전체의 footer
<footer>
  <p>&copy; 2025, My Website</p>
  <address>
    <p>Contact us at: <a href="mailto:info@example.com">info@example.com</a></p>
  </address>
</footer>
 
  • 섹션화되지 않은 콘텐츠는 페이지 전체 하단을 나타낸다.
      • 글 마무리에 저자 누구 이런 거!
article이라는 섹셔닝 컴포넌트 안에서 선언할 경우 콘텐츠의 footer
<article>
  <header>
    <h1>Article Title</h1>
  </header>
  <p>Content of the article...</p>
  
  <footer>
    <p>Written by John Doe</p>
    <p>Published on: January 24, 2025</p>
  </footer>
</article>
 
섹션을 나누는 콘텐츠는 아니다.
콘텐츠의 하단에 관련 정보들을 담는다.
 

접근성 고려

Safari 13 이전 버전에서 VoiceOver가 contentinfo 역할을 제대로 인식하지 못했기 때문에, 이를 지원하려면 <footer role="contentinfo">로 지정하는 것이 좋습니다.