Home > Developer > Web Develop
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 /> .
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).
Language properties<meta charset="UTF-8">
Script loadingFor 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 ofIt 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 backtrackingFor 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 PropertyOmit 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 PointIt'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 rulesAfter 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 marksUse double quotation marks ("") instead of single quotation marks (').
More practical than perfectTry 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 OrderHTML 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
