A Beginner's Guide to HTML5

 

What is HTML5?

HTML5 is the newest version of HTML. The term refers to two things. One is the updated HTML language itself, which has new elements and attributes. The second is the larger set of technologies that work with this new version of HTML — like a new video format — and enable you to build more complex and powerful websites and apps.

To understand how HTML has evolved over the years, let’s look at the differences between HTML and HTML5.

HTML vs HTML5

HTML is the World Wide Web's core markup language. Originally designed to semantically describe scientific documents, it has since evolved to describe much more.

Most pages on the web today were built using HTML4. Although much improved since the first version of HTML written in 1993, HTML4 still had its limitations. It’s biggest was if web developers or designers wanted to add content or features to their site that weren’t supported in HTML. In that case, they would have to use non-standard proprietary technologies, like Adobe Flash, which required users to install browser plugins. Even then, some users wouldn’t be able to access that content or feature. Users on iPhones and iPads, for example, wouldn’t be able to since those devices don't support Flash.

Cue, HTML5. HTML5 was designed to cut out the need for those non-standard proprietary technologies. With this new version of HTML, you can create web applications that work offline, support high-definition video and animations, and know where you are geographically located.

To understand how HTML5 can do all that, let’s look at what’s new in this latest version of HTML.

What is new in HTML5?

HTML5 was designed with major objectives, including:

• Making code easier to read for users and screen readers
• Reducing the overlap between HTML, CSS, and JavaScript
• Promoting design responsiveness and consistency across browsers
• Supporting multimedia without the need for Flash or other plugins

Each of these objectives informed the changes in this new version of HTML. Let’s focus on seven of those changes below.

New Semantic Elements

HTML5 introduced several new semantically meaningful tags. These include <section>, <header>, <footer> <nav>, <mark>, <figure>, <aside> <figcaption>, <data>, <time>, <output>, <progress>, <meter> and <main>. These make it easier to write cleaner code that clearly delineates style from content, which is particularly important to users with assistive technologies like screen readers.

Inline SVG

Using HTML4, you’d need Flash, Silverlight, or another technology to add scalable vector graphics (SVGs) to your web pages. With HTML5, you can add vector graphics directly in HTML documents using the <svg> tag. You can also draw rectangles, circles, text, and other vector-based paths and shapes using this new element. Below is an example of a circular shape created using the SVG <circle> element.

 

Form Features

You can create smarter forms thanks to HTML5’s expanded form options. In addition to all the standard form input types, HTML5 offers more, including: datetime, datetime-local, date, month, week, time, number, range, email, and url. You can also add date pickers, sliders, validation, and placeholder text thanks to the new placeholder attribute, which we’ll discuss later.

WebM Video Format

Before HTML5, you needed browser plugins to embed audio and video content into web pages. Not only did HTML5 introduce <audio> and <video> tags which eliminated the need for browser plugins, it also introduced the WebM video format. This is a royalty-free video format developed by Google that provides a great compression to quality ratio. This can be used with the video element and is supported by most browsers.

Placeholder Attribute

HTML5 introduced the placeholder attribute. You can use this with the <input> element to provide a short hint to help users fill in passwords or other data entry fields. This can help you create better forms. However, it’s important to note that this attribute is not accessible to assistive technologies. Feel free to read more about the problems with the placeholder attribute.

Server-sent Events

A server-sent event is when a web page automatically gets updated data from a server. This was possible with HTML4, but the web page would have to ask

HTML5 supports one-way server-sent events. That means, data is continuously sent from a server to the browser. Think of how useful this would be if your website included stock prices, news feeds, Twitter feeds, and so on. Server-sent events were supported in the previous version of HTML, but the web page would have to repeatedly request it.

Local Web Storage

With the previous version of HTML, data is stored locally via cookies. With HTML5, web storage is used in place of cookies thanks to a scripting API. This allows you to store data locally, like cookies, but in much larger quantities.

Now that we understand what’s new in HTML5, let’s take a look at why you should be using it on your website.

Why HTML5?

HTML5 offers a wide range of benefits over previous versions of HTML — some of which we’ve mentioned briefly above. Let’s take a closer look at just a few reasons why HTML5 is so special.

It’s compatible across browsers.

HTML5 is supported by all the major browsers, including Chrome, Firefox, Safari, Opera, as well as iOS for Chrome and Safari and Android browsers. It can even work with the older and less popular browsers like Internet Explorer. That means when building with HTML5, you know that users will have a consistent experience on your site, no matter what browser they use or whether they’re on mobile or desktop.

It enables offline browsing.

HTML5 allows you to build offline applications. Browsers that support HTML5 offline applications (which is most) will download the HTML, CSS, JavaScript, images, and other resources that make up the application and cache them locally. Then, when the user tries to access the web application without a network connection, the browser will render the local copies. That means you won’t have to worry about your site not loading if the user loses or doesn’t have an active internet connection.

It allows you to write cleaner code.

With HTML5’s new semantic elements, you can create cleaner and more descriptive code bases. Before HTML5, developers had to use a lot of general elements like divs and style them with CSS to display like headers or navigation menus. The result? A lot of divs and class names that made the code more difficult to read.

HTML5 allows you to write more semantically meaningful code, which enables you and other readers to separate style and content.

It’s more accessible.

Also thanks to HTML5’s new semantic elements, you can create websites and apps that are more accessible. Before these elements, screen readers could not determine that a div with a class or ID name “header” was actually a header. Now with the <header> and other HTML5 semantic tags, screen readers can more clearly examine an HTML file and provide a better experience to users who need them.

How to Use HTML5

