Avatar
Philip Kiely
. No Comments

HTML vs HTML5

HTML (HyperText Markup Language) is the syntax that gives structure to almost every webpage you’ve ever seen.

In 2017, the World Wide Web Consortium (W3C) produced recommendations for HTML 5.2, the most advanced and modern form of the language to date. HTML5 is a living standard that defines language features for modern browsers and websites.

If you’re wondering what the difference is between HTML and HTML5 and what that could mean for your website, fear not: HTML5 preserves all of the useful features of prior versions of the language while introducing exciting tools that we’ll cover today.

Even if you’re not a programmer, take a look at some of the new features that HTML5 provides to gain inspiration for what you could add to your website.

HTML5 Overview

Here’s some good news: if you learned anything about web development in HTML in the past 8 years, you most likely learned HTML5. The HTML5 standard was released in 2012 and quickly reached full browser support, which means that these days when people say HTML or HTML5, they’re talking about the same thing.

HTML4, the previous version, was created before the iPhone, the iPad, 3G (and higher) mobile networking, and other fundamental aspects of today’s web ecosystem. HTML5 exists to support all modern platforms.

HTML4 could do almost everything that HTML5 can years before the HTML5 standard was released. However, the features you’ll be reading about below-required plugins, Adobe Flash Player, Microsoft Silverlight, and other additional software beyond just the web browser, making them inconsistent for users and needlessly difficult for developers.

A major goal of HTML5 was to have browsers implement first-party support for modern features. Ultimately, this did lead to some deprecations, for which GeeksforGeeks has a complete list.

HTML Timeline
HTML Timeline

In 2020, HTML5 has full support on every modern browser, with reasonable fallback modes for very old browsers that don’t support recent features. For most websites, concerns about web browsers’ HTML5 support are not significant enough to merit your attention. Instead, focus on the benefits that today’s HTML standard can bring to your application.

HTML5 New Features

These key features show distinct improvements and new capabilities of HTML5 over previous versions of HTML. Don’t worry if some of the technical details are difficult to grasp; website frameworks like WordPress have already integrated these features so that they’re available to you without needing to program.

1) Easy Elements: Video and Audio

HTML5 introduces both the <video> and <audio> tags for use in development. This makes it easy to include songs and videos on your website, for example, embedding YouTube videos. If you’ve worked with images before, you’ll feel right at home with these additions, which expand the arrangement of content mediums that you can implement on your website. The tags provide sensible defaults for display and playback of video and audio files and are easily customizable with CSS and JavaScript.

To implement video, use the <video> tag basically like you would an image tag in terms of sizing and positioning. Use the autoplay keyword in the tag to automatically play the video if desired. Use the controls keyword to show the browser’s standard video controls, which you can modify with CSS and JavaScript.

<video width="400" height="300" controls autoplay>
  <source src="path/to/yourmovie.mp4" type="video/mp4">
Browser support fallback text here
</video>

To add audio, you’ll need a source file in the MP3, OGG, or WAV format, of which MP3 has the widest support. To embed it in your HTML page, use the <audio> tag as shown below. The controls line in the tag enables the browser’s default audio controls, which can be extended with CSS and JavaScript.

<audio controls>
  <source src="path/to/youraudio.mp3" type="audio/mpeg">
Browser support fallback text here
</audio>

Video and audio tags both provide a wide range of properties and generate a dozen or so events that can be useful in various contexts. You can read a full audio and video DOM reference on W3Schools.

2) New Graphics

HTML5 introduces two key options for advanced graphics on the web: the <canvas> element and native SVG (Scalable Vector Graphics) support. Let’s consider them in order.

  • The <canvas> tag allows you to use JavaScript, either raw or using any of several libraries designed for the purpose, to create graphics and lettering on the page. Canvas tags must be defined with a height and width, which you’ll have to use CSS or JavaScript to resize for different screen sizes.

Sketch of Canvas
Sketch of Canvas

Here’s a short snippet to get you started playing with canvas:

<html>
<head>
    <title>Canvas Demo</title>
</head>
<body>
<canvas id="demoCanvas" width="400" height="400"></canvas>
</body>
<script>
var canvas = document.getElementById("demoCanvas");
var context = canvas.getContext("2d");
# Draw things here!
</script>
</html>
  • Scalable Vector Graphics are a way of representing images. Rather than a pixel-based format like PNG, an SVG uses vectors to trace paths, which are then filled. SVG is a popular format for graphics like logos, headers, and other design elements that need to be arbitrarily resized. Thanks to its use of vectors, the SVG format can be scaled up arbitrarily large without losing resolution. Unlike a PNG or JPG which could be pixelated on a large screen, an SVG image can be printed on the side of a skyscraper with crisp lines. Clearly, this is a useful option for resizable webpages.

Include SVG like any other image:

<img src="path/to/yourimage.svg" alt="My SVG image">

Be sure to use CSS to constrain the size and positioning of the SVG image.

3) Features for Everyone: Accessibility

