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.
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.
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
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
<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
<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.
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.
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.
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.
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
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:
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
One final note on
<section>: there is no required nesting of one within the other. You can indefinitely compose
<section> tags into complex hierarchies of your choosing.
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.