HTML Attribute

It provides additional information about HTML elements and also sometimes used to provide dynamic functionality to element

Every elements can have attributes
Attributes are always placed inside the element's Start Tag
Except Few, All attributes are made up of pairs (Syntax: Name_Of_Attribute= "Value_Of_Attribute")

Example:

You can write or copy the script in your text editor

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Attribute Example</title>
  </head>
  <body>
    <h1 title="Shows you title">Mouse over me</h1>
    <p>My First paragraph.</p>
    <img src="viztro.jpg" width="100" height="60"> 
  </body>
</html>

Above example Explained
- All the word above in green color are the Name_Of_Attributes and in blue color Some_Value_Of_Attributes
- Every Attributes are having its own property
- Like above lang="en" here, it means "The Language of this HTML Document is English"

Approx all the elements can use Global Attributes

These Attributes are: id, class, title, style, dir, lang
Always used inside the Start Tag of an element
Syntax:<element attribute="value">
Alert! The element <title> and Attribute title are not same

Example:Put all below codes inside the <body> Element
label_outlineid Attribute
<p id="teacher">This para is only for teachers</p>
<p id="student">This para is only for students</p>This Attribute is used to uniquely identify any element within an HTML page.
The above example, both of them are <p> elements but via id you can identify which is for teacher and which is for student 
You can even directly access the element via URL, Just by adding #ID_Name to the end of page URL
This Attribute are useful when you integrate CSS(Design) or Javascript or Jquery to provide some functionality
We will discuss CSS, javascript, jquery in other separate tutorial,for now just remember the above points
label_outlineclass Attribute
<p className="teacher">This para is only for teachers</p>
<p className="student teacher">This para is for student and teacher both</p>
<p className="student">This para is only for students</p>  
This Attribute specifies the class of element
You can add more class name in class attribute by just providing space in between them like shown above
The above example, all of them are <p> elements but via class you can identify which is for teacher,student and which is for both 
You will learn more about the use of the class attribute when you will learn CSS(Design) or Javascript or Jquery to provide some functionality
We will discuss CSS, javascript, jquery in other separate tutorial,for now just remember the above points
label_outlinetitle Attribute
<p title="teacher">This para is only for teachers</p>
<p title="students">This para is only for students</p>MOUSE OVER ME,I WILL SHOW YOU MY TITTLE
This Attribute specifies the suggested title of the element
when you take your mouse to element having tittle attribute, it will show you a small pop-up message with tittle value you write
label_outlinestyle Attribute
<p style="text-align: center;color:purple;">
I love to be colorful </p>Output: I am in center with PURPLE colored
This Attribute specifies some style rules within the element
It is a part of CSS(Related to Design)
label_outlinedir Attribute
<p dir="ltr">Default. My text is from Left-to-right</p>
<p dir="rtl">My text is from Right-to-left</p>
<p dir="auto">Let the browser decide my text direction</p>This Attribute specifies the direction of text
The output is below
Default. My text is from Left-to-right
My text is from Right-to-left 
Let the browser decide my text direction
Note! If you are using mobile browser,may be the output is not same
label_outlinelang Attribute
<p lang="en">This is a English Paragraph</p>
<p lang="es">Este es un párrafo español</p>This is a English Paragraph;
Este es un párrafo español
This Attribute specifies the language of the element's content
The 1st <p> element is in ENGLISH language and the other element in SPANISH language

New in HTML5:turned_in_notHTML5 Attributes
AttributeValueDiscription
contenteditabletrue
falseSpecifies that the content of an element is editable or not
data-*anyvalueUsed to store custom data private to the page that can be used via JavaScript to provide some functionality
draggabletrue
false
autoSpecifies that an element is draggable or not
hiddenNo_ValueSimply Keyword, Used to hide the elements
spellchecktrue
falseSpecifies that the element has its spelling and grammar checked or not
translateyes
no*Not Supported in browsers; Use Google translator instead
Specifies the content inside an element should be translated or not

Attribute	Value	Discription
`contenteditable`	true false	Specifies that the content of an element is editable or not
`data-*`	anyvalue	Used to store custom data private to the page that can be used via JavaScript to provide some functionality
`draggable`	true false auto	Specifies that an element is draggable or not
`hidden`	~~No_Value~~	Simply Keyword, Used to hide the elements
`spellcheck`	true false	Specifies that the element has its spelling and grammar checked or not
`translate`	yes no	*Not Supported in browsers; Use Google translator instead Specifies the content inside an element should be translated or not

Example:

Put all below codes inside the <body> Element

contenteditable Attribute
```
This paragraph is editable
```
OUTPUT:
This paragraph is editable
- Now, You can edit the above paragraph
data-* Attribute
```
<ul>
 <li data-book="html">html</li>
 <li data-book="css">css</li>
</ul> 
```
OUTPUT:
- html
- css
- Can be used to provide more functionality using JavaScript
draggable Attribute
```
This paragraph is draggable
```
OUTPUT:
This paragraph is draggable
- Now, You can drag the above paragraph
- Some elements in some browser may not support without JavaScript
spellcheck Attribute
```
This is a paragraph.
```
OUTPUT:
This is a paragraph.
- Just Modify the above output, you will see the result
- Note! If you are using mobile browser,may be the output is not same