10 Cool New Things in HTML 5.1 and How to Use Them in Real Life
Get ready to discover the latest and greatest features of HTML 5.1 that will take your web development skills to a whole new level. Stay in the loop and start creating even better websites.
Just a few weeks ago, the HTML specification got a total makeover when the W3C released its brand-new HTML 5.1 recommendation in November 2016. In their recent blog post, the W3C declared this major release the absolute best, because HTML 5.1 offers us a bunch of fresh ways to use HTML and design more adaptable web experiences.
In this article, I’ll walk you through some of its exciting new features that you can start using right away—no JavaScript required. Plus, keep in mind that the improvements in the JavaScript realm are pretty impressive too, but that’s a whole different story you can check out in the official change log.
Hey there! Just a heads up, not all browsers can support every feature I’m about to mention, so make sure to check if your browser can handle it before you use them for your website. If you’re curious about the future of HTML, you can take a look at the working draft of HTML 5.2 as well.
Contents
1. Use multiple images for responsive design
In HTML 5.1, you have a nifty little trick up your sleeve. You can use the img tag along with the srcset attribute to choose the perfect image for different devices. This means you can declare different images for different viewport sizes, screen pixel density, screen type, and other factors involved in making your website look great on any device. Pretty cool, right?
The tag itself doesn’t display anything, it functions only as context for the multiple image resources. You simply need to specify the default image by setting the src attribute of the tag, while the alternative images should be placed within the srcset attributes of the
and elements.
Here’s a code example:
2. Reveal or conceal extra information
By using the <details> and <summary> tags, you have the ability to include additional information within your content. This additional information is initially hidden, but users can choose to display it if they’re interested. In your code, you should place the <details> tag directly after the relevant content. Inside the <details> tag, you can then add the extra information that you wish to keep hidden.
Here’s a code example:
Error Message
We couldn’t finish downloading this video.
File name:
yourfile.mp4
File size:
100 MB
Duration:
00:05:27
This is what it looks like in Firefox 50.0.2:
If you want to customize the context menu that appears when you right-click in your browser, just use the HTML code below. It’s super simple!
Here’s the code you need:
Have you ever wondered how to create a context menu when right-clicking? Well, let me tell you all about it!
The context menu is a neat feature that appears when you right-click on something. It can have three different types: checkbox, command, and radio. The checkbox type allows you to add an action using JavaScript, while the command type is pretty straightforward. The radio type lets you choose one option from a list.
Now, here’s the catch: browser support for this feature is not very good yet. Chrome 54 doesn’t support it, and Firefox 50 only allows the presence of one extra context menu. But don’t worry, I’ll show you an example of how it works in Firefox 50.
Another cool thing you can do with HTML 5.1 is nest headers and footers! This means you can have headers and footers inside other headers and footers. How cool is that?
But there’s a rule: each level of nesting must be contained within sectioning content. This ensures that the structure is organized and makes sense. Here’s a screenshot from the W3C docs that shows the right way to nest headers and footers.
So now you know how to create a context menu and nest headers and footers. Pretty awesome, huh? Give it a try and see what you can come up with!
If you want to make your semantic sectioning elements, like and , more expressive, this feature can come in handy. Take a look at the code example below. It demonstrates how you can create a sidebar within a header. In this case, the header includes additional information about the author. The sidebar even has its own header, complete with a subtitle and the author’s contact information. Pretty cool, right?
Here’s the code example:
5. Use cryptographic nonces for styles & scripts
Hey there! Did you know that with HTML 5.1, you can easily add cryptographic nonces to styles and scripts? How cool is that!
A cryptographic nonce is a unique number that can only be used once. It has to be regenerated for every page request. This nonce plays an important role in the Content Security Policy (CSP) of a website. It helps determine if a certain script or style should be applied to the page.
If you want to learn more about how nonces and CSP work, you should check out Google Developers’ Web Fundamentals. They have a lot of useful information on this topic.
Now, let me show you a simple code example of how to use the nonce attribute. Keep in mind that in a real-world situation, the value of the nonce should be randomly generated, not hard-coded.
Check out the code example:
Create reverse link relationships
We can bring back the rev attribute for our links. Back in HTML 4, it was a thing, but then it got left behind in HTML5. However, in the world of HTML 5.1, we can now use this attribute again for the and elements. Think of the rev attribute as the complete opposite of rel. It tells us how the current document is related to the linked one, but in the reverse direction.
Here’s an example of code:
The rev attribute made a comeback in HTML 5.1 primarily because it wanted to show some love to RDFa. You see, RDFa is a fancy way of marking up structured data, and it’s all about extending the HTML language.
Use zero-width images
In HTML 5.1, developers now have the ability to create zero-width images by using the width attribute with a value of 0. This new feature can come in handy when you need to include images that shouldn’t be visible to users, like tracking image files. Zero-width images are best used when paired with empty alt attributes.
Here’s an example of how to use the width attribute to create a zero-width image:
8. Prevent phishing attacks by separating browser contexts
Using same origin links on your website can potentially lead to trouble down the line. There’s a vulnerability known as the target=”_blank” exploit, which is a dangerous phishing attack. You can safely test this attack on a clever demo page on Github, and you can also find the background code for it there.
I’m here to tell you about an exciting development in HTML 5.1. They’ve introduced a new attribute called rel=”noopener” that solves a pesky problem. Let me explain.
In the past, when you used the target=”_blank” attribute in your links or forms, it could cause some security issues. This was because the new page or tab you opened had access to your previous browsing context, which could be exploited by malicious websites.
But now, with the rel=”noopener” attribute, this problem is a thing of the past. When you add rel=”noopener” to your links or forms, it separates the browser contexts and prevents any tampering or access to your previous browsing session. It’s like putting up a wall between the new page or tab and your personal information – keeping you safe and secure.
So, how do you use rel=”noopener”? It’s simple! Just add it to the links or forms that you want to open in a new tab or window. That’s it!
Now you can browse the internet with peace of mind, knowing that your personal information is protected. HTML 5.1 and the rel=”noopener” attribute have your back.
So go ahead, explore the web, open new tabs and enjoy your online experience without worrying about security. Happy browsing!
Code example:
