{"id":93835,"date":"2022-06-10T15:56:42","date_gmt":"2022-06-10T13:56:42","guid":{"rendered":"https:\/\/happybrain.it\/?p=93835"},"modified":"2022-06-10T16:52:28","modified_gmt":"2022-06-10T14:52:28","slug":"html-5-1","status":"publish","type":"post","link":"https:\/\/happybrain.it\/en\/2022\/06\/10\/html-5-1\/","title":{"rendered":"HTML 5.1"},"content":{"rendered":"

[vc_row][vc_column column_width_percent=”80″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1\/1″][vc_empty_space empty_h=”1″][vc_custom_heading separator=”under” separator_color=”yes” sub_reduced=”yes” uncode_shortcode_id=”146632″]HyperText Markup Language[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”140117″]Everything you see within a website is created by numbers, words, functions, angle brackets, tags and formulas. <\/span>It\u2019s not a carnival… It\u2019s a markup language, or rather, what at the beginning was known to most as <\/span>hypertext<\/b>.<\/span><\/p>\n

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

Are you curious to discover all the news of the latest update of this markup language?…\u00a0<\/span>continue reading!<\/span>[\/vc_column_text][vc_single_image media=”93858″ media_width_percent=”100″ alignment=”center” uncode_shortcode_id=”383971″][vc_custom_heading separator=”under” separator_color=”yes” sub_reduced=”yes” uncode_shortcode_id=”122986″]The easy submenu<\/span>[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”249123″]In e-commerce pages or rather structured institutional sites, we may need to insert a submenu that opens at the right click.\u00a0<\/span>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 <\/span>sub-menus<\/b> that extend the context menu of the browser by right-clicking on the element.<\/span><\/p>\n

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).<\/i><\/b>[\/vc_column_text][vc_custom_heading separator=”under” separator_color=”yes” sub_reduced=”yes” uncode_shortcode_id=”305679″]1, 2, 3… Online bookings go online<\/span>[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”176140″]Do you want to activate the online booking feature on your site? With this new version it\u2019s possible through the date and time input.<\/span><\/p>\n

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.<\/i><\/b>[\/vc_column_text][vc_custom_heading separator=”under” separator_color=”yes” sub_reduced=”yes” uncode_shortcode_id=”124453″]Insights by click<\/span>[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”117753″]To make a page with different insights (but also FAQ) more <\/span>functional<\/b> and <\/span>user-readable<\/b>, we can now develop the contents within drop-down menus with <\/span><details><\/i><\/b> and <\/span><summary><\/i><\/b>. 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.<\/span>[\/vc_column_text][vc_single_image media=”93859″ media_width_percent=”100″ alignment=”center” uncode_shortcode_id=”184228″][vc_custom_heading separator=”under” separator_color=”yes” sub_reduced=”yes” uncode_shortcode_id=”102192″]Filling in the form<\/span>[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”444237″]We will no longer receive forms filled out by the user with missing or wrong data!\u00a0<\/span>Already with the previous HTML5 version, attributes were inserted to highlight invalid fields if incomplete or with errors at the time of sending.<\/span><\/p>\n

With <\/span>.reportValidity()<\/i><\/b> 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.<\/span>[\/vc_column_text][vc_custom_heading separator=”under” separator_color=”yes” sub_reduced=”yes” uncode_shortcode_id=”649258″]The responsive images<\/span>[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”132924″]The theme of responsive images is perhaps the one that has engaged the most developers of version 5.1 of HTML.\u00a0<\/span>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!<\/span><\/p>\n

There is also the question of weight. When the image is too big the loading is slowed down, if it\u2019s too small it\u2019s grainy. Finally HTML5.1 solves the issue and puts everyone in agreement!<\/span><\/p>\n

How? Added two attributes to the <img> tag.<\/span>[\/vc_column_text][vc_single_image media=”93860″ media_width_percent=”100″ alignment=”center” uncode_shortcode_id=”194030″][vc_column_text uncode_shortcode_id=”143472″]Scrset <\/b>gives the possibility to set different image sources based on pixel ratio or breakpoint. This component goes hand in hand with <\/span><picture><\/i><\/b>, a container in which several image files are inserted and which only loads the source elements suitable for the screen size and resolution.<\/span><\/p>\n

Sizes<\/b>, instead, allows us to determine the size of the image compared to the viewport.\u00a0<\/span>And that\u2019s 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.<\/span><\/p>\n

The new features listed have already entered the common uses of web developers.\u00a0<\/span>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.\u00a0<\/span><\/p>\n

Through the <\/span>Github<\/span><\/a> platform, developers also have the opportunity to say their opinion and help in the improvement processes.<\/span><\/p>\n

And you, geek friend, If you were to devise the new version HTML5.2, what would you put?<\/span>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n

<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Discover all the news of the latest HTML5 update<\/p>\n","protected":false},"author":1,"featured_media":93858,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[406],"tags":[438,439,440],"class_list":["post-93835","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-about-web","tag-coding","tag-html","tag-web"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/93835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/comments?post=93835"}],"version-history":[{"count":0,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/93835\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media\/93858"}],"wp:attachment":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media?parent=93835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/categories?post=93835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/tags?post=93835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}