HTML Layout Elements

This tutorial is part of a web programming course for people who have no programming experience.




If you've surfed the web much in your lifetime, you've probably noticed that most pages follow a common pattern. They usually have some sort of banner, or header, at the top of the page that includes the name and logo of the organization running the site. Under the header, you'll often find the 'nav bar' which display links to the various other pages within the website. And on the bottom of each page, you'll find a footer that often displays a copy right 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. New elements were introduced in HTML 5 that allow you to divide a page up into various sections.

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 from a few lessons back that the head element is used to contain metadata (for the search engines) and links to other files (such as CSS and JavaScript files).

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. You can use a main element to contain all this content. 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 information that supplements the main content (or advertising). To create a side bar, you can use the aside element: 

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

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. You'll learn more about entity characters in the next lesson.

NEXT LESSON: Odds and Ends