What is Atributes
What is Attributes ?
Attribute provides additional information about that element. HTML attributes are added in opening tag and can have some value. Attributes are written in name/value pair like: <tag attribute="value">. Attribute once used can't be repeat in same element.For some attributes like class, we can pass multiple values, but class attribute can be used only once in a tag.
Example
class,
id,
title,
style,
etc.
There are four type of tags
- Global Attribute
- Boolean Attribute
- Presentational Attributes
- Event Attributes
Global Attribute
Those attributes which are meant for all html elements are globleattributes .
Example
class,
id,
Boolean Attribute
Those attribute which are with attribute name only, no value.
Example
disabled,
hidden,
reversed,
etc.
Presentational Attributes
Those attributes which are used to style HTML Elements are called Presentational attribute.
Example
style,
size,
color,
border
cellspacing
etc.
Event Attributes
Those attributes which are used to add javascript event on html element
are Presentational attribute.
Example
onclick,
onmouseover,
onmouseout,
etc.
HTML Attributes |
||
|---|---|---|
| Attribute | Element | Description |
| class | ="card", ="text-denger", ="text" |
used to group elements for css |
| id | ="main", ="footer", ="image" |
Assign a unique id for the element |
| style | ="color:red; background-color:powderblue;" |
CSS attribute for tags (Specifies an inline style for an element) |
| title | ="this is a title tag example" |
Specifies extra information about an element (displayed as a tooltip) |
| lang | ="en", ="en-US" |
Language of text |
| dir | ="ltr", ="rtl" |
direction of text,ltr(left to right) or rtl(right to left) only |
| data- | data-animal-type="bird", data-fruits-type="mango" |
data attributes are used in html5 to define custom attribute |
| type | <input>, <audio>, <video>, <ifreme>, <embed>, <source>, <script>, <track>, <ol> <li> |
Defines type of element |
| src | <img>, <script>, <input>, <audio>, <video>, <embed>, <iframe>, <track>, <source> |
Source of media element |
| href | <a>, <link>, <base> |
Hypertext reference, path of hyperlink |
| width | <img>, <embed>, <video>, <iframe> |
Set width of element |
| height | <img>, <embed>, <video>, <iframe> |
Set width of element |
| value | <input>, <option>, |
Set default value of element visible at pageload |
| size | <input>, <select> |
Width of element in px. For input type text, size means no of characters |