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.
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>
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.
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).
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.
5. Use cryptographic nonces for styles and scripts
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.
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.
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 .
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> .
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