What are the rules for using html5 tags?

Usage rules: 1. The class attribute of the tag must use lowercase letters, use "-" to separate the words, and cannot be named with built-in styles; 2. The id attribute of the tag must remain unique on the page; 3 , Tag names must use lowercase letters; 4. The use of tags must comply with the nesting rules of tags; 5. The use of tags must follow the semantics of the tags.

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

What are the rules for using html5 tags

1. Naming rules

[Mandatory]class: all words must be in lowercase letters, words They are separated by - and must represent the content or function of the corresponding module or component. They must not be named after the built-in HTML style. The naming should have clear semantics.

[Mandatory]id: must remain unique in the page, and the naming should have clear semantics.

2. Tag

[Mandatory]The tag name in Html must use lowercase letters.

[Mandatory] The closing of the tag must comply with the regulations of HTML5.

[Mandatory] The use of tags must comply with the nesting rules of tags. For example: p must not be placed in p, and tbody must be placed in table.

[Recommendation] The use of tags must follow the semantics of the tags, for example:

p - Paragraph

h1,h2,h3,h4,h5,h6- Hierarchical title

strong,em - emphasize

ins - insert

del - delete

abbr - abbreviation

code - code identification

cite - The title of the work cited from the source

q - Quote

blockquote - One paragraph or long quotation

ul - Unordered list

ol - Ordered list

dl,dt,dd - Definition list

[Recommendation] Tables must not be used for layout when CSS can achieve the same requirement.

3. Attributes

[Mandatory] Attributes must use lowercase letters, and their attribute values ​​must be surrounded by double quotes.

[Suggestion] Boolean type suggestions do not add attribute values. It is recommended that custom attributes be prefixed with xxx- and data-

4 is recommended. DOCTYPE

[Mandatory] Use doctype to enable standard mode. It is recommended to use uppercase DOCTYPE

5. Language encoding

[Suggestion] It helps to improve the accessibility of the page. The correct lang attribute must be set, for example:

[Mandatory] The page must specify the character encoding meta, and it must be the first direct child element of head, for example: .

6. Introduction of CSS and JavaScript

[Mandatory] You must specify rel="stylesheet" when introducing css, and you must specify the type attribute when introducing css and javascript.

[Recommendation]Javascript code must be placed at the end of the page or loaded asynchronously.

7. Head content

[Mandatory] The Title tag must be set as a direct child element of the head and immediately following the charset statement.

[Mandatory] Favicon is guaranteed to be accessible, for example:

[Mandatory] The Viewport attribute must be specified.

8. Pictures

[Mandatory] Prohibit the src value of img from being empty, and the default src attribute value must also be added to lazy-loaded pictures.

[Recommendation] Add alt attribute value to important images.

[Recommendation]Add width and height attributes to avoid page jitter.

9. Control title

[Mandatory] A control with a text title must use the label tag to associate it with its title, for example:

<label><input type="checkbox"name="confirm" value="on"> 我已确认上述条款</label>或<labelfor="user">用户：</label><inputtype="text" name="user" id="user">

10. Button

[Mandatory] The type attribute value must be specified when using the button element

11. Accessibility

[ Recommendation] When using JavaScript for form submission, native submission functionality should be enabled to work properly.

[Suggestion] Specify the type attribute of the input box according to the content type, for example:

12. Multimedia

[Recommendation] When using audio and video tags to play audio and video, you should pay attention to the format:

Audio format: MP3, WAV, Ogg

Video format: MP4, WebM, Ogg

13. Comments

[Mandatory] Detailed comments must be made on the CSS and javascript code of the page or module

Recommended tutorial: " html video tutorial》

The above is the detailed content of What are the rules for using html5 tags?. For more information, please follow other related articles on the PHP Chinese website!