<footer>
태그의 정의 및 사용법
<footer>
태그는
일반적으로 웹 페이지의 맨 하단에 있는 글로벌(혹은 전역) 푸터를 나타내거나,
글이나 컨텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타냅니다.
글로벌 푸터(Global Footer, 전역 푸터)를 나타낼 때
<footer>
태그는
일반적으로 웹 페이지 맨 하단에 있는 저작권 정보, 개인정보처리방침에 대한 링크 등을 내용을 포함한 글로벌 푸터 부분을 나타내기 위해 사용합니다.
HTML 요소(Element, 혹은 태그)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 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="banner"
를 사용해서 글로벌 푸터임을 나타냈습니다.
<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>
태그가 글이나 컨텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 담을 때 사용되는 예입니다.
<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>
브라우저 호환성
태그 |
Chrome
|
Edge
|
Firefox
|
Safari
|
---|---|---|---|---|
<footer>
|
5 | 12 | 4 | 5 |
같이 보기
- HTML role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공
- HTML <header> 태그 – 올바른 이해와 사용 방법
- HTML <main> 태그 – 올바른 이해와 사용 방법
- HTML <aside> 태그 – 올바른 이해와 사용 방법
- HTML <nav> 태그 – 올바른 이해와 사용 방법
- HTML <article> 태그 – 올바른 이해와 사용 방법
- HTML <section> 태그 - 올바른 이해와 사용 방법
- HTML <address> 태그 - 올바른 이해와 사용 방법
- HTML <div> 태그 - 올바른 이해와 사용 방법