HTML 5.1

Everything you see within a website is created by numbers, words, functions, angle brackets, tags and formulas. It’s not a carnival… It’s a markup language, or rather, what at the beginning was known to most as hypertext.

HTML (acronym for “hypertext Markup Language“) creates everything you see inside a website: texts, images, videos, links, buttons and much more! Over time it has been updated and changed in several new versions, to facilitate web developers and also optimize usability and user-side appearance. Images, animations and dynamic features have been brought to the fore, and mobile rendering is of paramount importance. The latest language released is HTML5, released in 2016 and recently updated to version 5.1.

Are you curious to discover all the news of the latest update of this markup language?… continue reading!

In e-commerce pages or rather structured institutional sites, we may need to insert a submenu that opens at the right click. Before HTML5.1 it was necessary to work with blocks and sub-elements side CSS and Javascript. The new version of the markup language simplifies everything by giving the possibility to create sub-menus that extend the context menu of the browser by right-clicking on the element.

The appropriate tags are <menu> to create the main container and <menuitem> to create the subheadings. To set this feature we will have to put the two attributes: type=”context” and the id. The id is what connects the menu to the click on an element, to which must be added the contextmenu attribute enhanced with the id of the context menu, in turn composed of one or more <menuitem> (checkbox, radio and command).

Do you want to activate the online booking feature on your site? With this new version it’s possible through the date and time input.

Through type=”week” we can set the week of a given year, with “month” the month and with “datetime-local” the date and time with the time zone of the device that requested the page. By setting a week, month, or date with the time, in the respective inputs, you can read the value in the format in which it is set.

To make a page with different insights (but also FAQ) more functional and user-readable, we can now develop the contents within drop-down menus with <details> and <summary>. In this way, we can show at first only the title and not all the text, which will be available to the customer only if you click on the call to action expansion.

We will no longer receive forms filled out by the user with missing or wrong data! Already with the previous HTML5 version, attributes were inserted to highlight invalid fields if incomplete or with errors at the time of sending.

With .reportValidity() we can do this type of operation even before the user has sent the form if he has filled in at least one field because it stops the user even before he proceeds with the attempt to send, when he passes the mouse on the “send” key signaling what is not correct.

The theme of responsive images is perhaps the one that has engaged the most developers of version 5.1 of HTML. It was of paramount importance to make sure that images could be resized to be adaptable to the various sizes of mobile devices. Before this update you had to roll up your sleeves and employ a fair amount of css code!

There is also the question of weight. When the image is too big the loading is slowed down, if it’s too small it’s grainy. Finally HTML5.1 solves the issue and puts everyone in agreement!

How? Added two attributes to the <img> tag.

Scrset gives the possibility to set different image sources based on pixel ratio or breakpoint. This component goes hand in hand with <picture>, a container in which several image files are inserted and which only loads the source elements suitable for the screen size and resolution.

Sizes, instead, allows us to determine the size of the image compared to the viewport. And that’s how by resizing the window or seeing an image from different devices, the content tightens or widens, depending on the ratio of the viewport pixels to the physical ones of the image.

The new features listed have already entered the common uses of web developers. You can stay updated on all the news released by the official page of WSC, on which has already been provided a preview of the new version HTML5.2 that will fix several bugs of the current one. 

Through the Github platform, developers also have the opportunity to say their opinion and help in the improvement processes.

And you, geek friend, If you were to devise the new version HTML5.2, what would you put?