Hello Readers,
In the previous chapter we learn about html5 element, and now we learn about attributes
So, basically we have two type of attributes in html5 first can be used with any element so we define them globally and others are defined for specific element(s).
But all attributes have name and value like below. This is always used with start tag. they don't care about case insensitive but mostly used with lowercase because it makes good to your code for a look.
Example -
<div id="name">
here will be some contain
</div>
Below is a list of standard Attributes -
| Attribute |
Attribute Options |
Description |
| valign |
top, middle, bottom |
This is used for to align tag vertically which is in an HTML element(s) |
| align |
right, left, center |
This will make tag align. Horizontally left, right and center. |
| accesskey |
User Defined |
This is used to access an element by keyboard |
| draggable |
true,false and auto |
This make an element draggable. |
| bgcolor |
numeric, hexadecimal, RGB values |
used to add background color on an element |
| contenteditable |
true, false |
this is used to make an element editable. you can edit default content (text etc). It will works same as input box. |
| contextmenu |
Menu id |
It will make context menu for an element. |
| data-XXXX |
User Defined |
It is used for custom attributes. at the end of the article we will learn about it. |
| hidden |
hidden |
This specifies whether an element should be visible or not. |
| item |
List of elements |
This is used for grouping of an elements. |
| spellcheck |
true, false |
Specifies if the element must have it's spelling or grammar checked. |
| subject |
User define (id) |
Element(s) corresponding item |
| Tabindex |
Tab number |
Tab order of an element. |
Custom Attributes -
This is a new HTML5 feature, to use it you can create new attributes, it's known as data attributes.
Its starts with data- and then your needs based name
For example −
<div class="example" data-name="jhon doe" data-level="complex">
...
</div>
Click here more details :)
0 Comment(s)