HTML Layout and Structure

In modern HTML, semantic elements like <header>, <main>, and <footer> are used to define the structure and layout of a webpage.

<header> - The Introductory Section

The <header> element represents the introductory content for a webpage or a section.

It is typically placed at the top, but it can also appear inside other elements like <article> or <section>.

Purpose:

• Display branding (logo, name)
• Provide navigation
• Introduce the content

Example:

<header>
    <h1>Main Heading</h1>
</header>

Important Rules:

• You can use multiple <header> elements.
  • One for the page
  • Others inside <article> or <section>

<main> - The Core Content Area

The <main> element represents the main content of the webpage. It defines the primary purpose of the page.

Purpose

• Contains the most important content.
• Excludes repeated elements like <header>, <footer>, and <aside>.

Example:

<main>
    <h2>Learn HTML</h2>
    <p>This is the main content of the page.</p>
</main>

Important Rules:

• Only one <main> element should be used per page.
• It should not include:
  • Navigation
  • Sidebar content
  • Footer content

<footer> - The Closing Section

The <footer> element represents the bottom section of a webpage and contains supporting information.

Purpose

• Provides additional information.
• Closes the page or section.

<footer>
    <p>© 2026 Footer Section</p>
    <a href="https://www.codeeasyhub.com/introduction.html">Visit our HTML Tutorial</a>
</footer>

Important Rules:

• You can use multiple <footer> elements, not just one.

Why Semantic Elements Are Important

• Improve SEO (Search Engine Optimization)
• Make code easier to read
• Improve accessibility
• Help search engines understand content

Conclusion

<header>, <main>, and <footer> are essential semantic elements in HTML5 that define the structure and organization of a webpage.

They divide a webpage into clear sections—where <header> introduces the content, <main> contains the primary and most important information, and <footer> provides supporting or concluding details.