HTML5 has given us plenty of awesomeness. If you are new to HTML5 and wish to gain some introduction about it, then checkout HTML5.0 tour organized by W3C in India. Many functionalities that we accomplished using Javascript, Flash for form validation, hidden elements, client side file renaming etc…can now be achieved using HTML5 feature. Today, let me give a glimpse of what HTML5 have given us. These are the very basic features of powerful HTML5.
What is HTML5 Hidden attribute?
The name say it all. Once we had to use CSS’s display style to hide any HTML element. But now HTML 5 has a new attribute named ‘hidden’, which works similar to CSS’s display:none.
For e.g
<div hidden>
I'm hidden here.
</div>In case, if your browser did not support ‘hidden’ attribute, you can use CSS to achieve the name.
*[hidden] { display: none; }Advantage 0f Hidden attribute:
It’s semantically correct and efficient way to hide an element. Moreover, you will save few texts in CSS file.
What is Download attribute in HTML5?
Let us assume that you are providing a file ‘1234567.txt’ for download and at the client side, you want to rename the download file as “download.txt”. Once, this was achieved using few lines of Javascript. But now, HTML5 comes with a new attribute called “download”.
<!-- will download as "download.pdf" -->
<a href="files/1234567.pdf" download="download.pdf">Download link</a>When the user clicks the download link, the file will be renamed as “download.pdf”.
Advantage of Download attribute in HTML5
You have avoided few lines of Javascript coding and it’s simple to use.
What is Autofocus attribute in HTML5?
Sometimes you might want an element to be automatically focused when the page is loaded. Well, this can be achieved using Javascript, but there’s a much simpler way.
<input autofocus="autofocus" />
<textarea autofocus="autofocus"></textarea>
<button autofocus="autofocus">Hi!</button>When ‘autofocus’ attribute is used for HTML elements like input, textarea and button, the browser will automatically enable focus when the page is loaded.
Limitations
‘autofocus’ attribute doesn’t seem to work for few tags like headers (H1, H2 etc…)
What is Placeholder attribute in HTML5?
Another interesting attribute in HTML5. Placeholder attribute will allow you to display text in a field until the user types in. For instance, you might want to display text inside text field as “Enter your name here” until the user types in.
<input type="text" name="first_name" placeholder="Your first name...">
Certain features of HTML5 are not supported on all web browsers. In such cases, you will have to write a fallback code.
