<footer>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

HTML <footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

시도해 보기

<article>
  <h1>How to be a wizard</h1>
  <ol>
    <li>Grow a long, majestic beard.</li>
    <li>Wear a tall, pointed hat.</li>
    <li>Have I mentioned the beard?</li>
  </ol>
  <footer>
    <p>© 2018 Gandalf</p>
  </footer>
</article>

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

footer {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #45a1ff;
  color: #fff;
}
콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 플로우 콘텐츠. 단, <header>와 다른 <footer>는 자손이 될 수 없습니다.
태그 생략 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소. 단, <footer> 요소는 <address>, <header>, 혹은 다른 <footer>의 자손일 수 없습니다.
가능한 ARIA 역할 group, presentation
DOM 인터페이스 HTMLElement

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

  • <address> 요소로 감싼 작성자 정보를 <footer> 요소에 배치하세요.
  • <footer> 요소는 구획 콘텐츠가 아니므로 개요에 새로운 구획을 추가하지 않습니다.

예제

html
<footer>
  Some copyright info or perhaps some author info for an &lt;article&gt;?
</footer>

접근성 고려사항

VoiceOver 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 <footer>에 role="contentinfo"를 추가하세요.

명세

Specification
HTML
# the-footer-element

브라우저 호환성

같이 보기