The objective of this tutorial is to teach you the fundamentals, features and implementation of HTML5 Semantic Tags.
Lessons
This tutorial will teach users the functionality and how to properly use the following in HTML5 Semantic Tags:
<header>
<footer>
<nav>
<article>
<section>
<time>
<aside>
<figure> and <figcaption>
Older browsers
Prerequisite
For this tutorial, you will need to know all the fundamentals of HTML and CSS. If you don’t remember or feel you are ready, please review the previous website School of HTML and CSS.
What are HTML5 Semantic Tags?
When constructing a webpage in HTML5, developers have more options on how structure the page. The most common method is designated as the <div> element with Id or Class attributes for creating headers, navigation bars, articles, footers…etc. The problem with this process is that it does not specify what the content would be; web browsers can only read and display the code as presented.
However, HTML5 permits more distinctive and specific elements that will specify and describe the element’s content for navigation bars and sections, these elements are called HTML5 Semantic Tags. In other words, instead of having <div id="header">, HTML5 Semantic Tags allows web designers to replace that div with a simple <header> tag. This method will accomplish two objectives, first, it makes coding a little easier and cleaner. Second, it assists web browsers in better understanding how the content should flow and appear on the webpage.
<header>
This tag will create a container for the webpage’s initial content such as, headings, navigation links, and logos.
Example:
<header>
<h1>Example</h1>
</header>
Results:
Example
<footer>
Similar to the header tag, this tag will create a container for the webpage’s closing content such as, copyright, contact information, bottom navigation links.
Example:
<footer>
<p>Example</p>
</footer>
Results:
<nav>
This tag denotes a fraction of the webpage for navigation links and buttons.
Example:
<header>
<nav>
<a href="index.php">
<a href="htm5semantic.php">
<a href="fontawesome.php">
</nav>
</header>
Results:
<article>
The article element can be used to make specific and independent content separate from the rest of the webpage’s content, for instance, news items, comment section, forum and blog posts.
Example:
<article>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies suscipit lectus et rutrum. Donec lacinia semper leo. Suspendisse malesuada auctor nisi, vitae egestas eros adipiscing nec. Pellentesque mollis enim ac semper facilisis. Phasellus sit amet sem placerat, laoreet dui in, lacinia leo. Nullam sodales quam vitae augue luctus, sed porta dui pellentesque. Vestibulum semper dui felis. Mauris volutpat aliquet mi, a aliquet diam pharetra eu. Duis pellentesque dictum metus, sed congue erat mollis eget. </p>
</article>
Results
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies suscipit lectus et rutrum. Donec lacinia semper leo. Suspendisse malesuada auctor nisi, vitae egestas eros adipiscing nec. Pellentesque mollis enim ac semper facilisis. Phasellus sit amet sem placerat, laoreet dui in, lacinia leo. Nullam sodales quam vitae augue luctus, sed porta dui pellentesque. Vestibulum semper dui felis. Mauris volutpat aliquet mi, a aliquet diam pharetra eu. Duis pellentesque dictum metus, sed congue erat mollis eget
<section>
Like the div tag, this element can break up content on the page into sections and act as a container for a set of related contents, for instance, a group of news items.
<section>
<article>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies suscipit lectus et rutrum. Donec lacinia semper leo. Suspendisse malesuada auctor nisi, vitae egestas eros adipiscing nec.</p>
</article>
</section>
Results:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies suscipit lectus et rutrum. Donec lacinia semper leo. Suspendisse malesuada auctor nisi, vitae egestas eros adipiscing nec.
<time>
To incorporate dates and/or a clock on webpages, use the <time> tag along with the attribute datetime this will denote the date on the website.
Example:
<p>The Time is <time>10:00</time>am</p>
<p>Today’s date is time<timedatetime="Year-Month-Day"> </time>.
The Time is am
Today’s date is
<aside>
This tag can place specific content on the side of the main content on the webpage.
Example:
<aside>
<h3>Sidenote</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies suscipit lectus et rutrum. Donec lacinia semper leo. Suspendisse malesuada auctor nisi, vitae egestas eros adipiscing nec.</p>
</aside>
Results:
Duis orci ipsum, adipiscing eu vehicula non, auctor eu odio. Donec sagittis magna vel nisi faucibus congue. Morbi nec neque ut nunc pretium pharetra. Suspendisse aliquet purus vel massa dictum fermentum eu venenatis massa. Ut euismod varius commodo. Aliquam erat volutpat.
<figure> and <figcaption>
When content like images, animations, etc., require captions, developers can use <figure> and <figcaption> The <figure> tag creates a container for the autonomous content. While <figcaption> give content a caption.
Example:
<figure>
<img src="lib/IMG/html5_logo.png"alt=”logo”>
<figcaption>HTML5</figcaption>
</figure>
Results:
HTML5
Older browsers
Not every web browsers supports HTML5, some will read HTML5 Semantic Tags as <span>. In order to prevent this problem, developers use the following CSS code to make the browser to display the content.
However, Internet Explorer 8 and earlier versions cannot support HTML5 at all; IE will need to have a specific JavaScript that can download HTML5 elements to the Internet Explorer. Go here to dowload html5shiv.js.
Example:
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
Summary
HTML5 Semantic Tags gives developers more defined and easier options, and helps web browsers to render the webpage properly. Although, remember to setup HTML5 and CSS documents to allow web browsers to display HTML5 Semantic Tags correctly.
If you want or need to see HTML5 Semantic Tags in action, check out these videos:
Now that you know about HTML5 Semsntic Tags, it's time to practice. it's time to practice. Below is a preloaded webpage structure inside a HTML code editor. Your objective is to practice with the basic function of each tag. If you don’t like the HTML code editor, then use a new HTML5 document.
