HTML Code Writing Guide

Common Convention Tags

Self-closing tags, no need to be closed (for example: img input br hr, etc.);
An optional closing tag, which must be closed (for example: </li> or </body>);
Minimize the number of tags;

Class and ID

Classes should be named after their function or content, not their presentation.
The letters of class and id are lowercase. When multiple words are composed, they are separated by hyphens.
Use unique ids as JavaScript hooks and avoid creating classes without style information.

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

quotation marks

Double quotes are used uniformly in attribute definitions.

bNested

a does not allow div to be nested. This constraint belongs to semantic nesting constraint. Different from it is strict nesting constraint, for example, a does not allow a to be nested.

Strict nesting constraints are not allowed in all browsers; while semantic nesting constraints are mostly handled by browsers with tolerance, and the generated document trees may be different from each other.

Semantic nesting constraints

<li> is used under <ul> or <ol>;
<dd>, <dt> are used under <dl>;
<thead>, <tbody>, <tfoot>, <tr>, <td> are used under <table>;

Strict nesting constraints

inline-Level elements can only contain text or other inline-Level elements;
Interactive elements such as <a>, <button>, and <select> cannot be nested in <a>;
Block-level elements such as <div>, <h1>~<h6>, <p>, <ul>/<ol>/<li>, <dl>/<dt>/<dd>, and <form> cannot be nested in <p>.

Boolean properties

In the HTML5 specification, attributes such as disabled, checked, and selected do not need to be set with values.

Semantic
HTML without CSS is a semantic system rather than a UI system.

Normally, each label has semantics. The so-called semantics means that your clothes are divided into coats, pants, skirts, underwear, etc., each with corresponding functions and meanings. So you can't put your underwear around your neck. -- A trace

In addition, the semantic HTML structure helps machines (search engines) understand it, and when multiple people collaborate, they can quickly understand the developer's intentions.

Common tag semantics

Think of the page you build as a book, with the semantics of the tags corresponding to their functions and meanings;

Book title: <h1>
Chapter titles of the book: <h2>
Article title within section: <h3>
Subtitle/Subtitle: <h4> <h5> <h6>
Chapter paragraphs: <p>

HEAD
Document Type

Adding a standards mode declaration to the first line of every HTML page ensures consistent behavior in every browser.

Character encoding

Use utf-8 encoding without BOM as the file format;
The meta element specifying the character encoding must be the first direct child element of the head element.

IE compatibility mode

Give priority to using the latest versions of IE and Chrome kernel.

SEO Optimization

viewport

Viewport: generally refers to the size of the browser window content area, excluding toolbars, tabs, etc.
Width: browser width, the width of the visible area of ​​the page in the output device;
device-width: device resolution width, the visible width of the output device screen;
initial-scale: initial scaling ratio;
maximum-scale: maximum zoom ratio;
Optimize for mobile devices, set the width of the visible area and the initial zoom ratio.

iOS Icons

The apple-touch-icon image is automatically processed with rounded corners and highlights;
apple-touch-icon-precomposed disables the system from automatically adding effects and directly displays the original design;

favicon

When no favicon is specified, most browsers will request favicon.ico in the root directory of the Web Server. To ensure that the favicon is accessible and avoid 404, you must follow one of the following two methods:

Place the favicon.ico file in the Web Server root directory;
Use link to specify favicon;

HEAD Template

HTML Comments

Module comments