Learn how to build and design websites with our tutorials.

HTML5 Semantic Elements

View Tutorial Contents


Introduction to HTML5 Semantic Elements

Semantics is the study of meaning of words, text, phrases, etc.

Semantic elements in HTML are elements that have a clear meaning for both the web browser and web designers (and web developers).

Some examples of non-semantic HTML elements are <div>s and <span>s.

Some examples of semantic HTML elements are <form>, <table>, <img>, <ul>, etc.

Most of the time, <div>s are used to create parts of a web page such as headers, navigation menus, footers, etc. For example, <div id="header">, <div class="nav">, <div id="footer">, etc. HTML5 offers some new semantic elements to define different parts of a web page. For example, <header>, <nav> and <footer>.

You can add id and class attributes to the new HTML5 elements just as you would <div> tags or other HTML elements.


The table below lists the new HTML5 semantic elements and a brief description of each element.

Tag Description/Use
<article> Can be an article, a forum post, a blog entry, user-submitted comments, an interactive widget or any other independent item of content
<aside> Can be used for quotes, sidebars, advertising, groups of nav elements, and for other content that is considered separate from the main content of the page.
<details> Can be used to create an accordion-like widget that users can toggle open or closed. It can contain any type of content. It is meant to be used in conjunction with the <summary> element.
<figcaption> It defines a caption for a <figure> element. It meant to be used in conjunction with the <figure> element.
<figure> Is used to mark up images, diagrams, code examples, etc. Can be used in conjunction with the <figcaption> element.
<footer> It defines a footer for a web page or section.
<header> It specifies a header for a web page or section.
<main> It specifies the main content of a web page.
<mark> It defines text that has been highlighted or marked.
<nav> It defines navigation links.
<section> A section groups thematic content that is generic. It is not meant to be used as a <div> or an <article>.
<summary> It defines a visible heading for a
element.
<time> It defines a date or time.

Internet Explorer and HTML5 Support

Internet Explorer 11 and older versions do not offer full support for the new HTML5 semantic elements. Some older versions of some other browsers may not offer full support either. This is can be taken care of by adding the following CSS rule to your CSS stylesheet. This includes all new HTML5 elements, except <time> and <mark>, which should be displayed inline anyway.


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ 
display:block;
}


HTML5 <header> Element

The HTML5 <header> element defines a header for a web page or a section(s) within a web page. It is possible to have several <header> elements within a web page. It should be used as a container for the header of a web page and can also be used as an introduction within content areas.

The code example below shows what a typical header looks like in HTML. Notice that the <div> tag is used to define the header.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<div id="header">

<h1>
This is a heading
</h1>

<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</div>

</body>
</html>

HTML5 has a <header> element that is meant to be used specifically for headers (HTML5 also has an element for navigation menus, but we will get to that next).

The header in the code example above can now be defined using the HTML5 <header> element as shown in the code example below.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<header>

<h1>
Website Header
</h1>

<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</header>

</body>
</html>

The code example below shows you how to use the <header> element to define a header within another section of a web page. The <section> element will be explained later in this tutorial.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<header>

<h1>
Website Header
</h1>

<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</header>

<section>

<header>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

</header>

</section>

</body>
</html>


HTML5 <footer> Element

The HTML5 <footer> element defines a footer for a web page or a section(s) within a web page. It is possible to have several <footer> elements within a web page. It should be used as a container for the footer of a web page and can also be used as an introduction within content areas.

The code example below shows what a typical footer looks like in HTML. Notice that the <div> tag is used to define the footer.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

...

<div id="footer">

<p>
Website Design by LearnWebsiteDesign.com
</p>

</div>

</body>
</html>

HTML5 has a <footer> element that is meant to be used specifically for footers.

The footer in the code example above can now be defined using the HTML5 <footer> element as shown in the code example below.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

...

<footer>

<p>
Website Design by LearnWebsiteDesign.com
</p>

</footer>

</body>
</html>

The code example below shows you how to use the <footer> element to define a footer within another section of a web page. The <section> element will be explained later in this tutorial.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<section>

<h1>
This is a heading
</h1>

<p>
This is some content.
</p>

<footer>

<p>
Website Design by LearnWebsiteDesign.com
</p>

</footer>

</section>

</body>
</html>


HTML5 <nav> Element

The HTML5 <nav> element is meant to be used for navigation menu links, search forms, and other links that will take the user to a different area of the current web page that they are on or a different page within the same website. It is not meant to be used for other links, for example, sponsored links.

The code example below shows an example of a navigation menu that is defined by the HTML5 <nav> element within a header.

You can include only the links if you want within the <nav> menu if you want, however, I have placed the links within an un-ordered list because it makes it easier to style the navigation menu.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<header>

<h1>
Website Header
</h1>

<nav>

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</nav>

</header>

</body>
</html>


HTML5 <main> Element

The HTML5 <main> element should contain the main content of your web page and should only be used once per page. The content that is contained within the <main> element should not appear anywhere else on that page. Content that will be repeated on multiple pages within the website, such as headers, footers, logos, navigation menus, etc., should not be contained within the <main> element.

The HTML5 <main> element should NOT be placed within any <header>, <footer>, <nav>, <article> or <aside> elements.

The code example below shows you how to use the HTML5 <main> element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<header>

<h1>
LearnWebsiteDesign.com
</h1>

