Using HTML5's and
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.
Basically that's it. Using <header></header> and <footer></footer> correctly can not only improve the readability of the code, but also make the website more accessible and easier to maintain.
The above is the detailed content of When to use the HTML5 header and footer tags?. For more information, please follow other related articles on the PHP Chinese website!