Web Development

The Difference Between HTML and HTML5: 14 Years of Progress

The Difference Between HTML and HTML5 14 Years of Progress

Introduction

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 with 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.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
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 ugly because this markup language isn’t meant to style the look of your website. It only puts in the elements you want.

For styling, CSS (Cascading Style Sheets) is the best.

HTML works by putting different elements you want in < > < /> tags. They tell the web browser what the element is supposed to be. Then, you essentially feed the browser that element’s value and close the element with a </ > tag.

<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, etc. You close the paragraph with </p> or </h2> if you want it to be Heading 2.

Of course, it gets much more complicated than this when you go deeper. This is one of many a difference between HTML and HTML5 — 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 about HTML. Now, what is HTML5?

Obviously, the people who created HTML back in 1995 had no clue that the Internet would become as amazing as it is now.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
They had neither the vision nor the technical capabilities to make it what we use now. HTML 5 is the most recent evolution of the HyperText Markup Language. Its purpose is to allow us to use the Internet like we want to now.

While you technically could write the frame of a website using HTML’s previous versions, it would not be as good.

There is a clear difference between HTML and HTML5 in how they handle some modern website properties. You can’t really make modern websites with older HTML versions unless you’re an absolute web development god and use a lot of cumbersome workarounds.

Remember the website of that pizza place you hardly order from because it looks like it was outdated even 10 years ago? Yeah, that’s what we’re talking about.

The truth is that if you’re making a website from scratch in 2018, you must use HTML5. If you’re a former web developer who took a long vacation and hasn’t worked with HTML5 yet, you gotta learn, sir.

If you haven’t ever built a website before, great! You will learn the most advanced version of HTML to date from the get-go.

And that’s a quick overview of what is 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.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
So, what’s the difference between HTML and HTML5? We first have to delve into history for a bit to answer.

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. 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 behind.

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.

While HTML5 is the most recent version of the HyperText Markup Language, HTML4 is its forefather.

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. In 2014, HTML5 was created and developers started to develop websites using it soon after.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
That’s 14 years of tech development the current version of the HyperText Markup Language had to catch up to. Is it any wonder that there is a significant difference between HTML and HTML5?

Of course not. After all, the Internet changed a lot in that time. How was HTML5 adapted to deal with these changes? THat’s what the next sections are about.

Better Error Handling

The first difference 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, developers would write perfect code that never breaks in a perfect world. No matter what happens.

Unfortunately, that doesn’t happen. Ever.

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 and helping the browser to show you a proper web page, even when the developer made some small mistake or another somewhere.

Modern Web Application Support

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====

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. Modern websites are more like standalone programs which work in your web browser. HTML5 is one of the reasons why developers can bring us products like this.

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.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
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 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 higher than they are wide, while computer monitors are the opposite. What looks great on a computer will naturally look like crap on a smartphone, 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 thank God for that. Most people browse the Internet on their smartphone. Chances are you do too. How likely are you to stay on a website that looks like crap on your smartphone?

Video and Audio Support

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

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
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 in websites.

In 2014 and even 2018? 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 smushing 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 it’s likely that you will 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.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
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.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
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 favorite 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 but it’s an older HTML version if the doctype declaration looks more like this, according to the website we linked above:

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

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
One of the shortest HTML5 examples possible would look something like this:

<!DOCTYPE html\>

<html\>

<head\>

<title>This is the name of the page, which appears in the browser tabs.</title\>

</head\>

<body\>

And this is the content users see on the website.

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
</body\>

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

<div class=”col-12 col-sm-6 col-md-3″\>

<div class=”card course-card”\>

<div class=”badge-container”\>

<div class=”course-badge badge-featured”\>

Featured

</div\>

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
<div class=”course-badge badge-new”\>

New

</div\>

</div\>

<a href=”https://www.bitdegree.org/course/persuasive-writing”\>

<div class=”course-img”\>

<img src=”https://bitdegree-storage.s3.amazonaws.com/course-image/q1yzxHO53sNmdJknjVv0VfbaZxIm5RzsccpU0LglV0W31DfrWBl8EqlLMnW0AiDb_1534774119.jpg” \>

<div class=”course-time”><i class=”fa fa-clock”></i> 3h </div\>

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
</div\>

<div class=”card-content”\>

<div class=”course-stats”\>

<h6 class=”course-author”>Tamsin Henderson</h6\>

<span><i class=”fa fa-bars”></i> 37 lectures</span\>

</div\>

 
Way more complicated, right? It can also be beautiful in a way:

===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====

Conclusion

HyperText Markup Language (or HTML) is vital for web development. Without it, there wouldn’t be almost any websites and the world would be unrecognizable. 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 obviously 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.

More in Web Development
What Is A Full Stack Developer: Everything You Need to Know to Become One
What Is A Full Stack Developer: Everything You Need to Know to Become One

Close