Scroll to top

This tutorial provides an introductory overview of HTML5. If you never really understand its relevance compared to previous versions, you’ve come to the right place.

HTML5 is the most recent standard for browsers to display and interact with web pages. Approved in 2014, it was the first update to HTML in 14 years. In this day and age, that’s a lifetime between updates!

The purpose of HTML5 is primarily to make it easier for web developers and browser creators to follow consensus-based standards that make compliance more efficient and empowering. It’s also designed to provide better, faster, more consistent user experiences for desktop and mobile visitors.

Here are a few key improvements HTML5 brought:

  • It gives us a simpler, more straightforward element structure to pages, which makes them easier to build, adjust, and debug—and to build automated services that help you find important resources on the web.
  • It provides standard elements for commonplace media objects which previously required annoying plugins for audio, video, etc. These plugins needed to be regularly updated, i.e. repeated downloads to manage security.
  • There’s native integration with interfaces to leverage modern web and mobile needs. One of my favorite examples of this is geolocation, which allows you to determine the GPS coordinates of a web visitor through their browser. This feature was previously restricted to GPS-equipped phone apps.

Who Does HTML5 Matter To?

Are You Just a Web User or a YouTube Fan?

HTML5 improves speed, ease of use, and consistency across the web. Yes, your YouTube experience has gradually become consistently more wonderful. There are fewer browser and plugin updates, fewer security threats, and more elegant, more readable, faster websites.

Are You a Web Developer?

HTML5 makes your life easier and greatly expands what’s possible as a developer. It also means you’re able to build stuff and rely more on the browser builders to assure consistency. This means a lot less conditional layout code.

Take for example the recently introduced popover API. This gives us the power to create semantically correct and standardised popups, modals and so on, all with native HTML5 elements.

Do You Want to Build a Web Browser?

On one hand, you have a great roadmap in the HTML5 specification detailing how and what you should build. On the other hand, there’s more to do and get right. It won’t be as easy to differentiate your browser vs. the big browser manufacturers.

The Background of HTML5

Where Does HTML5 Come From?

HTML5 is the latest in over 30 years of browser programming standards since the launch of the web in 1991.

History of HTML

HTML first emerged as a standard in 1993, and here’s the timeline of HTML versions accepted by standards committees:

  • HTML 2.0: 1995
  • HTML 4.0: 1997
  • HTML 4.01: 2000
  • HTML 5: 2014

The Goals of HTML5

According to Wikipedia, HTML5 is intended to consolidate earlier versions and differentiated document types such as XHTML 1 and DOM Level 2 HTML:

“[HTML5] extends, improves and rationalizes the markup available for documents, and introduces markup and ...(APIs) for complex web applications...HTML5 is also a potential candidate for cross-platform mobile applications. Many features have been designed with low-powered devices such as smartphones and tablets taken in to consideration.”

Here’s a summary of how MakeUseOf explained HTML5’s goals:

  • Eliminate plugins such as Flash for common features that everyone needs. Build native support for things like audio and video.
  • Reduce the need for JavaScript and extra code with new native elements.
  • Provide consistency across browsers and devices.
  • Do all of this as transparently as possible.
Image credit: Topic Simple

What New Features Did HTML5 Introduce?

A lot, it turns out! HTML5 brought an impressive list of new capabilities that are nowadays supported by the majority of browsers.

The New Elements of HTML5

The most basic new elements of HTML5 make it easier to lay out web pages and to debug your code or others’. It also makes it easier for automated services to scan the web and understand the importance of different page components.

For page layout and key features, there are now specific elements such as:

  • <header> and <footer>
  • <nav> for all kinds of menus
  • <aside> for sidebars or nearby related content
  • <article> where content goes such as a blog post
  • <section> similar to <div> but more content-oriented
  • <audio> and <video> tags to have native browsers manage playback of each. No more plugins and security updates for this
  • <canvas> specifically for letting you draw graphics using a separate scripting language
  • <embed> to place external content or applications in the page

Here’s a nice visual outline of these by Smashing Magazine:

html5 semantic elementshtml5 semantic elementshtml5 semantic elements

Here are some of the more advanced features of HTML5, including API integration, making coding in JavaScript for sophisticated actions easier and more consistent across browsers:

  • Audio and video playback: provides media playback across browsers without plugins.
  • Geolocation: identify the location of the visitor.
  • Drag and drop: for uploading files from the browser with simple gestures.
  • Web workers: runs JavaScript in the background (non-blocking).
  • Server-sent events: allows servers to update web pages in a browser after they’ve been loaded, simpler and more efficient than AJAX and JavaScript.
  • Offline data storage: provides a way to store data locally in the browser independent of cookies.

Need to see which features are supported in which browsers? HTML5Test has a useful interactive assessment for features and browser support:

HTML5 Feature Support TestHTML5 Feature Support TestHTML5 Feature Support Test

There are so many new features that it’s impossible to catalog all of them here. Do check the resource links at the bottom of this tutorial for deeper resources that I recommend.

A Few HTML5 Examples in Action

Let’s take a look at a few cool examples of HTML5 in action.

A Boilerplate HTML5 Page

The simplicity of HTML5 is clear in its new page layouts. The more content-oriented elements make page code easier to comprehend and debug. Here’s a simple boilerplate example:

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
    <title>HTML 5 Boilerplate</title>
8
    <link rel="stylesheet" href="style.css">
9
  </head>
10
  <body>
11
    <script src="index.js"></script>
12
  </body>
13
</html>

Notice there’s a simpler doctype tag, link tags, and script tags. If you want to see some other approaches, check out the HTML5 Boilerplate, a broader open-source default HTML5 page.

The Video Element and Players

Here’s a CodePen demo showing how easy it is to add a video player to your website with the <video> element:

There’s no plugin required and no updates. All that I needed to do to add the video player was insert the following lines of HTML:

1
<video controls width="600" src="/mixkit-going-down-a-curved-highway.mp4" type="video/mp4">
2
</video>

Forms

HTML5 has a wide variety of enhancements to forms and input elements to make web programming easier and the user experience much better. For example, input elements now support various types of built-in validation. Here’s a validation example for name, numbers, email address, and website URL:

The above demo is from one of the tutorials here on Envato Tuts+ that teaches you how to do form validation with HTML5.

Here are some other tutorials on Tuts+ related to HTML5 forms and their validation.

Scalable Vector Graphics (SVG)

In HTML5, you can more easily animate elements with JavaScript. Check out this CodePen demo which shows the growth of a plant from a flowerpot with the help of SVG animation.

What’s Next?

I hope you’ve enjoyed this overview of the benefits of HTML5. If you’d like to explore HTML5 further, there are two more resources I’d like to suggest:

  • HTML5 Introduction: MDN’s excellent introduction to HTML5 advancements for developers who want a quick walk-through of all the new elements.
  • HTML5 Demos and Examples: Perfect for showing you an organized menu of a variety of HTML5 demos, showing you what’s possible.

If you’re a WordPress site manager, like many Envato Tuts+ readers, you may want to assess future themes for their compliance with HTML5. Standards-driven development with consistent browser support makes web development much easier for so many of us and reduces the number of bugs our customers run into, while increasingly providing better user experiences.

Additionally, if you’re looking for other utilities to help you grow your HTML5 skills, don’t forget to see what we have available in Envato Market.

Because there are so many useful resources for HTML5, I’ve included an extra helping of some of those I find most useful:

This post has been updated with contributions from Nitish Kumar. Nitish is a web developer with experience in creating eCommerce websites on various platforms. He spends his free time working on personal projects that make his everyday life easier or taking long evening walks with friends.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.