HTML 5 Semantics

What are HTML 5 Semantics?

Semantic tags are tags with a special purpose.  Non-semantic tags like <div>  and <span> are generic in use since you could apply them pretty much anywhere in your code and style them  for use. There are tags that we are already familiar with that fall into the semantics category like <form>, <table>  and <img> but there are new tags with a very specific purpose that will make organizing a layout much easier to do.

Some of the new tags seem obvious  but others might need a little more explanation, so let’s talk about the most common semantic tags a little further.

<header> used to hold a banner, business logo or tagline sitting at the top of the page.  Don’t confuse this tag with head which is a structural tag and does a completely different job.

<nav> this tag should be easy, it holds navigation.

<footer> the bottom of most pages could have text links, copyright information, and maybe legal disclaimers.  This tag is meant to contain these elements.

<section> contains elements that are part of the site theme and in the main flow of content.

<article> used for blocks of copy that might pop out more taking on a contrasting color or element.

<aside> used for content that runs in a column next to the main content area.

Now that we have a taste of semantics for HTML 5 we need to dive into how we can use them, and that will take a little CSS 3 which we will tackle next week.