HTML Global Properties

HTML5 adds 8 new global properties in addition to the original global properties.

1. ID attribute specifies the unique ID of the element

The id attribute specifies the unique ID of the HTML element. The ID must be unique within the HTML document. The id attribute can be used as a link anchor, either through JavaScript (HTML DOM) or through CSS to change or add a style to an element with a specified ID. In HTML5, the id attribute can be used for any HTML element, and it validates any HTML element, but it is not necessarily useful. In HTML 4.01, the id attribute cannot be used for: <base>,

Syntax: <element (Element) id= "id" >

The property value defines the unique ID of the element. Naming rules: ①: Cannot start with a number, must start with a A-Z or a-Z. ②: The following characters can be: letter (a-za-z), Number (0-9), hyphen ("-"), underscore ("_"), colon (":"), and The Dot ("."). ③: The value is case sensitive.

2, class attribute specifies the name of the element (ClassName)

The class attribute defines the name of the element. The class property is typically used for classes that point to a style sheet, but it can also be used by JavaScript to modify the class name of an HTML element through the HTML DOM. In HTML5, the class attribute can be used with any HTML element, and it validates any HTML element, but it is not necessarily useful. In HTML 4.01, the class attribute cannot be used for: <base>,

Syntax: <element class= "ClassName" >

The name of the class for the attribute value definition element. To specify more than one class for an element, you can separate the class name with a space. <span class= "A B C" >,html element allows multiple classes to be used. Naming rules: ①: Must start with a letter A-Z or a-Z. ②: Can be the following characters: (a-za-z), Number (0-9), hyphen ("-") and underscore ("_"). ③: In HTML, the class name is case-sensitive.

3. The style attribute specifies the inline style of the element (line style)

The Style property specifies the inline style of the element. The Style property overrides any global styling, such as the <style> label or the style specified in the external style sheet. In HTML5, the style property can be used with any HTML element, and it validates any HTML element, but it is not necessarily useful. In HTML 4.01, the style attribute cannot be used with: <base>,

Syntax: <element style= "Style:value;" >

The property value defines one or more CSS properties and values separated by semicolons, for example: <p style= "Font-size:16px;color:blue;text-align:center;" ></p>

4. The title attribute provides additional information about the element

Descriptive information can be displayed in ToolTips, which typically display a ToolTip text when the mouse is moved over the element. In HTML5, the title property can be used with any HTML element, and it validates any HTML element, but it is not necessarily useful. In HTML 4.01, the title attribute cannot be used for: <base>,

Syntax: <element title= "Text" >

The property value defines the hint text for the element.

5. The Lang property sets the language code for the contents of the element

The attribute specifies the language of the element content, and in HTML5, the lang attribute can be used for any HTML element, which validates any HTML element, but is not necessarily useful. In HTML 4.01, the lang attribute cannot be used for: <base>, <br>, <frame>, <frameset>,

Syntax: <element lang= "Language_code" >

The attribute value is a language code that specifies the language code for the content of the element.

6. Dir property sets the text direction of the content in the element

In HTML5, the Dir property can be used with any HTML element, and it validates any HTML element, but it is not necessarily useful. In HTML 4.01, the dir element cannot be used for: <base>, <br>, <frame>, <frameset>,

Syntax: <element dir= "Ltr|rtl|auto" >

Value Description: ①:LTR is the default value, left-to-right text direction, normal display. ②:rtl defines the right-to-left text direction. The ③:auto definition allows the browser to determine the direction of the text based on content, and is recommended only if the text direction is unknown.

7. accesskey properties set keyboard shortcuts for accessing elements

The AccessKey property specifies the shortcut key for the element that activates (causes the element to focus). Note: There are different ways to access shortcut keys in different browsers in different operating systems. However, in most browsers, shortcut keys can be set to a different set of combinations.

How to use accesskey shortcut keys under various browsers:

①:ie: Hold down the ALT key, click the shortcut key defined by accesskey (the focus will move to the link), and then press ENTER.

②:chrome: Hold down the ALT key and click the shortcut key defined by accesskey.

③:firefox: Press and hold the Alt+shift key and click the shortcut key defined by accesskey.

④:safari: Hold down the ALT key and click the shortcut key defined by accesskey.

