<footer> - footer or block end
The <footer> is a semantic tag in HTML5 used to define the footer of a document or a section, typically containing copyright information, author details, contact information, or related links. It not only improves code readability but also helps search engines and assistive technologies better understand the page structure.
Basic Usage of <footer>
The <footer> tag is commonly used as the bottom section of a page or the concluding part of an independent block. It can appear inside tags like <body>, <article>, <section>, etc. A simple example of a page footer:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<article>
<h1>Article Title</h1>
<p>Here is the main content of the article...</p>
<footer>
<p>Published on: October 15, 2023</p>
</footer>
</article>
<footer>
<p>© 2023 Company Name. All Rights Reserved.</p>
<nav>
<a href="/privacy">Privacy Policy</a> |
<a href="/terms">Terms of Use</a>
</nav>
</footer>
</body>
</html>
Nesting and Scope of <footer>
The scope of <footer> depends on its placement. When placed directly inside <body>, it represents the footer of the entire document; when nested within other semantic tags, it only represents the footer of that specific section.
<section>
<h2>Product Features</h2>
<p>Our product has the following advantages...</p>
<footer>
<p>Last updated: October 2023</p>
</footer>
</section>
<footer>
<address>
Contact: <a href="mailto:contact@example.com">contact@example.com</a>
</address>
</footer>
Common Content in <footer>
The footer area often contains various types of information:
-
Copyright Information:
<footer> <p>© 2020-2023 Example Inc. All Rights Reserved.</p> </footer> -
Contact Information:
<footer> <address> Author: John Doe<br> Phone: <a href="tel:+8613800138000">138-0013-8000</a> </address> </footer> -
Related Links:
<footer> <nav> <ul> <li><a href="/about">About Us</a></li> <li><a href="/careers">Careers</a></li> <li><a href="/blog">Blog</a></li> </ul> </nav> </footer> -
Social Media Links:
<footer> <div class="social-links"> <a href="https://twitter.com/example"><img src="twitter-icon.png" alt="Twitter"></a> <a href="https://facebook.com/example"><img src="fb-icon.png" alt="Facebook"></a> </div> </footer>
Styling <footer>
You can customize the appearance of <footer> using CSS. Here’s an example of a responsive footer style:
<style>
footer {
background-color: #333;
color: white;
padding: 2rem;
margin-top: 2rem;
}
footer a {
color: #4CAF50;
text-decoration: none;
}
footer nav {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
footer {
padding: 1rem;
text-align: center;
}
footer nav {
flex-direction: column;
}
}
</style>
<footer>
<p>© 2023 My Website</p>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</footer>
SEO Best Practices for <footer>
- Avoid Keyword Stuffing: While footers can include important links, avoid overusing keywords.
- Maintain Link Relevance: Only include links that are genuinely useful to users.
- Use Structured Data: Add microdata to help search engines understand the content.
<footer itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Example Company</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">123 Street</span>,
<span itemprop="addressLocality">Beijing</span>
</div>
Phone: <span itemprop="telephone">400-123-4567</span>
</footer>
Interactive Enhancements for <footer>
You can use JavaScript to add dynamic functionality to the footer, such as displaying the last modified date:
<footer id="dynamic-footer">
<p>Last modified: <span id="last-modified"></span></p>
</footer>
<script>
document.getElementById('last-modified').textContent =
new Date(document.lastModified).toLocaleDateString();
</script>
Using <footer> in Single-Page Applications (SPA)
In SPAs, <footer> may require special handling to ensure it stays at the bottom of the page:
<div class="app-container">
<main>
<!-- Main content -->
</main>
<footer class="app-footer">
<!-- Footer content -->
</footer>
</div>
<style>
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
.app-footer {
background: #222;
color: white;
padding: 1rem;
}
</style>
Accessibility Considerations for <footer>
- Use Appropriate ARIA Roles: While
<footer>is semantic by default, you can enhance accessibility withrole="contentinfo". - Ensure Sufficient Contrast: Text and background colors in the footer should have adequate contrast.
- Keyboard Navigation Friendly: All interactive elements should be accessible via keyboard.
<footer role="contentinfo" aria-label="Website Footer">
<!-- Footer content -->
</footer>
Browser Compatibility for <footer>
The <footer> tag is well-supported in all modern browsers, including:
- Chrome 5+
- Firefox 4+
- Safari 5+
- Opera 11.1+
- Edge 12+
- Internet Explorer 9+
For older versions of IE, you can ensure HTML5 tags are styled correctly with the following code:
<!--[if lt IE 9]>
<script>
document.createElement('footer');
</script>
<![endif]-->
Creative Uses of <footer>
Beyond traditional uses, <footer> can also be employed in innovative scenarios:
- As a Modal Footer:
<div class="modal">
<div class="modal-content">
<h2>Confirm Action</h2>
<p>Are you sure you want to proceed?</p>
<footer class="modal-footer">
<button class="cancel">Cancel</button>
<button class="confirm">Confirm</button>
</footer>
</div>
</div>
- As a Card Component Footer:
<div class="card">
<img src="product.jpg" alt="Product Image">
<h3>Product Name</h3>
<p>Product description...</p>
<footer class="card-footer">
<span class="price">¥199</span>
<button>Add to Cart</button>
</footer>
</div>
<footer> and Print Styles
Optimize footer display for printed pages:
<style>
@media print {
footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid #000;
}
footer a {
display: none;
}
}
</style>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：
下一篇：<nav>-导航链接
