HTML vs HTML5: Learn the Crucial Differences Between Them

HTML vs HTML5. What’s the big difference? If you’re looking to get into frontend development or work with code in WordPress, you need to know the difference. It can be especially confusing because some people may use the two terms interchangeably, but they’re technically two different things—though they’re also related.

Let’s go over the differences between HTML vs HTML5, which is better, and what’s changed with the popular markup language’s biggest update.

What is HTML?

HTML stands for HyperText Markup Language. It makes up the web’s building blocks, and it’s likely the most commonly known coding language out there.

HTML is the standard language used for web development. There are many web development tools that you can use when you are working with HTML. It allows you to create the base structure of a webpage using small tags called markup tags. For instance, to italicize a piece of text, you can wrap it in HTML tags as such:

<i>Italicized text.</i>

Much of HTML is similarly simple and human-readable, so even non-developers find it easy to work with. For how important it is to the World Wide Web, picking up HTML is shockingly easy.

It’s impossible to make a website without using HTML. While there are website builders which can let you design a site without touching any code, WordPress included, they’re still handling HTML code for you behind the scenes.

So, if you want to become a web developer or dive deeper into tools like WordPress, you’ll naturally need to learn HTML.

HTML is often paired with other languages such as CSS and JavaScript to extend its functionality. CSS helps you style HTML by adding colors, layouts, and more, while JavaScript is a more traditional programming language that lets you add advanced features.

While those two languages bundle well with HTML, they aren’t strictly necessary to create a website. HTML certainly is required, and that’s why it’s the most important web language.

What is HTML5?

HTML5 is not a separate system, but rather the latest version of HTML technology. Its predecessor, HTML4, had its first and last update in December 1999. HTML5 is actually not very new itself, being released several years ago in 2014.

So what’s the big difference? Why all the hype? While many of the markup tags remain unchanged (don’t fix what isn’t broken, after all), several of them have been simplified, so it’s vastly easier and faster to write code. It’s based on an entirely new standard, and its parsing is completely different, too.

Unlike older versions of HTML, which allowed you to create primarily static sites that needed to be spiced up with CSS and JavaScript, HTML5 is much more dynamic and includes multimedia elements. It natively supports video and audio, and you can even make games or animations with it.

In other words, HTML5 is fully capable of doing things you previously needed to do using old tools like JavaScript, Flash, or Silverlight. This means your site is more secure and less open to exploits from attackers trying to get in.

And while CSS and JavaScript are still definitely necessary to create a full-fledged website, you no longer need to rely on them to do anything dynamic at all.

HTML5 is no longer just a website builder. It’s an entire application builder on its own.

Rather than the next update coming out as “HTML6,” HTML5 is continually updated as a living standard evolving as the web needs. It’s the latest and greatest version of this long-lasting technology, and it’s going to be here for a long time to come.

HTML vs HTML5: Weighing the Differences

When most people talk about “HTML,” they’re referring to the technology as a whole, including its latest version: HTML5. While it’s very different in many ways, HTML5 is really just a polished update to the old standard.

While HTML and HTML5 are part of the same system, the big update brought several enhancements to the old coding language, making it even more efficient. Here are just a few examples of what was added.

Compatibility

When HTML5 first came out, compatibility was a big concern and a major reason many chose not to upgrade their site yet. If the browser didn’t know how to parse an HTML5 tag, it could result in broken or strange-looking pages.

The opposite is true: websites written in the old HTML4 standards will often break in modern browsers, as browsers have long since dropped support for outdated functions. If you want to remain compatible with most people’s browsers, HTML5 is the way to go.

While older versions of HTML do work well on browsers like Internet Explorer, these outdated versions are no longer supported or used by a majority of users. Most people will not need to code a website for such old browsers, so there’s no need to use HTML4.

As you can see here, HTML5 and most of its functions are supported on all modern browsers. Its new tags are fully or partially supported in all but Internet Explorer versions 6–8 and Firefox 2, all of which are from the early 2000s and rarely see use today.

While all modern browsers technically support HTML4, support for obsolete tags is spotty at best. You should avoid using outdated standards and switch to HTML5.

Multimedia Support

One of the biggest things HTML5 brings to the table is support for multimedia elements such as audio, video, vector graphics, animations, and games.

In the old days of the Web, putting so much as a simple animation on your site would usually require using JavaScript, Flash, or some other technology. Now you can do it in HTML or CSS without having to open yourself up to any potential exploits.

With video and audio, embedding a player is as easy as dropping in a simple tag. There’s plenty of configuration you can do from there, like turning on autoplay or adding player controls.

HTML5 also supports embedding SVG vector graphics—images that can resize to any resolution without pixelation. SVGs are becoming increasingly popular for displaying graphics online since they stretch well to fill any screen size.

Last, you can make full-fledged video games with HTML5, especially if you combine it with JavaScript. Many game creation tools even port to HTML5 and allow you to embed the result on your website.

This multimedia support makes HTML5 the ideal candidate to replace many outdated technologies, including Java Web Start, Silverlight, and, most recently, Flash. Almost everything you can do with these systems can be done more simply and efficiently in HTML5.

SGML

The original HTML language (up until version 4) was based heavily upon the SGML standard or Standard Generalized Markup Language.

While SGML is meant to standardize markup, eliminate confusion, and has inspired both HTML and XML, it was descended from a language created in the 1960s. It’s ancient and thus was not designed with modern web applications in mind.

HTML5 has evolved to no longer conform to SGML; it instead parses with its own unique rules. While its origins are still in SGML, and HTML5 is just an extension to the existing technology, it is no longer compliant with those standards.

