<footer>
태그의 정의 및 사용법
<footer>
태그는
일반적으로 웹 페이지의 맨 하단에 있는 글로벌(혹은 전역) 푸터를 나타내거나,
글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타냅니다.
<footer>
태그는 가장 가까운 조상 섹션 내용 요소에 대한 푸터 또는 그러한 조상이 없는 경우 <body>
요소에 대한 푸터('글로벌 푸터'라고 함)를 나타내기 위해 사용합니다.
푸터는 일반적으로 누가 작성했는지, 관련 문서에 대한 링크, 저작권 데이터 등과 같은 해당 섹션에 대한 정보를 포함합니다.
글로벌 푸터(Global Footer, 전역 푸터)를 나타낼 때
<footer>
태그는
일반적으로 웹 페이지 맨 하단에 있는 저작권 정보, 개인정보처리방침에 대한 링크 등을 내용을 포함한 글로벌 푸터 부분을 나타내기 위해 사용합니다.
HTML 요소(Element, 혹은 태그)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 role
속성의 값은 contentinfo
입니다. 이것은 스크린 리더를 사용하는 사용자를 위한 웹 접근성을 고려하기 위해 사용됩니다. 글로벌 푸터임을 명시적으로 나타내기 위해서는 role="contentinfo"
를 사용하세요.
다음은 <footer>
태그가 글로벌 푸터로 사용되는 예입니다.
<footer>
태그를 사용해서 글로벌 푸터임을 나타냈습니다.
<footer role="contentinfo"> <!-- 주의하세요! role="contentinfo 사용 -->
<address>
© 2023 웹 페이지 제작자
<a href="mailto:contact@example.com">contact@example.com</a>
</address>
</footer>
알아두세요!
위 코드를 보면 <footer>
태그에 role="contentinfo"
를 사용한 것을 알 수 있습니다. 대부분의 웹 접근성을 위한 스크린리더에서는
<footer>
태그가 HTML 문서의 맥락상 글로벌 푸터인지 판단합니다. 그래서, <footer>
태그에 role="contentinfo"
를 추가하지 않아도 됩니다. 하지만 일부 스크린리더에서 글로벌 푸터인지 판단하지 못하는 문제가 있습니다. 웹 접근성을 위해 이 문제를 해결하려면 <footer>
태그에 role="contentinfo"
를 추가해야 합니다.
다음은 <footer>
태그를 사용하지 않고 <div>
태그에 role="contentinfo"
를 사용해서 글로벌 푸터로 사용되는 예입니다.
<footer>
태그를 사용하지 않고 <div>
태그에 role="contentinfo"
를 사용해서 글로벌 푸터임을 나타냈습니다.
<div role="contentinfo">
<address>
© 2023 웹 페이지 제작자
<a href="mailto:contact@example.com">contact@example.com</a>
</address>
</div>
글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 담을 때
<footer>
태그는 글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타내기 위해 사용합니다.
<footer>
태그는 글로벌 푸터 뿐만 아니라, 글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크에 대한 영역을 담는데 사용합니다. 이를 통해 웹 페이지의 내용을 시멘틱하게 하고 이해하기 쉽게 합니다. 주로 다음의 태그들의 하위 태그로 사용됩니다.
이러한 태그들의 하위 태그로 <footer>
태그가 사용될 경우 글로벌 헤더로 간주되지 않습니다. role
속성의 값도 contentinfo
로 간주되지 않습니다.
다음은 <footer>
태그가 글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 담을 때 사용되는 예입니다.
<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>
태그를 사용할 때 반드시 고려해야 합니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<footer>
|
5 | 12 | 4 | 5 |
명세서
명세서 사양 | |
---|---|
<footer>
|
HTML Standard #the-footer-element |
같이 보기
- HTML role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공
- HTML <header> 태그 – 올바른 이해와 사용 방법
- HTML <main> 태그 – 올바른 이해와 사용 방법
- HTML <aside> 태그 – 올바른 이해와 사용 방법
- HTML <nav> 태그 – 올바른 이해와 사용 방법
- HTML <article> 태그 – 올바른 이해와 사용 방법
- HTML <section> 태그 - 올바른 이해와 사용 방법
- HTML <address> 태그 - 올바른 이해와 사용 방법
- HTML <div> 태그 - 올바른 이해와 사용 방법
- HTML 제목(<h1>~<h6>) 태그 - 올바른 이해와 사용 방법