⑤:opera: Hold down the Shift key and click ESC to select the list of accesskey shortcut keys defined on this page.

in HTML5, the AccessKey property can be used for any HTML element, and it validates any HTML element. But it's not necessarily useful. in HTML 4.01, the accesskey attribute can be used for: <a>, <area>, <button>, <input>, <label>, < Legend> and <textarea>.

Syntax: <element accesskey= "character" >

The property value is used to specify the accelerator key for the active element.

8. TabIndex property Sets the Tab control order of the element

The TabIndex property specifies the order of elements when navigating with the "tab" key. In HTML5, the TabIndex property can be used with any HTML element, and it validates any HTML element, but it is not necessarily useful. In HTML 4.01, the TabIndex attribute can be used for: <a>, <area>, <button>, <input>, <object>, <select> and < ;textarea>.

Syntax: <element tabindex= "Number" >.

The value of the property is numeric, which specifies the tab control order of the element, 1 is first, and so on.

The following are the newly added properties of HTML5:

9. The Data-* property is used to store custom data for the page

This property is used to store custom data that is applied after a private page, and you can embed data in all HTML elements. Custom data allows the page to have a better interactive experience, without the need to use Ajax or go to the server to query the data.

The Data-* property consists of the following two parts: ①: The property name does not contain uppercase letters and must have at least one character after data-. ②: This property can be any string. Note: The custom attribute prefix "data-" is ignored by the client.

Syntax: <element data-*= "somevalue" >

A property value is a value that specifies a property in string form.

10. The contenteditable attribute specifies whether the contents of an element can be edited

The Contenteditable property specifies whether the element content can be edited. Note: When the Contenteditable property is not set in the element, the element is inherited from the parent element.

Syntax: <element contenteditable= "True|false" >

Value Description: ①: The element is editable when it is true. ②: When the value is False, the element is not editable.

11. ContextMenu property specifies the context menu for an element

The ContextMenu property specifies the context menu for the element, which is displayed when the user right-clicks the element. The value of the ContextMenu property is the ID of the <menu> element that needs to be opened.

Syntax: <element contextmenu= "menu_id" >

12. The SpellCheck property detects if the element is spelled incorrectly

The SpellCheck property specifies whether the content of the element is checked for spelling.

The following text can be checked for spelling: ①: The value in the INPUT element of type text, not a password. The value in the ②:textarea element. ③: The value in an editable element.

Syntax: <element spellcheck= "True|false" >

Value Description: ①: When True, specifies that the text of the element should be checked for spelling. ②: When the value is false, specifies that the text of the element should not be checked for spelling.

13. Hidden attribute rules to hide elements

　　If this property is used, the element is hidden, the hidden elements are not displayed, and the hidden property can be set so that the user sees an element when certain conditions are met, such as checking the check box, and so on. You can then use JavaScript to remove the hidden property so that the element becomes visible.

Syntax: <element hidden>

14. The Draggable property specifies whether an element can be dragged

The Draggable property specifies whether the element can be dragged. Note: links and images are draggable by default.

Syntax: <element draggable= "True|false|auto" >

Value Description: ①: The element is draggable when it is true. ②: When the value is False, the element is not draggable. ③: When the value is auto, the default features of the browser are used.

15. The Dropzone property specifies whether data is copied, moved, or linked, or deleted

The Dropzone property specifies whether the dragged data is copied, moved, or linked when it is dragged and dropped onto the element. There are currently no mainstream browsers that support the Dropzone property.

Dragging data results in a copy of the dragged data: <div dropzone= "Copy" ></div>

Syntax: <element dropzone= "Copy|move|link" >

Value Description: ①: Dragging data results in a copy of the dragged data when it is copy. ②: When the value is move, dragging data causes the dragged data to move to the new location. ③: When the value is link, dragging data generates a link to the original data.

16. The Translate property specifies whether the value of an element needs to be translated when the page is loaded

The Translate property specifies whether the element content is to be translated. You can use class= "Notranslate" instead. There are currently no mainstream browsers that support the Translate property.

Syntax: <element translate= "Yes|no" >

Value Description: ①: Specifies that the element content needs to be translated when the duty is yes. ②: When the value is no, the specified element content does not need to be translated.

HTML Global Properties