Learn The Basics of HTML5

HTML5 - Official LogoAs you may know from my previous post, I really enjoy where the web is going with HTML5 and CSS3.

It really allows us, as developers, to give site users a better faster experience, and after all isn’t that what everyone wants? So, enough talking about this mythical creature, that is HTML5, what the heck is it?!

HTML5 is the latest revision of HTML.  As far as a computer language goes, HTML is very easy and extremely forgiving on mistakes; however, HTML5 has made the syntax much simpler while adding more features. I would like to touch base on some of my favorite basic features of HTML5 that should assist in getting your toesies a little wet.

HTML5 Syntax

As is said above, HTML5 has a simplified syntax. So lets start at the top of the document and work our way down shall we?

Doctype
The doctype is the first thing on every HTML document whether it is HTML4 or HTML5. The doctype of an HTML4 document may look something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

However, in HTML5 it’s much simpler to remember and looks like this:

<!DOCTYPE html>

As you can see we no longer need to add a bunch of stuff that no one really understands and only need to declare that we’re starting an HTML document, this is fantastic!

<meta> element
Even the meta tags got much simpler to remember. Previously, they looked something like this:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

In HTML5 it was changed to look like this:

<meta charset=”utf-8″>

There are a few more things that make setting up a basic HTML5 document simpler but these are a few of my favorites. Now lets move on to the body of the document and towards some of the more beneficial features of HTML5.

HTML5 Elements

Some of the best and most important updates come from the added elements (tags), which were added to the body of the document.

In HTML4, while styling via CSS, developers would use class or id names that described what that element was used for such as: header, navigation, sidebar, footer etc. This was great for understanding the document as a developer; however, the browser/spiders never knew that div was the header. It wouldn’t read the ids that way.

In HTML5, we have a few new elements that allow us to structure the document into easy to understand bits while allowing browsers/spiders to understand the document comprehensively. Some of the most impactful and important ones are:

<header>
The <header> element is used at the top of the document, which, in most cases, holds the logo, navigation, service navigation, etc. In the past, developers would use <div id=’header’> to section this off in the document. As I said before, this allows us to understand what this section is but not anything else. With the use of HTML5 everyone knows that the <header> is the top of the document.

 <nav>
The <nav> element represents the navigation on the site. One of the struggles with development, prior to HTML5, was making sure that screen readers were able to get to the navigation, easily and efficiently. With the addition to the <nav> tag this is done for us, everyone wins.

 <section>
The <section> element represents a generic grouping of content within the document. Generally, each section will have a header, copy and possibly a footer. This element will assist is trimming down the usage of the popular <div> element.

<article>
Unlike the <section> element, the <article> element represents a section of the page that is independent content of the document. This is generally used for news articles, comments, or any independent copy on the page.

 <aside>
The <aside> element represents a section of the page that consists of content that is related to the content around it, but considered separate from that content. This is generally where the sidebar comes into play. It’s important but is secondary to the main copy of the page.

<footer>
Finally, we have the <footer> element. The <footer> element represents the footer of the page and typically is located in the footer of the document. Usually, the footer contains: copyright information, footer navigation, terms of use, etc.

Using HTML5

Using the above examples, here is a basic HTML5 document compared to that same document done in HTML4. You decide which is simpler to understand and write.

HTML4 vs HTML5

On the left is HTML4 and on the right is HTML5

As you can see, the HTML gods have made a much cleaner more semantic code base. For developers, like myself, this is one of the many FANTASTIC features of HTML5.

So, I ask you, what is your favorite feature to HTML5 and are you using it currently?

Leave a Reply

Your email address will not be published. Required fields are marked *

three × 1 =