Hello readers, Today we will discuss about the HTML5 Attributes. Basically attributes are used to define some additional information about the HTML elements. As there are various global and custom attributes used in HTML5.

Features of HTML5 attributes:-

1. It provides additional information about the element.

2. Some attributes are defined globally and therefore can be easily used on any HTML element.

3. While some other attributes are defined for some particular HTML elements.

4. These are always specified in the start tag in a document.

5. All attributes have a specific name and value assigned to it .

6. These are case insensitive.

Below is the list of various updated Global attributes of HTML5

1. Contenteditable -: It defines that whether the user can edit the the content in a document.
2. Contextmenu -: It specifies to a menu corresponding to the given element.
3. Draggable -: It specifies if an element is draggable or not.
4. Dropzone -: It defines if the data which is dragged is copied, moved or linked when it is been dropped.
5. Hidden -: It specifies whether the element used is visible or not.
6. Spellcheck -: It specifies whether the content used in the document need to have its spelling and grammar checked or not.
7. Translate –: It specifies whether the content of the document need to be translated or not.
8. Data-* - It acts as a prefix for any attribute that we want to add with an element and it basically help to create our own attribute. E.g <button type =”button” data-foo=”foo”>My Button </button> 

Below is the list of various Element Attributes -

There are few attributes among several of them are applied to multiple elements. Below are some attributes name with the elements are explained briefly. These are - :

• async (script element) :- This attribute helps to execute the script before the whole page gets loaded.

Syntax :- <script type=”text/javascript”src=”myscript.js”async=”async”></script>

• autocomplete(input element) -: This attribute auto-completes the text entered into the input elements having a valid type assigned to it. It uses valid values such as “on”and “off” by enabling the input elements to show autocomplete feature when one and disable on off.

Synatx :- <input type =”email” name=”email” autocomplete =”on” />

• autofocus (input , select , textarea and button elements) :- This attribute automatically focuses the element whenever the page is loaded.

Syntax :- <input type=”search” name=”search_text”? autofocus=”autofocus” />

• charcet (meta element) :- This attribute defines the character encoding for a page easily understandable for the developers ,mostly used is UTF-8.
• Dirname(input and textarea element):- This attribute basically defines the text direction whether to choose ltr(left to right) or rtl(right to left) on input and textarea elements.
• disabled(fieldset elements ) :- This attribute help the fieldset element to disable all elements that are within the fieldset.

Syntax :-

<filedset disabled=”disabled”>

<legend> Personal Information:</legend>

First Name: <input type =”text” /><br />

Ladt Name: <input tyle =”text” /> <br />

</fieldset>

Some new attributes for Form :-

• formaction(input and button elements) :- This attribute helps to send the submitted data to varioius locations for further processing whenever a form is submitted. It uses a url which describes where we the data to be send.

Syntax :- First name : <input type =”text” name=”FirstName” formaction = ”MyProcessingPage.asp” />

• formenctype(input and button elements) :- This attribute allows us to override the method attribute of a form belonging to input or button elements. It uses to valid values i.e get and post.
• Formnovalidate(input and button elements) :- It amin work is to exclude the elements whenever the form validates.

Syntax :- <input type =”text”? Formnovalidate =”formnovalidate” name=”Firstname” />

• hreflang( area element) :- This attribute defines the language of the targeted url for the area element.
• label(menu element) :- This attribute represents the headings for a group of elements belonging to the menu element.

Syntax :-

< menu label =”Edit”>

<button type =”button” onclick=”edit_cut()”>Cut</button>

<button type =”button” onclick=”edit_copy()”>Copy</button>

<button type =”button” onclick=”edit_paste()”>Paste</button>

</menu>

• max(input element) :- This attribute will set a maximum limit on the user's input either a numerical or date limit depending upon the type attribute of the input elements used.

Syntax :- <input type =”number” name=”age” min=”1” max=”100” />

• maxlength(textarea element> :- This attribute defines the limit to the number of characters that can be entered in a textarea element.

Syntax :-

<textarea maxlength =”100”>

some text is to be entered here.

</textarea>

• media ( a and area element) :- This attribute optimizes the media or a device to some targeted url.
• min(input element) :- Using this attribute user will be able to set a minimum limit on the user's input it can be a numerical or date limit depending upon the type attribute of the input elements used.
• multiple(input element) :- This attribute works for multiple values selected by the user when the type is set to either email or file.

Syntax :- <input type=”file” name=”My_Image_Gallery” multiple =”multiple” />

• pattern (input element) :- This attribute helps the user to use regular expressions and the type should be set to text, search, url, tele, emil or password etc.

Syntax :- <input type =”email” name=”user email” pattern = “[\w-]+@[\w-]+\)+[\w-]+” title =”Enter your email” />

• placeholder(input and textarea element) :- This attribute represents which type of data ia the user want to display in the field.

Syntax :- <input type=”search” name=”My_Search_Box” placeholder =”Enter Keywords Here” />

• rel(area element) :- This attribute defines a relationship b/w the page and the targeted link and works along with the href attribute.
• Required (input , select and textarea element) :- This attribute indicates that the element when submitted should have a value entered to be valid.

Syntax :- <input type=”text” name=”First_Name” required =”required” />

• reversed(ol element) :- This attribute specifies an ordered list element to display its items in descending order in place of ascending order.

Syntax :-

<ol reversed =”reversed”>

<li> Firefox </li>

<li> Google Chrome </li>

</ol>

Conclusion :-

Hence, HTML5 attributes are easy to understand and learn its functions useful for creating an effective website.

Note :- HTML5 attributes works on the browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1