The Difference Between HTML and HTML5: Main Changes

HTML5 is currently the building block of the Internet. That sounds simple but it’s not. At least not really. You see, the Internet is a much cooler thing now than it used to be. To allow for these cooler features, HTML had to be improved. In this tutorial, we will go over the difference between HTML and HTML5. But first, let’s start by describing what HTML is.

What Is HTML?

The first part of answering the question “What is HTML?” and telling you about the difference between HTML and HTML5 is deciphering the acronym. HTML stands for HyperText Markup Language. But unless you’ve been making cool stuff on the Internet for a while, that probably doesn’t help, does it?

First of all, the biggest mistake people make is considering HTML to be a programming language. It’s not. Instead, it’s a way to write directions for the web browser. These directions tell it what the frame of the website should be.

The difference between HTML and HTML5 vs. a proper programming language is that HTML can’t handle logic. And that’s what programming languages are all about. You can’t make HTML do one thing under some conditions and something else in a different situation like you can with full programming languages.

And that’s the short version of the answer to the “What is HTML?” question and the first step to properly explaining the difference between HTML and HTML5.

So, how does HTML work?

Figuring out how HTML works also informs the answer about the difference between HTML and HTML5. You see, the fifth iteration of the language is built on a long history of web development and deals with an enormously different tech landscape.

With that said, what is HTML and how does it work?

Everything you write using HTML tells the browser what you want on the page and in what order. If you make a website using simple HTML, it will look extremely simplified because this markup language isn’t meant to style the look of your website (use CSS for that). It only puts in the elements you want and creates the proper website structure (that’s why it’s so crucial to know it for web development). Nonetheless, some might even argue that HTML is the web.

To put it simply, HTML works by defining different elements in < > (opening) and  </ > (closing) tags. They tell the web browser what the element is supposed to be and where it should be placed.

Some examples:

• <p>The p in the tags tells the browser that this is a paragraph text element.
• <h2> would tell it that it’s Heading 2.
• You close the paragraph with </p> or </h2> if you want it to be Heading 2.

If you want to know more tags, we have a full HTML tag reference list right here.

Of course, this is the base and it can get more complicated than this, but in the end, HTML is just putting one element after another. Now, HOW and WHERE you put that element and which tag would best represent it is another question that evolved over the years. That is why one of the many differences between HTML and HTML5 is the syntax. As HTML evolved and the concept and capabilities of web development evolved, HTML changed for the better, becoming less complicated and more… intuitive for human eyes.

What is HTML5?

OK, we have a good idea of HTML. Now, what is HTML5?

The people who created HTML back in 1995 had no clue that the Internet would change so much.

Naturally, the web markup language also had to evolve together with the web. HTML5 is the most recent evolution of the HyperText Markup Language. Its purpose is to allow websites to be as compatible with any browser as it’s humanly possible (let’s face it, sometimes we still ensure that).

While you technically could write the frame of a website using HTML’s previous versions, it would not be as good or technically accurate. Probably the clearest difference between HTML and HTML5 is how they handle some modern website properties, one of them is being adapted to mobile users whose base is growing every day. And the hard truth is that if you’re making a website from scratch in 2019, you must use HTML5.

The Difference Between HTML and HTML5

Now that we know what is HTML and what is HTML5, we can look at how the most recent version evolved from its predecessor.

Do you remember the web looking like this?

The first rudimentary version of HTML was “created” in 1993, with HTML 2.0 coming in 1995. Try to remember the first website you’ve ever seen (if you can’t remember, the example above will help you). Now open a new tab and go to any modern responsive website.

Do you see how advanced the new websites are compared to the ancient ones?

It’s staggering. Creating something modern using the rudimentary versions of HTML would be extremely hard, if not impossible. The technology to do it simply wasn’t there in the old days, so support for it was similarly lagging.

As the capabilities of computers and the Internet grew, developers all over the world continuously reworked HTML with a single goal. To make sure that they can improve website capabilities.

