使用HTML5的<header>和<footer>元素能提升網(wǎng)頁結(jié)構(gòu)清晰度與可訪問性。 <header>通常位於頁面或區(qū)塊頂部，包含站點標題、導(dǎo)航菜單或橫幅等介紹性內(nèi)容；<footer>則常見於底部，放置版權(quán)信息、聯(lián)繫方式或次要導(dǎo)航鏈接。兩者均可多次使用，且需確保內(nèi)容相關(guān)性。它們支持CSS樣式設(shè)置，如背景色、內(nèi)邊距和文本對齊方式，以增強視覺區(qū)分度。但並非所有頁面都必須包含這兩個元素，簡單頁面可根據(jù)實際需求省略，而標準網(wǎng)頁則建議使用以提升用戶體驗和SEO效果。

When you're building a webpage with HTML5, using the right semantic elements makes your code clearer and more accessible. Two of the most useful tags for structuring your page are <header></header> and <footer></footer> . These aren't just for looks — they help browsers, screen readers, and search engines understand what part of the page they're dealing with.

What goes inside a <header></header> ?

A <header></header> typically sits at the top of a page or section and contains introductory content. It's common to include things like:

• The site logo or title
• Navigation menus
• A banner image or heading

You can use it at the top of the whole page, or even inside individual sections or articles. Just keep in mind that each <header></header> should be relevant to the section it belongs to.

For example:

 <header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

This structure is clean and tells both users and tools that this area is the top part of your page.

What belongs in a <footer> ?

The <footer> usually appears at the bottom of a page or section, and it often includes:

• Copyright info
• Contact details
• Social media links
• Secondary navigation

Like <header> , a <footer> can be used more than once — for example, at the bottom of a blog post or at the end of the entire website.

Here's a basic example:

 <footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <ul>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/privacy">Privacy Policy</a></li>
  </ul>
</footer>

Just make sure not to put unrelated stuff in there. Stick to closing information or links that help wrap up the page.

Can I style them with CSS?

Yes, absolutely. Since <header> and <footer> are block-level elements, you can style them just like any other <div> . For instance, you might want to center the text in your footer or give your header a background color.

Some common styling tips:

• Use margin: 0 auto to center align your header or footer content
• Add padding so text doesn't stick to the edge
• Set background colors or borders to visually separate these sections

Example:

 header {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}
footer {
  font-size: 0.9em;
  color: #666;
  padding: 15px;
}

These styles help make those areas stand out without being too flashy.

Do I need both on every page?

Not necessarily. Some pages, especially simple ones like a thank-you screen or an error page, might not need a full header or footer. But for most standard web pages — especially blogs, business sites, or portfolios — including both helps with usability and SEO.

If you're leaving one out, ask yourself: does the user know where they are and how to get around? If not, consider adding at least a basic version.

That's the basics of using <header></header> and <footer></footer> in HTML5. They're straightforward but powerful tools for organizing your content and making your site easier to navigate.

以上是用HTML5` `和`'和`'定義頁面標頭和頁腳。的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！