There are many additional features that come with HTML5 such as the HTML5 attribute placeholder and required.
In this article, we will look at some of the new HTML5 attributes and how they can be used.
Hidden Attribute
The hidden attribute can be used on any element it hides the element which has this attribute. It's the same as
doing, display: none;
The difference is that it more semantic to place a hidden attribute on an element than styling the element with a display: none;
<input type="text" name="hidden-field" hidden />
If your browser doesn't support the HTML5 hidden attribute then you can use the fallback in your CSS file.
*[hidden] { display: none; }
Spellcheck Attribute
The spellcheck attribute does a client side spellcheck of the text the user enters inside a textbox or a textarea.
The value of the spellcheck attribute can be either true or false.
Setting the value to true will use the default browser spellchecker, if set to false you are turning off the default browser spellchecker.
<textarea spellcheck="true"></textarea>
<textarea spellcheck="false"></textarea>
Download Attribute
The download attribute can be used on a link to define the name of the file which is downloaded.
This is really useful if you have a file from a datasource which has a querystring on the end, you can assign the download attribute to the link so that when the user downloads the image it can be named something more user friendly.
<a href="download-text.txt?date=1234567890" download="download-name.jpg" class="download-button">Download Button</a>
As you can see from the download-text.txt has a querystring and this will be added to the filename when you download it.
But when you add the download attribute the file name will be stored as the value in the download attribute.
The download attribute also defines this link as you intend it to be used to download a file.
Draggable Attribute
The HTML draggable attribute is a value you give to the element to make it draggable in the browser.
This can be added to many elements including images, if you have a input type of file on the page at the same time you can drag images into the upload input.
The value of the draggable attribute can be either true or false.
The default is false so you only need to use this value when turning off the ability to drag the element.
<div class="draggable-area" draggable="true">
<p>Drag A this text</p>
</div>
<div class="draggable-area" draggable="true">
<p>Drag B this text</p>
</div>
<div class="draggable-area" draggable="true">
<p>Drag C this text</p>
</div>
View the demo page to see some of these attributes in action.
Translate Attribute
The translate attribute is used to tell the browser to translate the text inside the element.
The value of the translate attribute can be either yes or no.
<p translate="yes">This text will be translated</p>
<p translate="no">This text will not be translated</p>
Contenteditable Attribute
The contenteditable attribute is used to make an element editable in the browser.
The value of the contenteditable attribute can be either true or false.
<div contenteditable="true">
<p>This text is editable</p>
</div>
Autocapitalize Attribute
The autocapitalize attribute is used to tell the browser how to capitalize words as the entered by the user.
The value of the autocapitalize attribute can be either none, sentences, words or characters.
<input type="text" autocapitalize="none" />
<input type="text" autocapitalize="sentences" />
<input type="text" autocapitalize="words" />
<input type="text" autocapitalize="characters" />