From when HTML4 was released in 1999 to today in 2020, over four billion people joined the internet. Thanks to this incredible and accelerating proliferation, over 58 percent of the world’s population is online. If you think about everything that can be a barrier to entry in viewing a website, that means that there are millions of internet users with accessibility barriers, temporary and permanent, in the world today. Part of the power of the HTML5 standard is the tools that it provides for creating websites that are accessible to all users.

People overcome accessibility constraints by modifying their inputs and outputs from computing systems to meet their needs. Accessibility can mean supporting screen readers, mouse-free navigation, older devices, and outdated browsers. Also slow and unreliable network connections, hearing-impaired users, colorblind users, users who need to take a long time to interact with various elements, and millions of users with thousands of conditions not listed here.

Unfortunately, it’s infeasible to create specific implementation plans for all but the most widespread of accessibility needs. However, implementing your HTML according to best practices using common standards can make your site readable to a wide range of assistive technologies.

Remember semantic elements from the last section. These are an important supplement to, but not a complete replacement for, ARIA (Accessible Rich Internet Applications) attributes.

ARIA, which includes roles and states, is a way of defining values that are shown on the screen in the HTML such that they are parsable by screen readers and other assistive technologies. Especially when creating JavaScript-heavy applications, use AIRA roles to make sure that every user who visits your website is able to engage with your content.

4) Keeping Users Safe: Content Security Policy

A Content Security Policy (CSP) protects your users by only allowing your webpages to load scripts from authorized sources. CSPs are included in numerous web frameworks like Django and are widely available either natively or as plugins for prebuilt backends like WordPress.

The purpose of a CSP is to protect against code injection style attacks, especially cross-site scripting, and clickjacking. Both of which operate by executing injected third-party JavaScript on the webpage.

Content Security Policy blocking scripts
Content Security Policy blocking scripts

CSPs are included in HTML documents by use of a meta tag, for example <meta http-equiv="Content-Security-Policy" content="script-src 'self'">. This tag should be placed as early in the document’s <head> tag as possible; as with all tags in the head it is interpreted in order, so the policy will only apply to scripts included below the CSP. W3C has a full implementation guide in its recommendations.

CSPs operate by a whitelist approach on the client-side, meaning that you have to explicitly hard-code and approve every script you want the page to load. This provides robust security but can be frustrating as a developer, especially because a strict CSP can block some basic default JavaScript and CSS behavior.

Fortunately, you can set the CSP to report rather than block unapproved scripts. This is useful while developing as you can see the scripts you need to audit for the whitelist without the site breaking. This reporting feature stays active once the CSP is set to block, allowing you to log and monitor potential threats.

5) Clean Code: Semantic Elements

Similar to the audiovisual features we just discussed, HTML5 brings semantic names to several elements used for page layout. This helps web developers write clean page structures that rely on CSS to adapt to different screen sizes.

On its own, this semantic layout doesn’t do much. Each semantic element is basically a <div> tag, that is, it’s an arbitrary division in the document that produces no visual effect on the page by itself. Instead, the semantic element reveals its contents to developers and the web browser. This helps you write not only cleaner HTML but cleaner and more meaningful CSS and JavaScript to format and style the page.

The following code sample demonstrates potential uses of semantic elements on a page:

<html>
<head>
    <title>Semantic HTML Basics</title>
</head>
<body>
    <nav>
        <a href="">Bunch | Of | Links</a>
    </nav>

    <header>
    Your Page Header Here
    </header>

    <aside>
    Maybe some additional navigation on left sidebar
    </aside>

    <section>
    This is where the main page content is
    </section>

    <aside>
    You might put an ad or email-list signup in this right sidebar
    </aside>

    <footer>
    Your Page Footer Here
    </footer>
</body>
</html>

With the right CSS (using, for example, Bootstrap), a given semantic HTML page could look like the following sketch:

Semantic page layout on computer and phone
Semantic page layout on computer and phone

Listed below are a few semantic elements that we use regularly in our own development. There are others too, but these are the ones that we find consistently useful.

If the descriptions seem rather pointless, good. That’s the whole reason to use semantic elements in your HTML: they make your page structure obvious in the code.

  • <nav> for navigation bars
  • <header> for headers
  • <footer> for footers
  • <aside> for sidebars
  • <article> and <section> for content

One final note on <article> versus <section>: there is no required nesting of one within the other. You can indefinitely compose <article> and <section> tags into complex hierarchies of your choosing.

Conclusion

HTML5 is a living standard. It receives frequent updates that may introduce new features but do not remove old ones. We doubt we’ll be seeing HTML6 in any near future, as HTML5 will continue to be updated to support the ever-changing needs of website developers and users.

While the core elements of the language will remain stable, W3C standards writers, browser implementers, and web application developers will continue to push the boundaries of what is possible in creating innovative, accessible, useful, secure webpages for the billions of people who use the internet.


Want to ask a question or leave a comment?


Ask me anything

  • +

0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*