Hello all.. In this post you are going to learn about HTML key attributes you can use in HTML5. As discussed earlier in this series HTML5 elements can contain attributes that are used for setting different properties of the element. All attributes consist of a name and a value.
Html5 attributes is an important lesson for HTML5 tutorials. It is for HTML5 beginners and advance level learners.
html5 attributes are case insensitive, and can be used with both uppercase and lower case.
For example, in the following code sample class is the name of the attribute and test is its value: <p class=”sample”>… </p>
html5 Attributes can also be set only in the opening tag!
The basic Attributes you need to remember
- Class: tells the element to use a particular CSS class definition.
- Style: specifies an inline CSS style for an element
Above example, show you the value of the class is a sample which is a string via which you can apply a CSS style/class to the element. Also the value of the id attribute is div1 which is a string via which the element can be accessed in Java Script or CSS.
List of standard attributes which you can use is here, New custom attributes can also be created.
Custom Data Attributes
For creating a new Custom Data Attribute, first of all you must know about its structure. The structure is as follows:
- Attribute Name
- The attribute name have to be at least one character long and must use as prefix data-.
- The title attribute can be written with an upper or lower case like Title and/or TITLE.
- Attribute Value
The attribute value can be any string, depending on your requirements
- Getting an attribute value
Custom data attributes are intended to store custom data which is private to the page or application. You can use custom data attributes in case if there is no appropriate attributes or elements.
If we have to access a particular HTML5 element in Java Script, the element must be a unique id. After that you can get a reference to the specified element using the getElementById () JS function, which accepts as a parameter the name of the id of an element!
Where customDiv is:
- Using the getAttribute() method of JS
//Using getAttribute() property
var type=mydiv.getAttribute(“data-type”); //returns “programming”
customDiv.setAttribute(“data-type”, “testing”); //changes “data-type” to “testing”
customDiv.removeAttribute(“data-type”); //removes “data-type” attribute entirely
- To access the dataset property of the element.
var type=mydiv.dataset.type; //returns “programming”
customDiv.dataset.type=testing; //changes “data-brand” to “testing”
customDiv.dataset.type=null; //removes “data-brand” attribute
HTML5 document should look like for example:
<!DOCTYPE html><html><head><title>Sample</title><meta charset=”utf-8″ /></head><body><div id=”customDiv” data-type=”programming” data-level=”senior”></div>
You can practice HTML5 attributes, there are many examples of html5 attributes including video on web.