使用HTML5的和
You should use the HTML5 <header></header> and <footer></footer> tags to semantically define the top and bottom sections of a webpage or a specific section within a page. These tags help structure your content in a way that's more meaningful to both browsers and assistive technologies like screen readers.
They're not just for styling — they carry semantic meaning, which helps with accessibility, SEO, and maintaining clean, readable code.
When to use <header></header>
The <header></header> element is best used at the top of a page or within a section to introduce content. It typically contains:
- Site logo or title
- Navigation menus
- Introductory text or headlines
- Search bars (if relevant)
Examples:
- The top area of?? a blog post with the title and author info
- A global site header with a logo and main navigation
Keep in mind: You can have multiple <header></header> elements on a single page — one for the overall page and others inside individual sections or articles.
When to use <footer></footer>
The <footer></footer> tag is meant for the bottom of a page or a section. It usually includes:
- Copyright notices
- Contact info
- Sitemap or related links
- Legal links (like Privacy Policy)
- Author credits (in article footers)
Just like <header></header> , you can have more than one <footer></footer> on a page. For example:
- A global footer at the bottom of the website
- A per-article footer inside a blog post that shows tags or sharing buttons
It's also common to see <footer></footer> inside <section></section> or <article></article> tags when structuring modular content.
Common mistakes to avoid
Sometimes people misuse these tags just for layout purposes — like wrapping them around visual headers or footers without considering their semantic purpose.
Avoid doing things like:
- Using
<header></header> at the bottom of a page just because of its style
- Putting unrelated content like sidebars inside
<header></header> or <footer></footer>
- Forgetting that these tags are block-level by default but still need proper styling
Also, don't confuse <header></header> with the <header></header> is part of the visible page content.
Basic structure example
Here's how a typical HTML layout might look using these tags:
<body>
<header>
<h1>My Website</h1>
<nav>...</nav>
</header>
<main>
<article>
<header>
<h2>Blog Post Title</h2>
<p>Posted by Jane Doe</p>
</header>
<p>Article content here...</p>
<footer>
<p>Tags: html, web dev</p>
</footer>
</article>
</main>
<footer>
<p>© 2025 MyWebsite. All rights reserved.</p>
<nav>...</nav>
</footer>
</body> This kind of structure makes it easier for tools and search engines to understand what each part of your page does.
基本上就這些。用對了<header></header>和<footer></footer> ，不僅能提升代碼可讀性，還能讓網(wǎng)站更易訪問、更容易維護(hù)。
以上是何時(shí)使用HTML5標(biāo)頭和頁腳標(biāo)籤？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！