Semantic Block-Level Elements
The table below describes HTML block-level elements:
Semantic Block-level Elements
|Contains a meaningless block of content. Content within a
<div> tag is not necessarily related.
|Contains a section of the page that doesn't have any other tag that more meaningfully describes the contained content. All content within a
<section> tag should be related. As a rule, if you can give the section a meaningful name, it is better to use a
<section> tag than 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.,
aside) can contain their own headers.
|Contains the footer of the page. Often used for the company's address or a copyright message or legalese. Other page elements (e.g.,
aside) can contain their own footers.
|Contains the dominant content of the page. You should have only one
main element on a page.
|Contains page or site navigation. You may have multiple
nav elements on a page.
|Contains content that is not directly related to the page's main content. You may have multiple
aside elements on a page.
|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
article elements on a page.
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 screenreaders 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
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h1>Welcome to Runners Home™</h1>
<img src="images/runners-home.png" alt="Runners Home Logo">
<p>Runners Home™ is dedicated to providing you with:</p>
<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>
<form method="post" action="newsletter.php">
<input type="email" name="email" id="email">
<p>Be the first to hear about our great offers.<br>
Sign up for our newsletter today!</p>
© 2020 Runners Home. All rights reserved.
For questions, send email to
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:
The article Tag
Mozilla describes the
article element 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.