10 new features of HTML 5.1 and practical application
The characteristics of HTML have changed dramatically in the past few years when W3C launched some new recommendations for HTML 5.1 in November 2016. In some of its recent articles, the W3C calls these changes under the name of the gold standard , because HTML 5.1 provides users with new points of use to create more flexible web experiences.
In this article, we will review the new features that users can use without the help of JavaScript. However, it is undeniable that the improvements of JavaScript in particular are also very impressive.
Please note that in the current period, not all browsers support all of these features, so don't forget to check if your browser is compatible with them before starting too. use process.
1. Select multiple image sources for responsive design
In HTML 5.1, it is possible to use the <picture> tag along with srcset to create a responsive image. The <picture> tag is like an image container that allows developers to decide on different image sources to match UA's viewport size.
The <picture> tag will not work if stand alone because the functions of this tag are similar to the context for many image sources. Users need to select the default image source as a value of src in the <img> tag , and alternative image sources will accompany srcset in the <img> tag but with <source>
For example:
|
2. Show or hide additional information
With <details> and <summary> tags , users can add extended information as part of the content. These additional information will not be displayed by default but only when viewers choose to open them. In the code, you will have to put the <summary> tag inside the <details> tag . After the <summary> tag , you can start filling in the information you want to hide.
For example:
|
In Firefox 50.0.2, you will see this code displayed as follows
3. Add features to the context menu of the browser
With <menuitem> and type = "context" , you can add optional features to your browser context menu. You need to specify <menuitem> as a child element of the <menu> tag . The id part in <menu> needs to have the same value as the elementmenu of the element we want to add to the context menu (similar to the <button> in the example below).
For example:
|
The <menuitem> tag can appear in 3 forms, "checkbox" , "command" (used for JavaScript operations), and radio . It is possible to add more than one menu item to the context menu, but the current browsers still do not fully support this feature. Specifically, Chrome 54 does not support and Firefox 50 only allows 1 more context menu to appear. You will see how this code works in Firefox 50 when looking at the example below.
4. Insert headers and footers together
HTML 5.1 lets you nest headers and footers together if each level is in the content section. Note below is a screenshot in a W3C document to guide developers on how to use this feature in the most accurate way.
Specifically, the above text states that in cases where developers want to nest the header or footer into another header. The <header> element can only contain in <header> or <footer> if they themselves are all in the content section.
This feature is useful if you want to add elaborated header to semantic sectioning elements , such as <article> and <section> . The code below will create a sidebar inside the header, the <aside> tag acts as a sectioning element, and adds information about the author inside it. The sidebar inside the header has its own header, with a subtitle and author information.
For example:
|
5. Use cryptographic nonces for styles and scripts
With HTML 5.1, you can add cryptographic nonces into styles and scripts . You can use nonce attributes along with <script> and <style> elements . A nonce cryptographic is a randomly generated number that can only be used once, this number will be recreated every time a page request is made. Nonce can be used through the website's Content Privacy Policy to determine whether the script or style should be applied to the site. You can read more ways to use nonces and CSP exactly in Google Developers' Web Fundamentals .
Here is a simple code that introduces how to use the nonce attribute , but keep in mind that in practice, its value will not be decided but randomly generated.
For example:
|
6. Create backlinks
This feature appears in HTML 4 but has been removed when HTML 5 appears. Now, however, developers can add rev properties to the path again for the <link> and <a> elements . The rev attribute has a function opposite to rel when it can create a relationship in the opposite direction between the current document and the linked document.
For example:
|
The rev attribute is among the main features of HTML 5.1 for RDFa support , a widely used structured data markup format and extension for HTML language
7. Use zero-width images
HTML 5.1 enables developers to create create zero-width images by allowing them to set width attributes at zero value. This feature can be useful if you want to add images that you don't want them to display on. viewer screen (tracking images). Zero-width images should be used together with the empty alt attribute .
For example:
|
8. Separate the browser context to prevent phishing attacks
Using the same link on your website can lead to some troublesome situations. The cause of this situation is in the target = "_ blank" exploit area and may result in the opening of a phishing page. You can learn more about phishing attacks here
HTML 5.1 optimized the use of the rel = ”noopener attribute” to separate the context in the browser and thereby eliminate this problem. You can use the rel = "noopener" in <a> and <area> .
For example:
|
9. Create an empty selection
HTML 5.1 allows developers to create an empty <option> element . The <option> tag can be a child of <select> , <optgroup> , or <datalist> . The ability to create an empty <option> is useful if you don't want to suggest any options to the viewer, and it will also be useful when you want to design a user-friendly style.
10. Handle the captions more flexibly
The <figcaption> tag represents an annotation of the <figure> element , including the contents conveyed through sight such as photos, charts or illustrations. Previously, the <figcaption> tag could only be used as the first or last child element of the <figure> element . HTML 5.1 has relaxed this rule, and currently <figcaption> can appear anywhere in the <figure> area.
ITZone via Hongkiat