Structure your page

This is the first chapter of the third part of our tutorial on how to create a website with HTML and CSS.

Having learned about both the HTML and the CSS languages in the two previous parts, all that's left to do is to put them together to start building our website.

You may have notice that while we know how to insert element with HTML and even stylize them thanks to CSS, our pages still don't look quite like what we're used to seeing on websites.

That's completely normal. Keep reading to find out why.

In this chapter we will learn how to structure our web pages in the best way possible.

Webpage structure

Most websites aren't that original.

Sure, they all seem to have different designs and decorations, but if you think about it for a few minutes you'll realize that the core of nearly every site remains identical.

When you remove every dispensable and purely cosmetic feature, there are four elements that you will find on almost every website you visit.

a header
a navigation menu
a central content area
a footer

Some are necessary for smooth web browsing (navigation menu) while others are conventionally expected on a website.

If we were to draw a blueprint that would fit most web pages, we would get something like this.

The four distinct sections are easily recognizable.

Pick any website you want, including this one (www.siteraw.com), and chances are you'll run into the same structure.

They will usually have very different content, functionality and look and feel but they'll almost all follow the same common pattern.

HTML structural tags

Now is the time to answer the age old question: how do we translate that blueprint into readable and workable HTML code?

Prior to HTML5 there was only one tag for handling web page anatomy: <div> (or <table> even before that).

Besides being repetitive, the problem with using only one tag for structural purposes is that <div> carries no semantics.

While human readers can identify the distinct elements thanks to CSS styles (and a bit of experience and intuition), browsers, screen readers and robots can't... which defeats the purpose of having HTML as a semantic language.

Thankfully this inconvenience has been since then resolved, as HTML5 saw the apparition of six new tags designed specifically for building the framework of your website.

These are called HTML structural elements and are as follows.

<header>: Contains the header content of a site.
<footer>: Contains the footer content of a site.
<nav>: Contains the navigation menu or other navigation functionalities of a site.
<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.
<article>: Contains a standalone piece of content.
<aside>: Contains a block of content that is related to the main content around it, but not central to the flow of it.

Here is what the a standard web page would look like using these tags.

We will go into more detailed explanations of each of these new tags, but keep in mind you can use these elements multiple times within the same web page as the figure shows.

The header element

Most websites have a header, it's one of their most recognizable features.

Headers can either be a logo, a banner, a slogan or any combination thereof. As mentioned you can have more than one header on each page.

In HTML, the tag used to wrap the header content is <header>.

Here is how you would write a simple header code.

<header>
    <h1>Welcome to SiteRaw</h1>
</header>

You can add whatever content you desire in your header: paragraphs, images, titles of various importance.

The footer element

Unlike the header element, footers are usually placed at the bottom of a web page as their name implies.

They usually contain information such as contact information, the author's name, copyright or other legal notices, links to social media profiles and so on.

The tag for the footer content is <footer>.

Here is an example.

<footer>
    <p>© SiteRaw, the best site on the web.</p>
</footer>

The navigation element

The navigation element features the website's main browsing links and other constructs that bring the visitor to a new page (a search bar for example).

You will often find a bulleted browsing menu in the navigation element, either vertical or horizontal.

The HTML tag for the navigation content is <nav>.

You can see the example of a menu with a bulleted list below.

<nav>
	<ul>
		<li><a href="http://www.siteraw.com">Home</a></li>
		<li><a href="http://www.siteraw.com">Forum</a></li>
		<li><a href="http://www.siteraw.com">Contact</a></li>
	</ul>
</nav>

The section element

The section element is a more general item containing the main and usually central portion of a web page.

It's a fairly generic element but even so it stills holds more semantic meaning than the regular <div>.

You can see an example below.

You will often find multiple other components included within the section element, as we will learn later on.

For now here is a demonstration of the section HTML tag.

<section>
	<h1>SiteRaw is awesome</h1>

	<p>SiteRaw is the best site on the web.</p>
</section>

Keep in mind that you can use these items more than once on your page.

The section element

We now saw the four main structural elements of HTML.

