html
/

HTML Header & Footer: Structuring Top and Bottom Sections

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Header & Footer: Structuring Top and Bottom Sections

What are Header and Footer?

The <header> and <footer> elements are semantic HTML tags used to define the top and bottom sections of a webpage or a section.

Header Element

The <header> typically contains branding, logos, navigation links, or introductory content.

HTMLRead-only
1
<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

Footer Element

The <footer> typically contains copyright information, contact details, and additional links.

HTMLRead-only
1
<footer>
  <p>© 2026 My Website</p>
  <a href="#">Privacy Policy</a>
</footer>

Complete Example

HTMLRead-only
1
<header>
  <h1>My Site</h1>
</header>

<main>
  <p>Welcome to my website</p>
</main>

<footer>
  <p>© 2026 My Site</p>
</footer>

Multiple Header & Footer Usage

You can use multiple header and footer elements within sections or articles.

HTMLRead-only
1
<article>
  <header>
    <h2>Blog Title</h2>
  </header>
  <p>Content here...</p>
  <footer>
    <p>Author: John</p>
  </footer>
</article>

Styling with CSS

CSSRead-only
1
header {
  background: #333;
  color: white;
  padding: 10px;
}

footer {
  background: #f2f2f2;
  text-align: center;
  padding: 10px;
}

Best Practices

  • Use header for branding and navigation
  • Use footer for copyright and links
  • Keep header clean and simple
  • Avoid overloading footer with too much content
  • Use semantic structure for better SEO and accessibility

Common Mistakes

  • Using div instead of semantic tags
  • Overcrowding header with too many elements
  • Ignoring accessibility considerations
  • Placing unrelated content in footer

Conclusion

HTML header and footer elements are essential for structuring web pages. Proper use improves readability, SEO, and accessibility.

Try it yourself

<header><h1>My Website</h1></header>
<main><p>Hello World</p></main>
<footer>© 2026</footer>

Test Your Knowledge

Q1
of 3

Which tag defines the top section?

A
<top>
B
<header>
C
<nav>
D
<main>
Q2
of 3

Which tag defines the bottom section?

A
<bottom>
B
<footer>
C
<section>
D
<end>
Q3
of 3

Which tag is used for navigation?

A
<nav>
B
<menu>
C
<link>
D
<route>

Frequently Asked Questions

What is the header tag?

It defines the top section of a webpage or section.

What is the footer tag?

It defines the bottom section of a webpage or section.

Can I use multiple headers?

Yes, within different sections or articles.

Previous

html semantic

Next

html section article

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.