Seven more HTML5 features you might not know about
Good day!
We all have heard enough about HTML5 and its capabilities. For example, the elements of audio and video , which everyone has heard. But despite this, there are a couple of tags, which are far from being known, and which I did not know until recently. So, this is what I want to share with you.
')
The autofocus attribute allows you to switch focus to any element, such as, for example, a text field, or a button. The focus is set on the element after the page is fully loaded. Previously, to implement this feature, we had to use JavaScript, but now there is HTML5, which allows us to do this very quickly and simply.
Example.
The download attribute allows us to set the name of the file being downloaded. Now we do not need to do this on the server side. For example, we have a file hello.js, which we can easily save under the name README. Everything is done very simply: the download attribute is used in conjunction with the href attribute, with which we specify the path to the file.
Example.
The prefetch attribute allows the browser to pre-load the page we need in order to display it immediately when clicking on a link, rather than waiting for a tedious and long download. For example, the article is divided into several parts (each part is located on its own page. / Page1 and / page2). Now we can load the second page in advance while we are reading the first one. This is done very simply.
Example.
As you may have guessed, the hidden attribute is used to hide any element on the page. This attribute performs the similar role of the hidden value of the input element's type attribute. We all remember the hidden text fields that were stored to save data that the user does not need to see. Well, with the hidden attribute we can hide any element.
Example.
The spellcheck attribute allows us to check spelling errors during data entry. This attribute works with all inputs (read, text fields) and editable divs (a contenteditable div, if anyone does not remember).
Example.
The datalist tag allows us to suggest word variations as the end user enters the text into the field. For example, we want to arrange a survey on the subject of the services of which mobile operator our subscriber uses. If he does not remember what he is called, but only remembers, say, the first letter in his name, then we can offer him all the available options.
Example.
The output element gives us the ability to display data on the screen. It can be useful for displaying any type of data. For example, we wrote a web application that is a calculator. The output element we can use to display the result on the page.
Example.
HTML5 is undoubtedly a new stage in the development of hypertext markup language. Despite the fact that it provides some completely useless elements: the same output can be easily replaced with a regular div and you can’t be soared about whether the result of evaluating any expression will be output, say, in the old IE7; In its store several useful features are stored: eg, autofocus and datalist . In this case, HTML5 makes it easier for the programmer to work the client-side: it allows you to forget a good feature in one or two lines, instead of implementing your own crutches in JavaScript.
That's all. See you again!
We all have heard enough about HTML5 and its capabilities. For example, the elements of audio and video , which everyone has heard. But despite this, there are a couple of tags, which are far from being known, and which I did not know until recently. So, this is what I want to share with you.
To check in which browser this or that feature works, I advise you to visit Can I Use .
')
autofocus
The autofocus attribute allows you to switch focus to any element, such as, for example, a text field, or a button. The focus is set on the element after the page is fully loaded. Previously, to implement this feature, we had to use JavaScript, but now there is HTML5, which allows us to do this very quickly and simply.
Example.
<input autofocus="autofocus" /> download
The download attribute allows us to set the name of the file being downloaded. Now we do not need to do this on the server side. For example, we have a file hello.js, which we can easily save under the name README. Everything is done very simply: the download attribute is used in conjunction with the href attribute, with which we specify the path to the file.
Example.
<a href="hello.js" download="README"></a> prefetch
The prefetch attribute allows the browser to pre-load the page we need in order to display it immediately when clicking on a link, rather than waiting for a tedious and long download. For example, the article is divided into several parts (each part is located on its own page. / Page1 and / page2). Now we can load the second page in advance while we are reading the first one. This is done very simply.
Example.
<link rel="prefetch" href="/page2"> hidden
As you may have guessed, the hidden attribute is used to hide any element on the page. This attribute performs the similar role of the hidden value of the input element's type attribute. We all remember the hidden text fields that were stored to save data that the user does not need to see. Well, with the hidden attribute we can hide any element.
Example.
<div hidden="hidden">, ! , ... :(</div> spellcheck
The spellcheck attribute allows us to check spelling errors during data entry. This attribute works with all inputs (read, text fields) and editable divs (a contenteditable div, if anyone does not remember).
Example.
<input type="text" spellcheck="true"> datalist
The datalist tag allows us to suggest word variations as the end user enters the text into the field. For example, we want to arrange a survey on the subject of the services of which mobile operator our subscriber uses. If he does not remember what he is called, but only remembers, say, the first letter in his name, then we can offer him all the available options.
Example.
<input list="provlist" name="list" > <datalist id="provlist"> <option value=""> <option value=""> <option value=""> <option value="2"> <option value=""> </datalist> output
The output element gives us the ability to display data on the screen. It can be useful for displaying any type of data. For example, we wrote a web application that is a calculator. The output element we can use to display the result on the page.
Example.
<output>, </output> What do I think about all this
HTML5 is undoubtedly a new stage in the development of hypertext markup language. Despite the fact that it provides some completely useless elements: the same output can be easily replaced with a regular div and you can’t be soared about whether the result of evaluating any expression will be output, say, in the old IE7; In its store several useful features are stored: eg, autofocus and datalist . In this case, HTML5 makes it easier for the programmer to work the client-side: it allows you to forget a good feature in one or two lines, instead of implementing your own crutches in JavaScript.
That's all. See you again!
Source: https://habr.com/ru/post/153613/
All Articles