HTML 5 Semantic Element Basics

Grouping Content With HTML 5 and Semantic Elements

As I prepare to learn more about HTML 5, CSS 3, and JavaScript I figured this may be a good time to share what I am learning with some of you in case you had an interest in learning it yourself.  This is very basic information and there may not be anything new to experienced HTML 5 web developers.

 

Many HTML pages used to have their layout defined with tables.  Tables were followed by more elegant CSS solutions.  Semantic Elements can be used to give your content some grouping making the HTML itself easier to interpret.  CSS still allows you to position items in ways HTML 5 cannot but HTML 5 gives you some basic structures to hold your content in without using <div> just to hold grouped content.

Semantic Elements are not new to HTML 5, they are simply elements in HTML that define what is in their content.  Some examples of Semantic Elements that existed in HTML 4 would be <em> used to show emphasis on any content between the opening and closing element, headings such as <h1> used to display varying title sections, and <table> used to display your content in a tabular format many users are familiar with.

 

The Semantic Elements that are new to HTML 5 are:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

In this example we'll be creating a basic HTML 5 page using some of the new Semantic Elements.  Some items in our example would normally appear in a master page file so that we could use the same code from page to page but for simplicity we will be stuffing them all into one Default.html page.

 

The first thing we'll want for our page is a header that lets us brand our site and let people know who we are.  As a side note, <header> can be used in a document or a section of a document.  For now we are going to add a <header> element with an <h1> element to hold a title for our website. 

  

    My Sample Website's Header
  

Now that we are telling everyone who we are, we are ready to give them a space to navigate our site.  Since we don't have a master page we aren't going to put any actual links in this section.  We'll just put some text in it marking it as the navigation section.  We'll use the <nav> element.

  Navigation Area Link 1
      
  Navigation Area Link 2

Now we'll want to add a section.  We will create a basic <section> with an <aside> element contained within.  When we get more advanced we'll use CSS to push the aside to actually be to the side of our section content.  For now we're keeping it simple.  A section is used to hold related content that will typically have a title to it.  (otherwise why not just use a div)

  

    My Section
  
<p>
    This is my section.  There are many like it but this one is mine.
  </p>
  

    <p>
      This is a-side (forgive the pun) note about my section.
    </p>
  
  <p>
    This is the remainder of my section now that the side note is gone.
  </p>

After playing briefly with section and aside, we want to briefly visit <article>.  The <article> element looks an awful lot like a <section> element.  Articles are used to display content that can be distributed independent of the website.  Stories that can be displayed via website, RSS feed, forums, blogs, etc.  Other than that, they are pretty much the same as sections.

  

    This Just In: Programmers are Awesome!!! 
  
<p>
    This is an example of an article element.  Looks a lot like a section doesn't it?
  </p>

Now we want to add a footer to show a copyright to viewers to protect all our hard work.  This is done with a <footer> element.

  This is my footer: ©ITC Prog Blog 2014

To help us take a look at the placement of all the sections we are adding to this page I am adding an inline style tag (we aren't on CSS yet) to give us a border.  We'll make our body tag on our page have a gray background and all sections within will have a solid border and white background.  I am not including the style tags in the code here to keep the sections cleaner for you to look at.  Here's what our page looks like:  



It is obvious by looking at the page above that semantic elements in HTML 5 don't give you the best layout for your page, but they do help you group your page items logically.  You'll still want CSS to position items on your page properly.  We'll pick up with what we learned next time.