Upgrading from HTML4 to HTML5

Last Updated: January 12, 2020

HTML5 was first released in 2008, and became the standard in 2014. It didn't just replace HTML4, though. Rather it also replaced XHTML 1 in all of its forms, and DOM Level 2 HTML. To do that, it includes detailed processing models. It also extends, improves, and rationalizes the markup language used, and adds new markup and application programming interfaces (APIs) for more complex web applications. And, it is due to that, that HTML5 is one of the best solutions for creating cross-platform mobile applications on low-powered devices.

While much of the syntax and formatting of the previous versions of HTML are still used, a host of smaller changes have been made that web developers working on upgrading older code should be aware of. Some of the most important ones can be found, below.

Doctypes

One of the things I always used to hate dealing with in HTML was the doctype declarations. They were incredibly long, complex, and hard to memorize.

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

Now, it's far, far easier.

<!DOCTYPE html>

Interestingly enough, even that much isn't technically needed in HTML5 documents. We just keep using a doctype to make them compatible with older browsers that would otherwise default to displaying their markup in standards mode.


Figures

For a long time, now, one of the issues with HTML has been its inability to associate the caption for an image, when wrapped in a paragraph tag, with the image element, itself. Now, instead of this:

<img src="path/to/image" alt="About image" />
<p>This is an image.</p>

We can use this:

<figure>
<img src="path/to/image" alt="About Image" />
<figcaption>
<p>This is an image.</p>
</figcaption>
</figure>

Redefining <small>

In earlier versions of HTML, the <small> element was used for creating subheadings. While it's still a useful presentation element, it's no longer appropriate to use it that way. Now, it simply refers to small text, such as the type used in a website's footer.


Attribute Quotes

With how much simpler HTML5 is compared to earlier versions, it can be hard to decide how to handle some of the basic things older designers take for granted. One of the big ones, for me, at least, is that attributes no longer need to be closed, or even encased in quotes. So, instead of:

<p class="myClass" id="someId"> Enclosed text goes here.</p>

We can now accomplish the same thing this way:

<p class=myClass id=someId> Unclosed text goes here.

In the end, though, it doesn't matter which way you write it, as both work perfectly fine. So, until things change, I will likely continue to close my tags fully and use quotation marks for my attributes.


Editable Content

One of the more interesting things HTML5 brought to the table is the idea of allowing content attributes to become editable. By using contenteditable, you can allow text contained within an element, including its children, to be used for things such as to-do lists that take advantage of local storage.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory <li>
<li> Watch video of self </li>
</ul>
</body>
</html>

Email Form Inputs

Built-in form validation works with most modern browsers, but older ones would often ignore them, falling back to using regular textboxes. So, while type isn't generally needed these days, you can still use an "email" type to form input areas so that only valid inputs are recognized, like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>

Input Placeholders

In the old days, JavaScript was the best way to ensure placeholder text would stay in place for textboxes, since browsers didn't always support it the placeholder attribute. Now, you can safely use the attribute across all modern browsers and avoid ahving to learn another programming language.

<input name="email" type="email" placeholder="name@email.com" />

Using local storage, which technically isn't HTML5, is also a great way to get browsers to remember what's been typed into input fields, even after a user's browser has been refreshed. However, how to use it is beyond the scope of this article.


Header and Footer

In the early days of HTML, a div needed to be changed into a header or footer by using the id attribute.

<div id="header">
...
</div>
<div id="header">
...
</div>

However, a div doesn't have an inherent semantic structure, regardless of the id that's used for it. In fact, you can even have multiple versions of each within the same document, as each only refers to the container it's being used in. And, you don't even have to call it a div anymore, since they can now simply be what they are.

<header>
...
</header>
<footer>
...
</footer>

Required Attribute

Form sections can now have required areas easily labeled and checked prior to sending using the required attribute. If the input box is left blank when you submit the form, the texbox will be highlighted to let the user know it's needed.

<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>

Playing Audio Files

While playing audio files through a website used to require the use of third party plugins, HTML5 allows you to do it quickly and easily via the audio attribute. Currently, MP3s can be played on all browsers, WAV files work on everything but Internet Explorer, and OGG files work on everything but Internet Explorer and Safari.

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a>Play this file.</a>
</audio>

Regular Expressions

To verify a textbox, you can now use the pattern attribute to insert regular expressions straight into your markup. The following example only accepts four to ten characters made up of upper and/or lower case letters.

<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">Go </button>
</form>