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:
- <!DOCTYPE html
- >
- <
- html
- >
- <
- head
- >
- <
- script
- >
- /*functions here*/
- </
- script
- >
- </
- head
- >
- <
- body
- >
- </
- body
- >
- </
- html
- >
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.
- <
- div id=“product1” data-product-category=“clothing”
- >
- Cotton Shirt
- </
- div
- >
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:
- <
- input type=“button” value=“get attribute” onclick=“getElementAttribute(‘product1’)”
- />
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:
- function getElementAttribute(elemID) {
- var theElement = document.getElementById(elemID);
- var theAttribute = theElement.getAttribute(‘data-product-category’);
- alert(theAttribute);
- }
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.
- //DOM method
- theElement.setAttribute(‘data-product-category’, ‘sale’);
- //dataset version
- theElement.dataset.productCategory = “sale”;
- You can also use DOM methods or data sets to delete a property:
- //DOM method
- theElement.removeAttribute(‘data-product-category’);
- //dataset version
- 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.