Learn HTML5 The Basics

HTML5 is the relatively new (as of 20 Oct 2014) standard for HTML.  Let’s go over the basics of what it is, the differences between HTML4 and HTML5 and the reasons behind the new standard.

The Reasoning Behind HTML5

First off, a quick refresher of Hypertext Markup Language (HTML) will get us started.  HTML is not a programming language.  Rather, it’s a language used to create documents for a browser.  Hypertext is the set of active links within those documents that point towards other documents or even to text within the same document.  Markup Language is the set of defined tags to organize and provide semantic meaning to a document.  As an example, when you look at this webpage, it’s simple for you to find the title of the article because it’s larger in font size and it’s in bold text.  That was the purpose of markup language in 1989 when HTML was invented, to make the document more human readable.  When HTML4 came along in 1999 it was created to address the web as it was vastly expanding at the time.  A big improvement in HTML4 was the ability to include Cascading Stylesheets (CSS).  HTML4 saw many revisions over its 19 year lifespan.  Nowadays, however, there are many more things accessing web pages than just humans.  For example, web crawlers, screen readers and bots to name a few.  While it’s easy for a human to pick out the title of the page, it’s not so easy for those other technologies to do so.  Designing for both human and computer readability is one of the main catalysts leading to the 5th major revision of HTML.

Another reason to improve upon the HTML standard and go to HTML5 is due to the innovation of web applications.  No longer do we as web developers just create web pages.  We developers now create web applications that are capable of so much more than simply displaying information.  Web applications are interactive, they’re responsive and they maintain state to name a few capabilities we must support.  We are getting to the point where our applications may soon be seamlessly transferable between screens.  Some streaming providers allow you to continue watching seamlessly from television to tablet to phone. This isn’t ubiquitous yet, but it probably won’t be long until we see this innovation being implemented in web applications too.  Wouldn’t it be nice to be able to put down your phone and open your laptop to be able to view the same tabs you have opened? I’m thinking from computer screen to tablet to phone that maintains session, state and active content.  The vast amount of devices and their different sizes are another challenge that we as designers face today.  Responsive design is paramount to a successful web application. Some developers have even adopted a mobile first approach where they initially develop the basic constructs of the application and the styling for a small screen.  Then they grow their code from there to larger screen sizes and more functionality as is typically included in a laptop or desktop view.  Supporting rich media experiences is another big reason to move to the HTML5 standard.

HTML5 Logical Components

As a matter of fact, moving to HTML5 means we must also think about other front-end technologies like Cascading Style Sheets and Javascript.  The concept of integrating HTML5, CSS and Javascript is similar to the Model-View-Controller (MVC) Framework in backend design.  The idea is the same.  It’s simply to separate an application into different logical components.  In terms of a web application those front-end components would be:

 

HTML5: The Content. The semantic meaning of the document where the content can adapt to the context.

CSS: The Design. The styling of the document and how it should be displayed on different screens and medium.

Javascript: The Interactivity; the logic determining what happens when a user does something on the web application

Yes, many browsers still support older HTML markup, but backwards compatibility is not a good reason to continue developing in outdated standards.  It’s well past the time to transition from older HTML4 to HTML5 markup and to start designing web applications that will be future compatible.

So how do you use HTML5?

Really, the main thing to remember is the intent of the new standard.  HTML5 is meant to describe the content within the tags, not the styling (CSS) nor a response to the user activity (JS).  So as you’re drafting your next webpage and you’re about to enter a bold tag in the HTML markup, remember that tag enhances the look of the page and should go in the stylesheet not the markup.

 

Here’s a quick overview of some recommendations, changes and new HTML5 tags:

HTML5 Recommendations

Always enter doctype as the very first thing at the top of the document.

<!DOCTYPE html>
<html>
...

Use a service to validate your HTML5 markup.

HTML5 Changes

Tags with no content no longer need a closing slash.  For example, <br /> should be <br> in HTML5.  This includes image tags too.  Think about it. Image tags never had a </img> closing tag.  They just have attributes in the image tag to describe the source, alt text, etc.  Image tags no longer need the /> to close them.

<br>
<hr>
<img src="">

 

New Tags In HTML5

View the complete list of standard HTML5 tags.  They’re broken down into the following categories: Structural, Metadata, Form, Formatting, List, Table, Scripting and Embedded Content.  Twenty-seven new tags were added in HTML5.  Here they are:

Structural Tags:

<article>
<aside>
<details>
<header>
<hgroup>
<footer>
<nav>
<section>
<summary>

Metadata Tags:

<datalist>
<keygen>
<meter>

 

Form Tags:
Formatting Tags:

<mark>
<output>
<progress>
<rp>
<rt>
<ruby>
<wbr>

 

List Tags:
Table Tags:
Scripting Tags:
Embedded Content Tags:

<audio>
<canvas>
<embed>
<figcaption>
<figure>
<source>
<time>
<video>

 

Leave a Reply