Lesson 107: HTML5 Semantic Basics

Estimated Length: 15min | Difficulty: Beginner

In this lesson we will be going over HTML5 Semantic Elements. Semantic elements clearly define the contents inside them.

The tags we will go over today are <header>, <footer>, <nav>, <article>, <section>, <time>, <aside>, <figure>, and <figcaption>.

HTML5 Semantic Tags

<Header>

The <header> tag is used to contain the header of the website, which can contain elements like the logo, the navigation, social icons, search bar, and contact info. It is usually located at the very top of the page, it is the introductory content of the page.

<Footer>

The <footer> element defines a footer for the page. It typically contains elements such as copyright information, navigation links, social icons, contact information etc.

<Nav>

The <nav> element is short for Navigation, it contains the navigation or menu links. It is meant for the main navigation links needed to get from one section of the site to another.

Example:

<nav>

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

<a href="#">Link 4</a>

</nav>

<Article>

The <article> element defines independent, self-contained content. Content inside of an article should make sense on its own and not be reliant on other content on the page.

An <article> could be used in a forum post, blog post, or a newspaper article.

<Section>

The <section> element defines a section in a document. For example, a websites home page can be split into sections for the introduction, main content, and contact information.

<Time>

The <time> tag defines a date and/or time

<Aside>

The <aside> element defines content that is aside from the content it is placed in, like a sidebar. The aside content should be related to the surrounding content.

<figure> and <figcaption>

The <figure> and <figcaption> elements are used to add captions to images. The purpose of a caption is to add an explanation to an image. Images and captions can be grouped together on your site using <figure> elements. The <img> element is used for the image, while the <figcaption> defines the caption to the image.

Example:

<figure>

<img src="img.png" alt=" "/>

<figcaption>Caption about Image</figcaption>

</figure>