After HTML 2.0 came HTML 3.0 in January 1997, but it stayed only a short while (around 11 months), HTML4 came to life.

HTML4 was created in 1997 by W3C (World Wide Web Consortium) recommendation and stayed as the foundation of the Internet for more than 17 years (much longer than its predecessors). In 2014, HTML5 was created and developers started to develop websites using it soon after. Another difference between HTML and HTML5 is that it has been decided not to have any more versions. That is HTML5 is here to stay and will have only some features updated along the way, but there will not be HTML6 (at least there are no plans for it now).

But let’s get into details: how was HTML5 adapted to deal with web usage changes?

Better Error Handling

One of the key differences between HTML and HTML5 (we’re using HTML for all older HTML versions and HTML4 in particular) is better error handling. Why was it needed?

Well, unfortunately, nobody can write a code that would never break. Not yet at least.

One of the biggest goals in HTML5 development was to make it easier for browser developers to make browser parsers, which handle broken HTML code better.

HTML5 was made to provide consistent error handling, which would make the process more uniform and dramatically reduce the effort and cost of making a working web browser.

HTML5 is better at helping the browser to show you a proper web page, even when the developer made some small mistake or missed a styling rule somewhere.

Modern Web Application Support

Dramatically improved web application support is another difference between HTML and HTML5. Why was it needed?

Think of a ‘90s website. Now think of YouTube or Netflix (image below). Modern websites are more like standalone programs that work in your web browser. HTML5 is one of the reasons why developers can bring us products like this.

Moder website example: Netflix sign up screen

When HTML4 was the golden standard, developers had to find ways to work around its limitations using Flash and JavaScript, browser extensions and many other tools.

With the introduction of HTML5, many of these workarounds became part of HTML itself and allowed developers to save time by working as intended from the get-go.

Improved Semantics

Another difference between HTML and HTML5 is improved semantics or, in other words, simplified syntax.

A complicated website can get intimidating. Different elements all over the place, hundreds, thousands, hell, maybe even hundreds of thousands of them.

HTML5 was made to bring HTML up to the standard of the 21st century. The HyperText Markup Language syntax was made more intuitive. For example, now there are tags like <nav> to show that this part marks up the navigation of the website. Or <footer> tag which helps you see how the website footer should be structured. To get acquainted with them better, check all of the new HTML5 tags.

The intention behind the change is to make both writing and proof-reading HTML easier.

Mobile Support Improvements

In 1997, when HTML4 was released, the cell phone was a reasonably new thing. Phones were for, gasp, calling. And texting. If you were feeling rebellious and modern, that is.

In 2014, when HTML5 was introduced, we lived in an entirely new world. The smartphone coupled with the 4G Internet became a powerful force in everyone’s pocket.

This shift caused the most welcome difference between HTML and HTML5 — improved mobile support.

Phone screens are generally longer than they are wide, while computer monitors are the opposite. What looks great on a computer will naturally look worse on a smartphone (trouble 1: content wider than screen), unless the website is made to adapt to the device it’s being loaded on.

That’s where HTML5 made life easier for developers all over the world to create mobile-friendly websites.

And it’s about time. More than half of the Internet users browse on their smartphones. Chances are you do too. How likely are you to stay on a website that looks like crap on your smartphone?

Moreover, according to ThinkWithGoogle, 80% of users are more likely to buy something if the brand has a mobile website. So mobile support becomes important not only for the users themselves – but it’s also beneficial for companies.

Video and Audio Support

The way it treats audio and video is yet another difference between HTML and HTML5.

In 1997, with dial-up connection speeds and computers less powerful than a modern toaster, it was fine that HTML4 didn’t seamlessly support audio and video on websites.

In 2014 and even 2019? It’s entirely different. The Internet is much faster, audio and video content is incredibly important. It’s well-known that podcasts and various forms of video content perform better than the written word in most cases.

