This article mainly introduces the standard attributes and custom attributes in HTML5. The article also talks about some related knowledge points about accessing custom attributes when JavaScript operates DOM. It is very recommended. Friends who need it can refer to it.
As stated in HTML5 syntax, an element can contain attributes to set various properties for an element.
Some properties 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.
Here is an example using HTML5 attributes that demonstrate how to tag a div element with an attribute and value example named class:
<div class=example>...</div>
Attributes 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 used all capital or mixed, although the most common convention is to always use lowercase.
Standard attributesThe properties listed below are supported by almost all HTML5 tags.
| property | Options | Function |
| accesskey | User-defined | Defines keyboard shortcuts for accessing elements. |
| align | right, left, center | Align the label horizontally. |
| background | URL | Set a background image behind the element. |
| bgcolor | Value, hexadecimal value, RGB value | Set a background color behind the element. |
| class | User-defined. | Classify an element to facilitate the use of cascading style sheets. |
| contenteditable | true, false | Defines whether the user can edit the content of an element. |
| contextmenu | Menu id | Define the context menu for the element. |
| data-XXXX | User-defined. | Custom properties. The author of an HTML document can define his or her own properties. Custom properties must start with data-. |
| draggable | true,false,auto | Defines whether the user can drag elements. |
| height | Number value | Defines the height of a table, image, or table cell. |
| Hidden | Hidden | Defines whether an element should be visible. |
| id | User-defined. | Name elements for easy use of cascading style sheets. |
| item | List of elements. | Used to combine elements. |
| Itemprop | List of entries. | Used to combine entries. |
| spellcheck | true, false | Defines whether an element must have spelling or error checking. |
| style | CSS stylesheet. | Define inline styles for elements. |
| subject | User-defined id. | Defines the entry associated with the element. |
| tabindex | Tab number | Determined to the tab key order of the element. |
| title | User-defined. | Popup 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. |
HTML5 also introduces a new feature, which is to add custom data attributes.
Custom data attributes start with data- and are named based on our needs. Here is a simple example:
<div class=example data-subject=physics data-level=complex>
...
</div>
In the example above, two custom properties called data-subject and data-level are completely valid in HTML5. We can also use the JavaScript API or get their values in CSS in a similar way to get standard attributes.
Add custom attributes to HTML elements and access them through JavaScript. If you have tried it before, you will find that it is easy to ignore tag verification, and HTML5 can provide you with the ability to create and use your own element attributes within a valid webpage.
Create HTML5 files:
If you haven't figured out which one to use, you can copy the following code:
XML/HTML Code Copy content to clipboard