Comprehensive analysis of standard attributes and custom attributes in HTML5

Time:2021-10-20

As explained in the HTML5 syntax, an element can contain attributes and set various properties for an element.

Some attributes are defined as global and can be used on any element, while others are defined as element specific. All properties have a name and a value, which looks like the following example.

The following is an example of using HTML5 attributes to show how to mark a div element with an attribute named class and the value “example”:

<div class=”example”>…</div>
Property can only be specified in the start tag and must not be used in the end tag.

HTML5 attributes are case insensitive and can be all uppercase or mixed, although the most common convention is to always use lowercase.

Standard properties
The attributes listed below are supported by almost all HTML 5 Tags.

attribute option function
accesskey User defined Defines keyboard shortcuts for accessing elements.
align right, left, center Align labels horizontally.
background URL Set a background image behind the element.
bgcolor Numeric value, hexadecimal value, RGB value Set a background color behind the element.
class User defined. Categorize an element to facilitate the use of cascading style sheets.
contenteditable true, false Defines whether users can edit the contents of an element.
contextmenu Menu id Define a context menu for the element.
data-XXXX User defined. Custom properties. Authors of HTML documents can define their own attributes. Custom attribute must start with ‘data -‘.
draggable true,false, auto Defines whether users can drag elements.
height Numeric value Defines the height of a table, image, or table cell.
hidden hidden Defines whether the element should be visible.
id User defined. Named elements to facilitate the use of cascading style sheets.
item List of elements. Used to combine elements.
itemprop List of entries. Used to group items.
spellcheck true, false Defines whether an element must have spelling or error checking.
style CSS style sheets. Define inline styles for elements.
subject User defined ID. Defines the entry associated with the element.
tabindex Tab number The tab key order of the element.
title User defined. The pop-up title of the element.
valign top, middle, bottom Vertical alignment of tags within HTML elements.
width Numeric value. Defines the width of tables, images, and table cells.

Custom properties
HTML5 also introduces a new feature, that is, you can add custom data attributes.

The custom data attribute starts with data – and is named based on our requirements. Here is a simple example:

<div class=”example” data-subject=”physics” data-level=”complex”>

</div>
In the above example, two custom attributes called data subject and data level are fully valid in HTML5. We can also use JavaScript APIs or get their values in CSS in a similar way to getting standard properties.

Add custom attributes to HTML elements and access them through JavaScript. If you have tried before, you will find that it is easy to ignore tag verification, and HTML5 can provide you with the function of creating and using your own element attributes in effective web pages.

To create an HTML5 file:

If you haven’t figured out which one to use, you can copy the following code:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html   
  2. >  
  3.     
  4. <  
  5. html  
  6. >  
  7.     
  8. <  
  9. head  
  10. >  
  11.     
  12. <  
  13. script  
  14. >  
  15.     
  16. /*functions here*/     
  17. </  
  18. script  
  19. >  
  20.     
  21. </  
  22. head  
  23. >  
  24.     
  25. <  
  26. body  
  27. >  
  28.     
  29. </  
  30. body  
  31. >  
  32.     
  33. </  
  34. html  
  35. >  

 
Set custom elements in the body, and use JavaScript elements to access the script area in the head part.

Create element:

First, add some simple content and elements such as custom attributes and IDS so that we can identify JavaScript examples.

XML/HTML CodeCopy contents to clipboard
  1. <  
  2. div id=“product1” data-product-category=“clothing”  
  3. >  
  4.     
  5. Cotton Shirt     
  6. </  
  7. div  
  8. >  

 
As you can see, the custom attribute is in the form of “data – *”, and set the name or the name you selected in the “data -” section. Using custom attributes in HTML5 is the only effective way. Therefore, if you want to verify whether the web page is effective, you can use this method.

Of course, the project details section determines whether custom attributes are useful to you and how they should be named. This example can be applied to retail websites of different product categories.

Custom attributes allow you to set elements in a special way using JavaScript code in the page, such as animation. If there are no standard HTML elements, we recommend using custom attributes.

Add test button

Events can be executed on the page by using its own JavaScript elements, provided that the following code is added to the page:

XML/HTML CodeCopy contents to clipboard
  1. <  
  2. input type=“button” value=“get attribute” onclick=“getElementAttribute(‘product1’)”  
  3. />  

 
Get properties:

The most common way to access attributes in JavaScript is to use “getattributes”, which is also the first step we need to do. Add the following functions in the head script area of the page:

JavaScript CodeCopy contents to clipboard
  1. function getElementAttribute(elemID) {     
  2. var theElement = document.getElementById(elemID);     
  3. var theAttribute = theElement.getAttribute(‘data-product-category’);     
  4. alert(theAttribute);     
  5. }   

Here, we added the alert value to the example. Of course, you can also add it in the script according to your own needs.

Get data:

You can use the element dataset to replace the DOM “getattributes”, which may be more effective. Especially in some cases, the code iterates through multiple attributes. However, the browser’s support for the dataset is still very low, so keep this in mind. This code can execute the same process as / / the following methods.

//var theAttribute = theElement.getAttribute(‘data-product-category’); 
var theAttribute = theElement.dataset.productCategory;
Delete “data -” from the dataset, starting with the attribute name, and it is still contained in the HTML.

Please note that if there is a hyphen in your custom attribute name, it will take the form of camel case when accessed through data, that is (“data product category” becomes “productcategory”).

Other modules and functions

We have obtained this property, and the script can still set and delete it. The following code demonstrates how to set properties using standard JavaScript modules and datasets.

JavaScript CodeCopy contents to clipboard
  1. //DOM method       
  2.     
  3. theElement.setAttribute(‘data-product-category’‘sale’);      
  4. //dataset version       
  5.     
  6. theElement.dataset.productCategory = “sale”;     
  7. You can also use DOM methods or data sets to delete a property:
  8.   
  9. //DOM method     
  10. theElement.removeAttribute(‘data-product-category’);    
  11. //dataset version     
  12. theElement.dataset.productCategory = null;   

Implementing custom attributes in HTML5 is not very complicated technically. The real difficulty is to choose whether the method used is suitable for your project; If applicable, how to make it more effective? Remember, it is still too early to enable the dataset method as a page function. After all, many browsers do not support this function.