Lesson 7: HTML5 Attributes & Custom Data Attributes

html5_data_attributes

html5 data attributes

HTML5 Attributes

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>

NOTE:

html5 Attributes can also be set only in the opening tag!

The basic Attributes you need to remember

  • Id: gives a unique name of the element via which you can access the element in CSS or JavaScript.
  • Class: tells the element to use a particular CSS class definition.
  • Style: specifies an inline CSS style for an element

Example:

<div class=”sample” id=”div1″>/*…*/</div>

NOTE:

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.

HTML5 data attributes

Data Attributes

Custom Data Attributes

For creating a new Custom Data Attribute, first of all you must know about its structure. The structure is as follows:

data-name= “value”

  1. Attribute Name

NOTE:

  • 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.

 

  1. Attribute Value

The attribute value can be any string, depending on your requirements

  1. Getting an attribute value

You can get the values of the custom attribute using JavaScript APIs or CSS in a similar way as you do for the standard attributes.

NOTE:

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.

<div id=”customDiv” data-type=”programming” data-level=”senior”>/*…*/</div>

images (1)

Getting an attribute value using JavaScript

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!

var mydiv=document.getElementById(‘customDiv’)

Where customDiv is:

<div id=”customDiv” data-type=”programming” data-level=”senior”>/*…*/</div>

There are two ways to retrieve the value of a custom data attribute using JavaScript:

  • Using the getAttribute() method of JS

Example:

var mydiv=document.getElementById(‘customDiv’)

 

//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.

Example:

//Using JavaScript’s dataset property

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>

<script>

var type=mydiv.getAttribute(“data-type”);

customDiv.setAttribute(“data-type”, “testing”);

customDiv.removeAttribute(“data-type”);

</script>

</body>

</html>

You can practice HTML5 attributes, there are many examples of html5 attributes including video on web.

You Might Also Like

2 Comments

  1. 2

Comments are closed.