1 Minute HTML CSS Part 16 – Layout & Sections

Last Updated: February 16, 2024

HTML PAGE LAYOUT & SECTION TAGS

<header>MY SITE</header>
 
<nav>
  <a href="home.html">Home</a>
  <a href="page.html">Page</a>
</nav>

<main>
  <article>
    <h1>My Article</h1>
    <section>SECTION A</section>
    <section>SECTION B</section>
  </article>
 
  <aside>Side bar</aside>
 
  <div>Generic division or section.</div>
</main>
 
<footer>&copy; Copyright My Site.</footer>

<header> Page header.
<nav> Navigation.
<main> Main section – Can only have one.
<article> An article.
<section> A section.
<div> Generic division or section.
<aside> Usually the sidebar, or “side related section”.
<footer> Page footer.

IS SECTIONING IMPORTANT?

All the section tags are optional, some developers just use <div>.
But they do help search engines and other developers to better understand your page structure.

Leave a Comment Cancel Reply