Four? But you said we were going to learn about six new HTML tags!

That's intentional.

The two tags that we are left with are slightly different as they are generally nested inside another HTML structural element, very often the <section> tag.

The section element is an independent portion of the web page.

It can contain headers, footers and navigation menus even if the page already has those itself.

Knowing this is important to understand how these new tags work.

The article element

The article element is used to classify any type of standalone content, such as news articles (obviously), blog posts, RSS feeds or even images or videos.

The rule of thumbs is that if an item of content is suitable to be read or watched on its own, it makes sense to use the article element to mark it.

For example, this very tutorial you are currently reading could be marked as an HTML article.

The tag we need for this purpose is <article>.

Here is how you can use it.

<section>
	<article>
		<h1>SiteRaw is awesome</h1>

		<p>SiteRaw is the best site on the web.</p>
	</article>
</section>

You can add several article elements within the same <section> tag as long as it makes semantic sense to do so.

The aside element

The aside element is related to <article> and often goes alongside it.

Any content included within it should be additional information that is relevant to the main flow but doesn't fit directly in it.

Wiki sites offer good examples of the proper use of the aside element.

The block on the right contains additional information that is both relevant and yet not part of the main article.

The HTML code for aside elements is <aside>.

<aside>
	<h1>About the author</h1>

	<p>SiteRaw was created by... find out never!</p>
</aside>

Just as with <article> I recommend nesting the aside element within the section tag.

A section does not necessarily have to contain <article> or <aside> tags. You could create sections only containing paragraphs, or just an <article> and no <aside>. Or even multiple <aside> tags. the possibilities are endless with these HTML elements.

A complete webpage

Until now we have mostly talked about the theory behind the use of these tags.

It's time to get practical.

As a conclusion to this chapter we will be building our first complete web page.

Think of this as a heuristic exercise to put test your skills as a web developer.

The goal of the exercise is simple: design a web page utilizing every new element we discovered in this chapter.

To simplify things even further I've included a diagram of the basic structure we want to build.

This is just one example of the many ways you can organize your page in HTML.

The foundation

For the sake of clarity, our demonstration web page will contain only one occurrence of each HTML structural element.

The code below showcases all the tags we've learned about in this chapter.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>
        <header>
            [...]
        </header>

        <nav>
            [...]
        </nav>

        <section>
            <article>
                [...]
            </article>

            <aside>
                [...]
            </aside>
        </section>

        <footer>
            [...]
        </footer>

    </body>
</html>

This code should help you see how a typical web page is arranged: a header, a navigation menu, a central section and a footer.

Of course, our page is empty at the moment. Try filling it with whatever content you want.

For our example I simply copied and incorporated the various examples we saw for each element.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>
        <header>
            <h1>Welcome to SiteRaw</h1>
        </header>

        <nav>
            <ul>
                <li><a href="http://www.siteraw.com">Home</a></li>
                <li><a href="http://www.siteraw.com">Forum</a></li>
                <li><a href="http://www.siteraw.com">Contact</a></li>
            </ul>
        </nav>

        <section>
            <article>
                <h1>SiteRaw is awesome</h1>

                <p>SiteRaw is the best site on the web. SiteRaw is the best site on the web. SiteRaw is the best site on the web.</p>

		<p>SiteRaw is awesome. True story.</p>
            </article>

            <aside>
                <h1>About the author</h1>

                <p>SiteRaw was created by... find out never!</p>
            </aside>
        </section>

        <footer>
            <p>© SiteRaw, the best site on the web.</p>
        </footer>

    </body>
</html>

And here is the result.

This looks nothing like a website! It looks just like what we've been doing until now!

That's perfectly normal.

There is no visual difference when using HTML structural elements compared to what we've done until now.

HTML is first and foremost a markup language, and the use of these tags is mainly for building a more semantically readable website.

It is however entirely possible to format our web page using CSS.

You can easily change the design of the web page by applying a few styles to the element we discovered.

The HTML code is exactly the same, I only added a bit of CSS.

We'll learn how to do that and much more in the following chapters.

< Summary >