HTML5 Attributes

HTML5 New Attributes

HTML5 introduced new attributes. All these attributes are functional and easy to use. HTML5 also removed so many attributes as they are presentational, not functional.
html5-removed-attributes. Here is a list of html5 attributes.

HTML5 Attributes List

async Attribute

async attribute is used in External JavaScripts to load external js asynchronously. This improve WebPage performance.

Don't use async in external jquery files.

<script async src="functions.js"></script>  

Contenteditable

contenteditable is a new attribute for text elements. Default value of contenteditable is false. To edit a paragraph or text, add contenteditable="true".

<p contenteditable="true">This para is editable</p>    

data Attribute

data attribute is used to add custom attributes in html5. Till HTML4/XHTML there was no option to add custom attributes, but html5 gives an option to add custom attribute using data attribute.

<div class="slider" data-timer="3000"> </div> 

datetime Attribute

Datetime Attribute is an optional attribute for time element. It is used to set datetime value of time tag in ISO Format.

<time datetime="1947-08-15T00:00">15-Aug</time> 

defer Attribute

defer attribute is also used in External JavaScripts to load external js after html is parsed. Defer

<script defer src="functions.js"></script>  

Download

Download attribute is used hyperlinks to download the file. Without download attribute, the file will open in browser tab.

<a href="html5.pdf" download>Download PDF</a>

Draggable

draggable attribute is used if an element is draggable using HTML5 drag and Drop Events. draggable shows a placeholder of dragable element. By default, only selected text, images and hyperlinks are draggable, but using draggable="true", any html5 element can be draggable.

<p draggable="true">This paragraph is draggable</p>
<p draggable="false">This paragraph is not draggable</p>

hidden

hidden attribute is used to hide an element from user. By applying hidden attribute, the css display of element converts to none.

 <button hidden >Button</button>

list Attribute

list Attribute is used in inputs to link datalist. Datalist includes pre defined options for input.

<input type="text" list="list1">

<datalist id="list1"> 
<option> New Delhi</option> 
<option> Chennai</option> 
<option> Kolkata</option> 
<option> Mumbai</option> 
</datalist> 

max Attribute

max attribute is used in input type number and input type range to set maximum value of both inputs.

<input type="number" max="60">
<input type="range" max="100">    

min Attribute

min attribute is used to set minimum value of input type number and range.The default min value is 0

<input type="number" min="18" >
 <input type="range" min="18" max="40"> 

minlength Attribute

minlength attribute is used to set minimum length of value inserted in textbox. Default value of minlength is 0. Browser will show a notification on form submit if length of text is less then minlength.

<input type="text" minlength="3">

open Attribute

open attribute is optional attribute of details element. It is used to open details element on page load.

<details open>
<summary>See More</summary>
<p>Description of details element.</p>    
</details>

Role Attribute

role attribute is used to add web accessibility in html5. Its is a part of semantic web in HTML5.

<form role="search"></form>
    
<div role="button"> </div>

<div class="clear" role="presentational"> </div>

<ul role="list"> 
    <li>List 1</li>
    <li>List 2</li>
    <li role="separator"></li>
    <li>List 3</li>
    <li>List 4</li>
</ul>

HTML5 Removed Attributes

HTML5 removed all presentation attribute, we can add style using css. Here is a list of removed attributes in html5