In an environment like this, the increased video and audio support in HTML 4 was an essential improvement to the HyperText Markup Language.

Vector Graphics Support

One more difference between HTML and HTML5 is the latter’s vastly improved vector graphics support, which is one of the tools used to make websites more beautiful on a variety of devices.

A normal .jpg file is scaled by either smashing the pixels of the original closer together or bringing them further apart, in extremely basic terms.

What happens when you want to use a small image in a design that requires a much bigger one? You lose quality when you try to make it bigger: pixelation appears. Vector graphics solves that, kinda.

Let’s say you use Adobe Photoshop to make a 700×700 composition with assets from all over the place and save it as .png or .jpg. If you want to make it bigger, you can but you will likely lose quality.

You could try and remake it as a bigger version in Photoshop, but if your source images are smaller than needed, you won’t have much luck, the quality will suck.

Enter the .svg format and Adobe Illustrator. If you make a vector object with Illustrator it will not matter how big or small you try to make it, it will scale perfectly.

In the age of 4k resolution monitors and TVs and practically unlimited connection speeds, vector graphics are a great way to ensure that the essential elements of your website like the logo, charts, etc. look perfect no matter the device they’re viewed on.

And HTML5 supports vector graphics and the .svg format, while HTML4 did not.

Some More HTML5 Improvements

Out of all the improvements mentioned above, we couldn’t pick the most important difference between HTML and HTML5 even if we tried. But that doesn’t mean that the list of advantages is over.

For one, HTML4 websites could only store temporary data in the browser cache, while web pages based on HTML5 can also utilize web SQL databases and application cache, which makes websites easier on your RAM.

Due to the JS Worker API, which was integrated into HTML5, it can now run JavaScript within the web browser, instead of the browser interface thread, which was the way it was done in HTML4.

Numerous form controls and elements have also been introduced in HTML5 to bring it to the modern age. And provide developers with the tools they need to make modern websites.

HTML5 Compatibility

A huge positive difference between HTML and HTML5 is its increased compatibility.

With numerous web browsers and even more different platforms and devices to worry about, making web pages using HTML4 was a bother, especially if you wanted something fancy. The new version was made to work seamlessly across all devices, simplifying web development.

All web browsers not only support but encourage its adoption too. Despite that, older websites still use HTML4 as its base. The reason is simple, the website hasn’t been updated since 2014.

All modern web browsers still support HTML4, it’s just that the newer version is easier to deal with.

HTML5 Examples

You may get curious about the HTML version used for your favourite websites. The easiest way to check is to inspect the code in your browser and go to the top. Then, you need to look at how the HTML text begins.

While it’s not a massive difference between HTML and HTML5, the difference in syntax is noticeable nevertheless. Let’s look at some HTML5 examples, starting with the mandatory first line of any HTML5 file.

The first line of any HTML file begins with a doctype declaration. If it doesn’t start with <!DOCTYPE html>, it’s not HTML5. This declaration is all you need to start a file in this version of the HyperText Markup Language.

The previous version of HTML, HTML 4.01, on the other hand, had three different declarations.

You can learn more about it here.

In an older HTML version if the doctype declaration looks more like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

One of the shortest HTML5 examples possible would look something like this:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Sample h1 tag</h1>
<p>Sample</p>
</body>
</html>

That’s not among the properly representative HTML5 examples, though. A snippet of the actual HTML for a complicated website (like BitDegree.org) would look something like this:

Conclusion

HyperText Markup Language (or HTML) is vital for web development. Before 2014, HTML guidelines were stuck behind the times for a while, until the HTML recommendations were released by the W3C.

HTML5 introduced some extremely welcome changes, like:

• Improvements in Error Handling
• Simplified Syntax
• Boosted Mobile Support
• Video, Audio, and Vector Graphics Support

Mobile and media support enhancements are the most important for users but there’s also been a wide variety of tweaks happening to make web developers’ jobs easier as well. All in all, it’s about time.