Front-end Coding specification-HTML article

Document type

It is recommended to use the HTML5 document type declaration:<!DOCTYPE html>

(We recommend using HTML in text/html format.) Avoid using XHTML. XHTML and its properties, such as Application/xhtml+xml's application support and optimization space in the browser, are very limited.

It is best not to close tags with no content elements in HTML, for example: Use <br> instead <br /> .

Character encoding

By explicitly declaring character encodings, you can ensure that your browser is quick and easy to determine how the page content is rendered. Such
The advantage is that you can avoid using character entity tags (character entity) in HTML, all with
Document encoding is consistent (UTF-8 encoding is generally used).

<meta charset="UTF-8">

Language properties

Script loading

For performance reasons, scripting asynchronous loading is critical. A script is placed, for example, its loading will block DOM parsing until it is fully loaded and executed. This causes a delay in the display of the page. In particular, some heavyweight scripts have a huge impact on the user experience.

Asynchronous load scripts can mitigate this performance impact. If you only need to be compatible with ie10+, you can add the async attribute of HTML5 to the script, which prevents parsing of the blocking DOM, and even if you can write the script reference in it.

If you need to be compatible with older browsers, practice indicates that you can use a script loader to inject scripts dynamically. You can consider Yepnope or LABJS. One problem with the injection script is that it waits until the CSS object document is ready before it starts to load (briefly after the CSS has been loaded), which causes a delay to the JS that needs to be triggered in time, which in some way affects the user experience.

As described above, when older browsers (ie9-) are compatible, the following best practices should be followed.

The script reference is written before the body end tag and with the async attribute. While the script is not loaded asynchronously in an old browser, it only blocks DOM parsing before the body end tag, which greatly reduces its blocking effect. In a modern browser, the script will be loaded when the DOM parser finds the script tag at the end of the body, which is loaded asynchronously and does not block CSSOM (but its execution still occurs after CSSOM).

In all browsers, recommended

Only in modern browsers, recommended

The semantics of

It is used based on the initial meaning of the element (sometimes falsely referred to as the "label") when it is created. For example, use the P element to define a text paragraph, define a link anchor point with a element, and so on.

The use of HTML elements based on destination is significant for accessibility, code reuse, and code efficiency.

In simple terms, a rich semantic label is always clearer than a full-screen div!

Multimedia backtracking

For media on the page, like pictures, videos, canvas animations, etc., make sure they have an alternative access interface. Image files We can use meaningful alternative text (ALT), video and audio files that we may add captions or subtitles to.

Providing alternative content is important for usability. Imagine how a blind user can know what a picture is, and if there is no alt. (The Alt attribute of the picture is not filled in, and a purely decorative picture can be used to do so:).

Type Property

Omit the style sheet from the Type property on the script. Since the default type values in HTML5 are Text/css and Text/javascript, the Type property is generally negligible. Even in older versions of browsers it is safe to do so.

ID and Anchor Point

It's usually a good idea to add an ID to all header elements in the page. In this way, the URL of the page in the hash with the corresponding ID name, that is, the formation of a stroke, convenient to jump to the corresponding element location.

Formatting rules

After each block element, list element, and table element, add a new blank line and indent its descendant elements. Inline elements are written on one line, and block elements have lists and tables to be added to another line.

(It is acceptable to merge all elements into one row if the line breaks cause an unpredictable problem, and the format warning is better than the error warning).

HTML quotation marks

Use double quotation marks ("") instead of single quotation marks (').

More practical than perfect

Try to follow HTML standards and semantics, but not at the expense of practicality. Use as little complexity and as few tags as possible to solve the problem at all times.

Attribute Order

HTML attributes should appear in a specific order to ensure legibility.

1. Class

2. Id

3. Name

4, data-*

5, SRC, for, type, href, value, Max-length, max, Min, pattern

6, placeholder, title, alt

7, aria-*, role

8, required, ReadOnly, disabled

Class is designed for highly reusable components, and in theory they should be in the first place. IDs are more specific and should be used sparingly (for example, in-page bookmarks), so they are in second place.

If improper or supplement please advise!

Front-end Coding specification-HTML article