<footer> 태그의 정의 및 사용법

<footer> 태그는
일반적으로 웹 페이지의 맨 하단에 있는 글로벌(혹은 전역) 푸터를 나타내거나,
글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타냅니다.

글로벌 푸터(Global Footer, 전역 푸터)를 나타낼 때

<footer> 태그는 일반적으로 웹 페이지 맨 하단에 있는 저작권 정보, 개인정보처리방침에 대한 링크 등을 내용을 포함한 글로벌 푸터 부분을 나타내기 위해 사용합니다.

HTML 요소(Element, 혹은 태그)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 role 속성의 값은 contentinfo입니다.

HTML role 속성 참조

다음은 <footer> 태그가 글로벌 푸터로 사용되는 예입니다.

HTML <footer> 태그를 사용해서 글로벌 푸터임을 나타냈습니다. 
<footer role="contentinfo"> <!-- 주의하세요! role="contentinfo 사용 -->
    <address>
        © 2023 웹 페이지 제작자
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>
HTML <address> 태그

주의하세요!
위 코드를 보면 <footer> 태그에 role="contentinfo"를 사용한 것을 알 수 있습니다. 대부분의 웹 접근성을 위한 스크린리더에서는 <footer> 태그가 HTML 문서의 맥락상 글로벌 푸터인지 판단합니다. 그래서, <footer> 태그에 role="contentinfo"를 추가하지 않아도 됩니다. 하지만 일부 스크린리더에서 글로벌 푸터인지 판단하지 못하는 문제가 있습니다. 웹 접근성을 위해 이 문제를 해결하려면 <footer> 태그에 role="contentinfo"를 추가해야 합니다.

다음은 <footer> 태그를 사용하지 않고 <div> 태그에 role="contentinfo"를 사용해서 글로벌 푸터로 사용되는 예입니다.

HTML <div> 태그 - 올바른 이해와 사용 방법
HTML <footer> 태그를 사용하지 않고 <div> 태그에 role="contentinfo"를 사용해서 글로벌 푸터임을 나타냈습니다. 
<div role="contentinfo">
    <address>
        © 2023 웹 페이지 제작자
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</div>

글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 담을 때

<footer> 태그는 글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타내기 위해 사용합니다.

<footer> 태그는 글로벌 푸터 뿐만 아니라, 글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크에 대한 영역을 담는데 사용합니다. 이를 통해 웹 페이지의 내용을 시멘틱하게 하고 이해하기 쉽게 합니다. 주로 다음의 태그들의 하위 태그로 사용됩니다.

  • <article>
  • <aside>
  • <main>
  • <nav>
  • <section>

이러한 태그들의 하위 태그로 <footer> 태그가 사용될 경우 글로벌 헤더로 간주되지 않습니다. role 속성의 값도 contentinfo로 간주되지 않습니다.

다음은 <footer> 태그가 글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 담을 때 사용되는 예입니다.

HTML <footer> 태그를 사용해서 글의 저작권 정보를 나타냈습니다. 
<article>
    <h1>웹 개발자가 되려면</h1>
    <ol>
        <li>HTML을 공부한다.</li>
        <li>CSS를 공부한다.</li>
        <li>PHP를 공부한다.</li>
        <li>HTML을 공부해야 한다고 말했나요? 😴</li>
    </ol>
    <footer>
        <p>© 2023 codingEverybody</p>
    </footer>
</article>

<footer> 태그의 구문

하나의 HTML 문서에 여러 <footer> 태그를 가질 수 있습니다.

<footer> 태그의 자손으로 사용할 수 없는 태그

  • <footer>
  • <header>

<footer> 태그의 조상으로 사용할 수 없는 태그

  • <address>
  • <header>
  • <footer>

브라우저 호환성

footer 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<footer> 5 12 4 5

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

footer 태그의 명세서 사양
명세서 사양
<footer> HTML Standard
#the-footer-element

참고문헌

같이 보기