Comprehensive analysis of standard attributes and custom attributes in HTML5

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:

 
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.

 
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:

 
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:

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.

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.