Lesson 1

HTML5 Semantic Tags

Prerequisites

Before we begin you should have already aquired a basic understanding of HTML as well as the knowledge of what different web browsers allow you to do and what a text editor is.

Footer

Footers will contain the footer and all of it's contents such as copywrite info, social media icons and a secondary nav.

Example

<footer> </footer>

Nav

A nav is where the nav bar or navigation of the website will be located it normally will be made up of a list either unorder or ordered and the list items will contain links to other parts of the website.

Example

<nav> <ul> <li> </li> </ul> </nav>

Article

An article is a seperate piece of content normally an RSS item which is a Rich Site Summary that has ever changing content such as a twitter or news feed.

Example

<article> </article>

Section

A Section is used to group articles together into different groups, or to combine single sections into one article.

Example

<section> </section>

Time

Time is used to mark up times and dates. It can also be used to encode time in a computer redable way such as events.

Example

<time> </time>

Aside

An Aside tag defines a block of content that is beside the main content. The content in the aside tag should be related to the main content in some way.

Example

<aside> </aside>

Figure & Figcaption

A Figure tag specified a self contained content such as an image. While a figcaption adds a caption to the figure.

Example

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

Hgroup

A Hgroup is used to wrap multiple group multiple headings into one heading. Which would show up as a single header in the structure of the site.

Example

<hgroup> </hgroup>