How to Use Semantic HTML

Header Tag (<header>)

The <header> tag contains headings, navigation bars, search bars, logos, hero images, etc.

Introductory/navigational content goes here.

Main Tag (<main>)

The <main> tag contains the primary content of the webpage. Use only once per webpage.

Section Tag (<section>)

Nested within the <main> tag is the <section> tag. The <section> tag groups content together that have a related theme/purpose.

You can think of this as a replacement of <div>.

Article Tag (<article>)

(Usually) nested within the <section> tag, the <article> tag contains standalone content that you can reuse or distribute separate from your website.

Aside Tag (<aside>)

(Usually) nested within the <section> tag, the <aside> tag contains tangential1 or supplemental2 content that provides more context to the main content.

Footer Tag (<footer>)

The <footer> tag contains

  • navigation links
  • contact information
  • copyright information

Example Source Code

<!DOCTYPE html>
<html>
	<head>
		<title>Semantic HTML</title>
	</head>
	<body>
		<header>
			<h1>My Heading</h1>
		</header>

		<nav>
			<h2>My Navbar/Table of Contents</h2>
			<ul>
				<li><a href="#a">Section A</a></li>
				<li><a href="#b">Section B</a></li>
				<li><a href="#c">Section C</a></li>
			</ul>
		</nav>

		<main>
			<section id="a">
				<h3>Section A</h3>
				<p>This is a section.</p>
			</section>
			<section id="b">
				<h3>Section B</h3>
				<article>
					<p>This is an article within a section. This content (paragraph [<code>&lt;p&gt;</code>]) can be distributed elsewhere on the World Wide Web as standalone.</p>
				</article>
			</section>
			<section id="c">
				<h3>Section C</h3>
				<article>
					<p>This is an article within a section. Lorem ipsum dolor sit amet.</p>
				</article>

				<aside>
					<p>This is an aside within a section. This content intends to be optional and supplemental to the main content.</p>
				</aside>
			</section>
		</main>

		<footer>
			<p>This is a footer. Contact or copyright information goes here.</p>
			<p>Here's an example of some copyright info:<br />&copy; 20XX John Doe. All Rights Reserved.</p>
		</footer>
	</body>
</html>

Rendering of the Source Code

My Heading

Section A

This is a section.

Section B

This is an article within a section. This content (paragraph [<p>]) can be distributed elsewhere on the World Wide Web as standalone.

Section C

This is an article within a section. Lorem ipsum dolor sit amet.

This is an aside within a section. This content intends to be optional and supplemental to the main content.

This is a footer. Contact or copyright information goes here.

Here's an example of some copyright info:
© 20XX John Doe. All Rights Reserved.

Footnotes

  1. Related content but, as the name suggests, goes a little off rails. ↩
  2. Related and helpful content. Think "fun facts" or "related links." ↩