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

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

푸터는 일반적으로 누가 작성했는지, 관련 문서에 대한 링크, 저작권 데이터 등과 같은 해당 섹션에 대한 정보를 나타내는 영역을 말합니다.

<footer> 태그는 가장 가까운 조상 섹션 내용 요소에 대한 푸터, 또는 그러한 조상이 없는 경우 <body> 요소에 대한 푸터('글로벌 푸터'라고 함)를 나타내기 위해 사용합니다.

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

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

HTML 요소(Element, 혹은 태그)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 role 속성의 값은 contentinfo입니다. 이것은 스크린 리더를 사용하는 사용자를 위한 웹 접근성을 고려하기 위해 사용됩니다. 글로벌 푸터임을 명시적으로 나타내기 위해서는 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>

코드 부연설명
<address> 태그는 연락처 정보를 나타냅니다.

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

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

부연설명
<div> 태그는 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그입니다.
이 태그는 자체적으로 특별한 의미가 전혀 없습니다.

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

<div> 태그는 자체적으로 특별한 의미가 전혀 없지만, <footer> 태그를 사용하지 않고 role="contentinfo"를 사용해서 글로벌 푸터임을 나타낼 수 있습니다.

하지만, 브라우저 호환성 문제로 <footer> 태그를 사용할 수 없는 경우를 제외하고, <div> 태그보다는 <footer> 태그에 role="contentinfo"를 사용하세요.

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

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

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

이러한 태그들의 하위 태그로 <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>

구문 형식

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

하지만, <footer> 태그는 허용되지 않는 자손 요소와 허용되지 않는 조상 요소가 있습니다.
이러한 규칙들은 <footer> 태그가 특정 상황에서 사용될 경우 웹 페이지의 콘텐츠를 파악하는데 어려움이 발생할 수 있기 때문에 생긴 것으로서, <footer> 태그를 사용할 때 반드시 고려해야 합니다.

footer 태그의 기술적인 구문 요약
허용되지 않는 자손 요소
허용되지 않는 조상 요소

브라우저 호환성

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

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

명세서

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

참고문헌

같이 보기