Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.
You have already worked with
div elements to break out a block of content. But the
<div> tag doesn't tell us anything about the content it contains. In this lesson, you will learn about semantic (i.e., logical and meaningful) block-level elements.
The table below describes HTML block-level elements:
||Contains a meaningless block of content. Content within a
||Contains a section of the page that doesn't have any other tag that more meaningfully describes the contained content. All content within a
||Contains the header of the page. Often used for page headings, possibly some introductory content, and to hold the main navigation of the page. Other page elements (e.g.,
||Contains the footer of the page. Often used for the company's address or a copyright message or legalese. Other page elements (e.g.,
||Contains the dominant content of the page. You should have only one
||Contains page or site navigation. You may have multiple
||Contains content that is not directly related to the page's main content. You may have multiple
||Contains a self-contained article (e.g., for a blog or news site) that is meant to be able to stand on its own. You may have multiple
The elements above are all block-level elements with no default formatting. Unless they are styled, there will be no indication that they are included on the page. However, they are not just for styling. They also provide helpful information to screen readers and other devices that inspect or read the page, making it easier for those programs to understand the page content.
In the code below, we show how to use these tags to break up the Runners Home home page. We have added a newsletter sign-up form to show how to use the
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Runners Home™</title> </head> <body> <header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="races.html">Races</a></li> <li><a href="resources.html">Resources</a></li> <li><a href="calculator.html">Calculator</a></li> <li><a href="running-log.html">Running Log</a></li> <li><a href="my-account.html">My Account</a></li> <li><a href="logout.html">Log out</a></li> </ul> </nav> </header> <main> <section id="welcome"> <p>Hello, Stranger!</p> <h1>Welcome to Runners Home™</h1> </section> <section id="logo"> <img src="images/runners-home.png" alt="Runners Home Logo"> </section> <section id="purpose"> <p>Runners Home™ is dedicated to providing you with:</p> <ol> <li><a href="races.html">the most up-to-date information on running races</a>.</li> <li><a href="resources.html">the best resources for runners</a>.</li> </ol> </section> </main> <aside> <h3>Newsletter</h3> <form method="post" action="newsletter.php"> <label for="email">Email:</label> <input type="email" name="email" id="email"> <button>Sign Up</button> </form> <p>Be the first to hear about our great offers.<br> Sign up for our newsletter today!</p> </aside> <footer> © 2020 Runners Home. All rights reserved. For questions, send email to <a href="mailto:firstname.lastname@example.org">email@example.com</a>. </footer> </body> </html>
Notice how we used:
<header>tag to separate the navigation.
<nav>tag to hold the navigation.
<main>tag to hold the main content on the page.
<aside>tag to hold the newsletter form.
<footer>tag to hold the copyright information and a contact us link.
<section>tags for the other structurally meaningful parts: "welcome", "logo", and "purpose".
With no styling, the above code will render the following:
But with CSS, we can use these semantic elements to lay out the page:
Mozilla describes the
article element as follows:
articleelement represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.
The major difference between the
article element and the
section element is that an
article element encapsulates content that could stand alone and might be of interest outside the context of the page. The most obvious example is a blog entry or a newspaper article; however, you could also apply this to a product description as you can imagine wanting to syndicate all of your products to a website that aggregates product information from different companies.