<nav>

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</nav>

</header>

<main>

<h1>Newest Articles</h1>

<p>
This are our latest articles and posts.
</p>

<article>

<h2>Web Design Trends</h2>

<p>
Stay current and up-to-date with our free newsletter...
</p>

<p>
...
</p>

</article>

<article>

<h2>New To Freelancing?</h2>

<p>
Learn the ins and outs of working as a web design freelancer...
</p>

<p>
...
</p>

</article>

</main>

</body>
</html>


HTML5 <section> Element

The HTML5 <section> element is meant to have more semantic meaning than a <div> tag. It is meant to contain different related subjects or areas of functionality, for example, articles, posts or comments are meant to be contained within <section> elements.

The code example below shows you how to use the <section> element within a web page. The code example also includes the HTML5 <article> element. It will be explained next. Notice that there are two <section> elements, one contains content that is related to articles and the other contains content that related to a contact form.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<header>

<h1>
LearnWebsiteDesign.com
</h1>

<nav>

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</nav>

</header>

<main>

<section id="articles">

<h1>
Newest Articles
</h1>

<p>
This are our latest articles and posts.
</p>

<article class="article-1">

<h2>
Web Design Trends
</h2>

<p>
Stay current and up-to-date with our free newsletter...
</p>

<p>
...
</p>

</article>

<article class="article-2">

<h2>
New To Freelancing?
</h2>

<p>
Learn the ins and outs of working as a web design freelancer...
</p>

<p>
...
</p>

</article>

</section>

<section id="contact-us">

<h2>
Contact Us
</h2>

<form>

...

</form>

</section>

</main>

</body>
</html>


HTML5 <article> Element

The HTML5 <article> element is meant to contain related individual pieces of content, for example, articles, blog posts, videos, images, news items, etc.

The code example below is the same as the one above, except that the <article> elements are highlighted.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<header>

<h1>
LearnWebsiteDesign.com
</h1>

<nav>

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</nav>

</header>

<main>

<section id="articles">

<h1>
Newest Articles
</h1>

<p>
This are our latest articles and posts.
</p>

<article class="article-1" >

<h2>
Web Design Trends
</h2>

<p>
Stay current and up-to-date with our free newsletter...
</p>

<p>
...
</p>

</article>

<article class="article-2" >

<h2>
New To Freelancing?
</h2>

<p>
Learn the ins and outs of working as a web design freelancer...
</p>

<p>
...
</p>

</article>

</section>

<section id="contact-us">

<h2>
Contact Us
</h2>

<form>

...

</form>

</section>

</main>

</body>
</html>


HTML5 <aside> Element

The HTML5 <aside> element is meant to contain pieces of information that is related to the main content flow, for example, sidabars, groups of <nav> elements, pull quotes, information about the author of a blog post(s), etc.

The code example is the same as the one above, except that it includes two <aside> elements, one within each <article> element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<header>

<h1>
LearnWebsiteDesign.com
</h1>

<nav>

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</nav>

</header>

<main>

<section id="articles">

<h1>
Newest Articles
</h1>

<p>
This are our latest articles and posts.
</p>

<article class="article-1" >

<h2>
Web Design Trends
</h2>

<p>
Stay current and up-to-date with our free newsletter...
</p>

<p>
...
</p>

<aside class="aside-left" >

<h3>
About The Author
</h3>

<p>
The author, whose name shall remain anonymous...
</p>

</aside>

</article>

<article class="article-2" >

<h2>
New To Freelancing?
</h2>

<p>
Learn the ins and outs of working as a web design freelancer...
</p>

<p>
...
</p>

<aside class="aside-right" >

<h3>
About The Author
</h3>

<p>
The author, whose name shall remain anonymous...
</p>

</aside>

</article>

</section>

<section id="contact-us">

<h2>
Contact Us
</h2>

<form>

...

</form>

</section>

</main>

</body>
</html>


What About <div>s In HTML5?

With the new HTML5 semantic elements, the <div> tag is the most generic of these. The <div> is meant to be used for positioning and styling a group of elements, for example, to create a wrapper for a header, the main content areas, etc.

In the code example below, I have applied a <div> the <header> and the <main> elements. This allows me to position and style that group of content, for example, I can center both areas, apply margins, padding, etc.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

</style>

</head>
<body>

<div class="wrapper">

<header>

<h1>
LearnWebsiteDesign.com
</h1>

<nav>

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</nav>

</header>

</div>

<div class="wrapper">

<main>

<section id="articles">

<h1>
Newest Articles
</h1>

<p>
This are our latest articles and posts.
</p>

<article class="article-1" >

<h2>
Web Design Trends
</h2>

<p>
Stay current and up-to-date with our free newsletter...
</p>

<p>
...
</p>

<aside class="aside-left" >

<h3>
About The Author
</h3>

<p>
The author, whose name shall remain anonymous...
</p>

</aside>

</article>

<article class="article-2" >

<h2>
New To Freelancing?
</h2>

<p>
Learn the ins and outs of working as a web design freelancer...
</p>

<p>
...
</p>

<aside class="aside-right" >

<h3>
About The Author
</h3>

<p>
The author, whose name shall remain anonymous...
</p>

</aside>

</article>

</section>

<section id="contact-us">

<h2>
Contact Us
</h2>

<form>

...

</form>

</section>

</main>

</div>

</body>
</html>