Html 5.1 new features
The possibility of having an empty can be useful if you don’t want to suggest which option users should select, and which can be useful when you want to design user-friendly forms. The tag can be the child element of the, , or elements. HTML 5.1 allows developers to create an empty element. You can use rel="noopener" within the and elements. HTML 5.1 has standardized the usage of the rel="noopener" attribute which separates browser contexts therefore eliminates this issue.
#HTML 5.1 NEW FEATURES CODE#
You can (safely) test how this attack works on this clever Github demo page, and its background code you can find here on Github. The vulnerability is called the target=”_blank” exploits, and it’s a nasty phishing attack. Using same origin links on your website can eventually get you into some trouble. Separate browser contexts to prevent phishing attacks Zero-width images are recommended to be used together with empty alt attributes. This feature can be useful if you want to include images that you don’t want to show to users, such as tracking image files. HTML 5.1 makes it possible to** create zero-width images**by permitting developers to use the width attribute with 0 as value. The rev attribute has been included in the HTML 5.1 specs primarily to support RDFa which is a widely-used structured data markup format, and extends the HTML language. The rev attribute is the opposite of rel, it specifies the relationship of the current and the linked document in the reverse direction (how the current document is related to the linked one). HTML 5.1 allows developers to use this attribute again for the and elements. It was previously defined in HTML 4, however it wasn’t supported by HTML5. You can add the rev attribute to your links again. In Google Developers’ Web Fundamentals you can read more on the proper usage of nonces and CSP. A nonce can be used by the Content Security Policy of a website to decide if the certain script or style should be applied on the page. A cryptographic nonce is a randomly generated number that can be used only once, and has to be regenerated for every page request. You can use the nonce attribute within the and the elements. With HTML 5.1, you can add cryptographic nonces to styles and scripts. Use cryptographic nonces for styles & scripts The sidebar inside the header has its own header as well, with a subtitle and the author’s contact info. The code example below creates a sidebar inside the header, the tag is also a sectioning element, and adds extra information about the author inside it. This feature can be useful if you want to add elaborated headers to semantic sectioning elements, such as and. HTML 5.1 allows you to nest headers and footers if each level is contained within sectioning content. Nest headers and footersĬode: Article Title About the author Email Twitter Author bio. Chrome 54 doesn’t support it, and Firefox 50 only allows the presence of one extra context menu. However the browser support for this feature is not very good yet. The id of the element needs to carry the same value as the contextmenu attribute of the element to which we want to add the context menu to (which is the element in the example above).
You need to assign as the child element of the tag. With the element and its type="context" attribute, you can add custom functionality to the context menu of the browser. Add functionality to the browser’s context menu Right click me
After the tag you can add the extra information you want to hide. In your code, you are supposed to place the tag inside. The extra information isn’t shown by default, but if users are interested, they have the option to take a look. With the and tags, you can add extended information to a content piece. File name: yourfile.mp4 File size: 100 MB Duration: 00:05:27 Show or hide extra informationĬode: Error Message We couldn't finish downloading this video. The tag represents an image container that allows developers to declare different image resources in order to adapt to the UA’s viewport size, screen pixel density, screen type, and other parameters used in responsive design. In HTML 5.1, you can use tag together with the srcset attribute to make responsive image selection possible. Define multiple image resources for responsive design
Note: Currently not all browsers support all of these features, so don’t forget to check browser support before you use them in production. In its recent blog post, W3C called the new major release the gold standard, as HTML 5.1 provide us with new ways of how we can use HTML to create more flexible web experiences. The HTML specification got a major overhaul a couple of weeks ago when W3C published its new HTML 5.1 recommendation in November 2016.