HTML Code Writing Standard Guide_HTML/Xhtml_Web Page Production
General Conventions
Tag
Self-closing tag, no need to close (for example: img input br hr, etc.);
Optional closing tag (closing tag), need to close (for example: or < /body>);
Reduce the number of tags as much as possible;
- <img src="images/google.png " alt="Google">
- <input type="text" name="title">
- <ul>
- <li>Styleli>
- <li>Guideli>
- ul>
- <span class="avatar" >
- <img src=".. .">
- span>
- <img class="avatar" src="...">
Class and ID
class should be named after function or content, not expression;
class and id should be in lowercase letters, and when composed of multiple words, use dash-separation;
use a unique id as a Javascript hook , and avoid creating classes without style information;
- <div class="j- hook left contentWrapper">div>
- <div id="j- hook" class="sidebar content-wrapper">< /div>
Attribute order
HTML attributes should appear in a specific order to ensure readability.
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
- <a id="..." class="..." data-modal="toggle" href="###"> a>
- <input class="form- control" type="text">
- <img src=".. ." alt="...">
Quotation marks
Uniformly use double quotes for the definition of attributes.
- <span id='j- hook' class=text>Google span>
- <span id="j- hook" class="text">Googlespan>
b Nested
a does not allow nesting of divs. This constraint is a semantic nesting constraint. Different constraints include strict nesting constraints. For example, a does not allow nesting of a.
Strict nesting constraints are not allowed in all browsers; as for semantic nesting constraints, most browsers will handle fault tolerance, and the generated document trees may be different from each other.
Semantic Nesting Constraints
- or
- ,
- used under
- ;
- ;
, < tbody>, ,