HTML Layout and Semantic Elements

This lesson is part of the Web Programming 1 Course.

Many web pages pages follow a common pattern. They usually have some sort of banner, or header, at the top of the page which displays the name and logo of the organization behind the site. Under the header, you'll often find the 'nav bar' which display links to other pages within the website. And on the bottom of each page, you'll find a footer that often displays a copyright notice (and little tiny links to the terms that you are implicitly agreeing to by visiting the site). You might see a side bar that displays adds, or supplemental information. And somewhere in the middle of all that, you'll have a section that displays the main content of the page.

In the old days, we used div elements to divide a page up into these sections. When HTML 5 was released, it introduced new elements helped search engines understand the 'semantics' of each section in a page. For example, instead of using a div element at the bottom of a page, we now have a footer element, which is specifically designed for putting a footer on a page.

There are lots of 'semantic' elements, but we'll cover a few of the most important ones in this lesson.

The HEADER Element

You can use a header element to display a banner for your website. Inside the header element you can put the name of your site (usually inside an H1 element so that it appears in big, bold font). The HTML code for a very simple header might look something like this:

<header>
    <h1>Company Name Goes Here</h1>
</header>

Don't confuse the head element with the header element. Remember that the head element contains metadata (for the search engines) and links to other files (such as CSS and JavaScript files). While the header element is used to put a banner on a page (I wonder why they didn't call it a 'banner' element?).

The NAV Element

You'll usually find the nav bar just under the header on a web page. You can use a nav element to create a nav bar. Nested within the nav element will be a list of hyperlinks that take you to different content areas of the website. For example:

<nav>
    <ul>
        <li><a href="products/index.html">Products</a></li>
        <li><a href="services/index.html">Services</a></li>
        <li><a href="contact/index.html">Contact Us</a></li>
    </ul>
</nav>

You might be wondering how to get the list of links to flow horizontally across the page (the lists that we created in earlier lessons stacked the list items vertically). You'll find out how to do that very soon when we talk about CSS.

The MAIN Element

Just after (under) the nav bar, you'll probably find the main content of the web page. This is usually the largest section on a page, since it contains the 'main' content of the page. You can use a main element for this. It might look something like this:

<main>
    <h2>Welcome to our website!</h2>
    <p>
        We are so glad you cam to visit our site, yada, yada, yada...
    </p>
</main>

The ASIDE Element

It's common for a web page to have a side bar that displays either information that supplements the main content, or ads. To create a side bar, you can use the aside element:

<aside>
    <p>Supplemental content (or ads) go here...</p>
</aside>

The FOOTER Element

Finally, you'll often find a footer at the bottom of a web page that display the 'fine print' (or at least links to the fine print). It's a good idea to put a copyright notice here since it will provide you some legal protection over the content on the page. To add a footer, use a footer element:

<footer>
    &copy; 2020 All rights reserved
    <a href="terms-of-service.html">Terms of Use</a>
</footer>

Note that an entity character is used in this footer to display a copyright symbol.

We'll be revisiting these elements very soon in the CSS unit of this course.