Skip to content

HTML Page Structure

No Structure

Look at this webpage... It has various bits of content, but no structure at all - Although we have gaps in the code, the browser ignores these and renders the page as one large lump of text...

<strong>Site Name</strong>

<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>

Main Heading

Sub-Heading

If you've known anything about the true nature of the universe, anything at all, you would have hidden from it in terror.

Note:

His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.

Sub-Heading

Man has gone out to explore other worlds and other civilizations without having explored his own labyrinth of dark passages and secret chambers, and without finding what lies behind doorways that he himself has sealed.

&copy; 2025 Jimmy Tickles

body {
    font-family: sans-serif;
}

Adding Some Structure with Paragraphs

We have updated the webpage to break apart the text using using <p> (paragraph) tags. This improves things a little:

<strong>Site Name</strong>

<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>

<p>Main Heading</p>

<p>Sub-Heading</p>

<p>If you've known anything about the true nature of the universe, anything at all, you would have hidden from it in terror.</p>

<p>Note:</p>

<p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>

<p>Sub-Heading</p>

<p>Man has gone out to explore other worlds and other civilizations without having explored his own labyrinth of dark passages and secret chambers, and without finding what lies behind doorways that he himself has sealed.</p>

<p>&copy; 2025 Jimmy Tickles</p>

body {
    font-family: sans-serif;
}

However, but the role / purpose of each bit of content is still not clear...

  • Are the site name and the links part of a header?
  • Are the headings the start of new sections?
  • Are the sub-headings and paragraphs related?
  • Is the copyright message part of the last section?

Adding More Structure via Headings

We can add some structure / meaning to parts of the page by making use of appropriate headings tags such as <h1> and <h2>.

Now you can see that there is one large section of content, with two sub-sections - the tags make this clearer, both in the code and visually in the rendered page:

<strong>Site Name</strong>

<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>

<h1>Main Heading</h1>

<h2>Sub-Heading</h2>

<p>If you've known anything about the true nature of the universe, anything at all, you would have hidden from it in terror.</p>

<h3>Note:</h3>

<p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>

<h2>Sub-Heading</h2>

<p>Man has gone out to explore other worlds and other civilizations without having explored his own labyrinth of dark passages and secret chambers, and without finding what lies behind doorways that he himself has sealed.</p>

<p>&copy; 2025 Jimmy Tickles</p>

body {
    font-family: sans-serif;
}

However, the various parts of the page are still not grouped in any kind of logical way. Headings and related content ought to be grouped together so that we can style them more easily, etc.

In this example, the note heading and paragraph is actually not part of the section above it - it's a separate aside (additional, related info). But this is not clear at all at the moment.

Adding Structure via Grouping

We can add further structure / meaning to parts of the page by grouping related items together.

For example, the sub-heading should be grouped with the paragraph(s) that are part of that sub-section, and both sub-sections should be part of the main content section.

We could simply use <div> (division) tags to make these groups:

<div>
    <strong>Site Name</strong>

    <div>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>
</div>

<div>
    <h1>Main Heading</h1>

    <div>
        <h2>Sub-Heading</h2>

        <p>If you've known anything about the true nature of the universe, anything at all, you would have hidden from it in terror.</p>
    </div>

    <div>
        <h3>Note:</h3>

        <p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>
    </div>

    <div>
        <h2>Sub-Heading</h2>

        <p>Man has gone out to explore other worlds and other civilizations without having explored his own labyrinth of dark passages and secret chambers, and without finding what lies behind doorways that he himself has sealed.</p>
    </div>
</div>

<div>
    <p>&copy; 2025 Jimmy Tickles</p>
</div>

body {
    font-family: sans-serif;
}

body > div:first-child {
    display: flex;
    justify-content: space-between;
}

There is now a logical structure or hierarchy to the page. We can clearly see which parts relate to which other parts. It would now be relatively easy to style the various groupings.

But, using just <div> tags can make the code pretty difficult to work with - there are so many <div> and </div> tags that it can be confusing.

Using Semantic Tags to Define Structure

HTML version 5 introduced a number of tags that act just like a <div> tag, allowing parts of a page to be grouped. However, by having clearly named tags, the purpose of each grouping is made very clear and specific:

  • <header> - Content that comes at the start of a page or section (e.g. for site name, logos, navigation, etc.)
  • <footer> - Content that comes at the end of a page or section (e.g. authorship info, contact details, etc.)
  • <nav> - A set of navigation links (e.g. a menu of page/section links)
  • <main> - The main content of a page, without
  • <section> - A clear sub-set of the content (e.g. chapters, an introduction, etc.)
  • <article> - A sub-set of the content that should make sense on its own (e.g. a blog post, or details of a product)
  • <aside> - Content that is not part of the main content, but is indirectly related (e.g. additional notes)
  • <figure> - Groups images and related titles / notes

Note

When used correctly, semantic tags allow assistive technologies such as screen readers to navigate a page much more effectively.

Here is our page, correctly structured using semantic tags:

<header>
    <strong>Site Name</strong>

    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

<main>
    <h1>Main Heading</h1>

    <section>
        <h2>Sub-Heading</h2>

        <p>If you've known anything about the true nature of the universe, anything at all, you would have hidden from it in terror.</p>
    </section>

    <aside>
        <h3>Note:</h3>

        <p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>
    </aside>

    <section>
        <h2>Sub-Heading</h2>

        <p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>
    </section>
</main>

<footer>
    <p>&copy; 2025 Jimmy Tickles</p>
</footer>

body {
    font-family: sans-serif;
}

body > header {
    display: flex;
    justify-content: space-between;
}

body > main aside {
    width: 14rem;
    font-size: 0.7em;
    float: right;
    margin-top: 0;
}

body > main section:nth-of-type(2) {
    width: calc(100% - 16rem);
}

body > footer {
    clear: both;
}

The page now has a clear, expressive and well-considered structure - Every part of the page has a well-defined meaning / purpose.