To start using HTML5 on your website, it’s recommended that you create an HTML template first. You can then use this as a boilerplate for all your future projects moving forward. Here’s what a basic template looks like:

 
<!DOCTYPE html>
<html lang=”en” manifest="/cache.appcache">
<head>
<title>This is the Title of the Page</title>
<meta charset="utf-8">
<link rel="stylesheet" rel="noopener" target="_blank" href="bootstrap/css/bootstrap.min.css"> <!-- This link is only necessary if you’re using an external stylesheet -->
<style>
/* These style tags are only necessary if you’re adding internal CSS */
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Let’s walk through the process of building this file line-by-line so you can create an HTML template for your web projects. You can follow along using a basic text editor like Notepad++.

• First, declare the type of document as HTML5. To do so, you’d add the special code <!DOCTYPE html> on the very first line. There’s no need to add “5” in this declaration since HTML5 is just an evolution of previous HTML standards.
• Next, define the root element. Since this element signals what language you’re going to write in, it’s always going to be <html> in an HTML5 doc.
• Include a language attribute and define it in the opening tag of the HTML element. Without a language attribute, screen readers will default to the operating system’s language, which could result in mispronunciations of the title and other content on the page. Specifying the attribute will ensure screen readers can determine what language the document is in and make your website more accessible. Since we’re writing this post in English, we’ll set the file’s lang attribute to “en.”
• Also include the manifest attribute in your opening HTML tag. This points to your application’s manifest file, which is a list of resources that your web application might need to access while it’s disconnected from the network. This makes it possible for a browser to load your site even when a user loses or doesn’t have an internet connection.
• Create the head section of the doc by writing an opening <head> and closing </head> tag. In the head, you’ll put meta information about the page that will not be visible on the front end.
• In the head section, name your HTML5 document. Wrap the name in <title></title> tags.
• Below the title, add meta information that specifies the character set the browser should use when displaying the page. Generally, pages written in English use UTF-8 so add the line: <meta charset = “UTF-8“ />.
• Below, add links to any external stylesheets you’re using. If you’re loading Bootstrap CSS onto your project, for example, it will look something like this: <link rel="stylesheet" rel="noopener" target="_blank" href="bootstrap/css/bootstrap.min.css">. For the sake of this demo, I’ll include a dummy link and a comment in HTML noting that it’s optional.
• Now create the body section of the doc by writing an opening <body> and closing </body> tag. The body section contains all the information that will be visible on the front end, like your paragraphs, images, and links.
• In the body section, add a header and paragraph. You’ll write out the heading name and wrap it in <h1></h1> tags, and write out the paragraph and wrap it in <p></p> tags.
• Lastly, don’t forget the closing tag of the html element.

When you’re done, you can save your file with the .html extension and load it into a browser to see how it looks.

Image Source

When did HTML5 come out?

The first public draft of HTML5 was released by the Web Hypertext Application Technology Working Group (WHATWG) in 2008. However, it was not released as a World Wide Web Consortium (W3C) recommendation until October 28, 2014. This recommendation was then merged with the HTML Living Standard by WHATWG in 2019.

To understand why the specification process spanned over a decade, let’s look at the complicated history of HTML5.

In 1999, the year after HTML4 was released, the W3C decided to stop working on HTML and instead focus on developing an XML-based equivalent called XHTML. Four years later, there was a renewed interest in evolving HTML as people began to realize the deployment of XML relied entirely on new technologies like RSS.

In 2004, Mozilla and Opera proposed that HTML should continue to be evolved at a W3C workshop. When the W3C members rejected the proposal in favor of continuing to develop XML-based replacements, Mozilla and Opera — joined by Apple — launched the Web Hypertext Application Technology Working Group (WHATWG) to continue evolving HTML.

In 2006, the W3C reversed course and indicated they were interested in participating in the development of the HTML5 specification. A year later, a group was formed to work with the WHATWG. These two groups worked together for a number of years until 2011, when they decided they had two separate goals. While the W3C wanted to publish a finished version of HTML5, the WHATWG wanted to publish and continuously maintain a living standard for HTML.

In 2014, the W3C published their “final” version of HTML5 and the WHATWG continued to maintain a “living” version on their site. These two documents merged in 2019, when the W3C and WHATWG signed an agreement to collaborate on the development of a single version of HTML moving forward.

Which browsers support HTML5?

All the latest versions of major browsers — including Google Chrome, Opera, Mozilla Firefox, Apple Safari, and Internet Explorer — support many HTML5 features but not all. Currently, Chrome and Opera are the most compatible with HTML5, with Firefox and Safari following closely behind. Internet Explorer is the least compatible, although it partially or fully supports most HTML5 features.

Below is a table to show the varying compatibility of the major browsers. Here's a key:

• ✓ Fully supported
• ≈ Partially supported
• ✗ Not supported

	Chrome	opera	Firefox	safari	Internet explorer
New semantic elements	✓	✓	✓	✓	≈
Inline SVG	✓	✓	✓	✓	✓
Expanded form features	✓	✓	≈	≈	≈
WebM video format	✓	✓	✓	≈	✗
Placeholder attribute	✓	✓	✓	✓	≈
Server-sent events	✓	✓	✓	✓	✗
Local web storage	✓	✓	✓	✓	✓

 

If you want a more detailed breakdown of the different versions of browsers that support HTML5, check out Caniuse.com.

HTML5 is the Future of the World Wide Web

With its new semantic elements, expanded form options, format-independent video tag, and more, HTML5 is revolutionizing how developers build web pages. This, in turn, is changing consumers’ experiences online. We can now watch videos without being asked to update Flash or download another software. We can use applications when we don’t have an internet connection. We can have the same great experience on a site whether using a cellphone, tablet, or Smart TV — and more.