One result of this is that error handling is much more forgiving now. One small error will no longer result in a glaring issue to viewers on your page, or a page that doesn’t load at all.

Semantics, or tags, have also drastically improved. Before, structuring your page at all required constant use of <div> tags: <div id=“header”>, <div id=“menu”>, and <div class=“post”>.

In HTML5, those clunky codes would be <header>, <nav>, and <article>. These tags are both cleaner and more responsive.

Several new tags were introduced as well. Many of them were created to replace the divs and frames previously used to structure pages.

Many of the old markup tags went entirely unchanged, so HTML5 is partially backward-compatible with older versions. But an untouched HTML4 document will no longer parse correctly with the new standards.

While there are quite a few differences between HTML and HTML5, the changes are generally for the better and are intended to make the markup language more accessible.

Better Performance and Mobile Support

One of HTML5’s biggest benefits is that it’s much faster and far more responsive than previous iterations. In the era of original HTML, devices other than computers accessing the Internet wasn’t even a dream yet; now, it’s all accessible from our phones, watches, and televisions, thanks in part to the speed of HTML5.

The new version brought better standards to keep websites running more smoothly on smaller, less powerful devices. Many performance issues will still depend on you and the quality of your code. However, plenty of loose ends on the HTML side were tied up with the HTML5 update.

For example, HTML5 supports multi-threading with JavaScript Web Workers, allowing your device’s processor to use more of its power to run scripts. Code that used to bog down a page will now run seamlessly.

Designing responsive websites is also much easier in HTML5. HTML4 had many unresponsive elements, such as divs, replaced by structure tags that work better on mobile.

Frames were removed as well for causing issues with usability and accessibility. While they’re still supported, they have been deprecated and should not be used unless you have reason to be working with outdated technology.

While there’s no direct HTML5 replacement for frames, it’s recommended you use CSS elements such as flex boxes or iframes (which are still supported in HTML5) to replace the old functionality.

Better Form Controls

New form controls equate to a new level of control over your site. While this may seem like a small feature, it means having to rely on one less external technology to create a working form.

Originally, HTML only supported text, password, hidden, checkbox/radio, and file upload input types. While that’s enough to make a basic input form, there’s so much more you can do with HTML5 input types now.

New additions include email, phone number, URL, search box, slider, numeric, date and time picker, and color picker inputs.

This diverse array of input types allows you to create better forms that can accept more content types, with validation included to ensure they’re correct. Check the full list of HTML inputs for more information.

Web Storage

When it comes to web storage, HTML4 and below essentially support cookies and little else. Storing any information besides basic user tracking in a tiny 4 kilobytes cookie was next to impossible.

On the other hand, local storage lets you store 5-10 megabytes of data depending on the browser. This allows you to save client-side info about previous sessions, offline access data, personal customizations, and more. Besides, local storage is not cleared automatically, unlike cookies.

One example of what you can do with local storage is to save a user’s preference for the light or dark theme on your site, ensuring they continue to see your site as they prefer it on their next visit. While you can also save user preferences with cookies, the browser will inevitably clear them after some time.

HTML5 supports local storage through the Web Storage API. Also, it supports Web SQL database storage, indexed database storage, and even file access with the File API. Many of these integrate with JavaScript through APIs. Before that, it was either extremely cumbersome to do or, in some cases, just wasn’t possible or was extremely cumbersome to do.

Which is Better: HTML or HTML5?

If you want to learn to code, you should definitely avoid using outdated standards. HTML5 is the newest version of HTML and should always be used over older versions of the language.

As listed above, HTML5 improves on several aspects of HTML4 that were obsolete and difficult to work with. Besides, HTML5 can do many things natively, while HTML4 relies entirely on long-since deprecated systems like Silverlight, Java Web Start, and Flash.

While HTML5 doesn’t always display properly on super old browsers and operating systems (such as Internet Explorer or old versions of mobile phones), these platforms are extremely outdated and rarely used anymore. There are no longer any good reasons to use outdated versions of HTML over modern standards.

Unfortunately, there’s a lot of information on the Internet and in books about older versions of HTML. Whenever you look up a guide or learn from a course or book, make sure it’s talking about HTML5 and was released or updated after 2014. There’s no use in learning outdated standards from 1999.

How to Convert HTML to HTML5

If you have an older website, you need to update it. There’s sadly no real way to do a total conversion without doing any manual work.

The best thing to do is read through the HTML5 specification (or take an HTML course if you’re totally new to the language) and get familiar with the changes. After that, you can rewrite the code and add the new features they added in HTML5.

Check out this guide to migrating from HTML4 to HTML5. It extensively covers the manual changes you need to make to the code.

You could also try this XHTML to HTML5 converter, but make sure to go over your code manually or insert it into a validator before importing it to a live site.

Luckily, HTML5 is mostly new content. There are a few deprecated tags you’ll need to replace, but besides that, upgrading the code is usually not a big endeavor unless your site relies heavily on deprecated technology like frames.

Summary

HTML and HTML5 are just two parts of the same technology, though they mean slightly different things. HTML refers to the markup language as a whole, often to the newest version, while HTML5 is the latest update to it.

If you’re looking to learn HTML, it’s important to use the latest edition: HTML5. It’s better in every way, and even if it means having to convert a lot of old code manually, it’s definitely worth the effort.

HTML5 is several years old now, and as the living standard of the language as a whole, it will only continue to get updated to work with the modern web.

Brenda Barron

Brenda Barron is a journalist and copywriter from California. She contributes to sites like WPMU DEV, Envato, and Torque.

• Website
• LinkedIn
• Twitter