HTML code specification

1. Code style

1.1 Indent & line feed

  • Use 4 Spaces as an indentation hierarchy. No 2 Spaces or TAB characters are allowed
  • Each line must contain no more than 120 characters

Explanation: Long code is difficult to read and maintain. However, considering the particularity of HTML, it is not mandatory.

1.2 named

1.2.1 Naming HTML files

  • HTM index.html index.asp file name (lowercase)
  • The principle of naming each sub-page should first take the English translation of the column name as a single word
  • If the column name is too many and complicated to be named by English words, the column name pinyin or the first letter of pinyin will be used

1.2.2 Label User-defined attribute naming

1.2.3 the name and id

Avoid using the same name and ID on the same page

Explanation: Internet Explorer confuses the id and name attributes of an element, and document.getelementById may obtain an unwanted element. So be careful when naming the element’s ID and name attributes

A good practice is to use different nomenclature for ID and name

<input name="foo">
<div id="foo"></div>
<script>
// IE6 will display INPUT
alert(document.getElementById('foo').tagName)
</script>
Copy the code

1.2.4 Naming the File Storage Location

  • Image file: IMG
  • Storage of javascript js
  • Store the CSS file: CSS

1.2.5 Importing Library Files/plug-ins

Import the JS library file, the file name must contain the library name and version number and whether it is a compressed version. Such as jquery – 1.4.1. Min. Js

To import plug-ins, the file name format is library name + plug-in name. Such as jQuery. The bootstrap. Js

1.3 the label

1.3.1 Label names must use lowercase letters

1.3.2 Labels that do not need to be self-closed cannot be self-closed

Common tags that do not need to be self-closed include INPUT, BR, IMG, and HR

<! Recommend -- -- -- >
<input type="text" name="title">

<! -- Not recommended -->
<input type="text" name="title" />
Copy the code

1.3.3 Closing tags that are allowed to be omitted in HTML5 are not allowed to be omitted

<! Recommend -- -- -- >
<ul>
  <li>first</li>
  <li>second</li>
</ul>

<! -- Not recommended -->
<ul>
  <li>first
  <li>second
</ul>
Copy the code

1.3.4 Labels must comply with the rules for label nesting

  • Ul, LI/OL, LI/DL, DT, and DD have the parent-child relationship. Ul, OL can only follow li, DL can only follow Dt. dd
  • Block elements cannot be nested inside p, dt, or H tags
  • The A tag cannot nest a
  • Inline elements cannot nest block elements

1.3.5 The use of HTML tags should follow the semantics of tags

The following are common tag semantics

  • P – paragraph
  • H1, H2, H3, H4, H5, H6 – Level headings
  • Strong, em – Emphasis
  • Insert ins –
  • Del – deletes
  • Abbr. – abbreviation for
  • Code – Code identifier
  • Cite – The title of a source work
  • Q – reference
  • Blockquote – a paragraph or long quote
  • Ul – Unordered list
  • Ol – Ordered list
  • Dl, dt, DD – Define lists
<! Recommend -- -- -- >
<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>

<! -- Not recommended -->
<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>
Copy the code

Easy for browsers and search engines to parse. Good for crawler markup, good for SEO

1.3.6 Do not use tables for layout when CSS can meet the same requirements

Semantic correctness should be maintained as far as compatibility allows. Exceptions are allowed for scenarios that have strict requirements for grid alignment and stretchability, such as complex multi-column forms.

1.3.7 The use of labels should be as simple as possible and unnecessary labels should be reduced

<! Recommend -- -- -- >
<img class="avatar" src="image.png">

<! -- Not recommended -->
<span class="avatar">
  <img src="image.png">
</span>
Copy the code

1.3.8 Use href=”javascript:;” when using a tag as a JS event Pseudo agreement

More details about the A tag in HTML

1.4 attributes

1.4.1 Property names must use lowercase letters

<! Recommend -- -- -- >
<table cellspacing="0">.</table>

<! -- Not recommended -->
<table cellSpacing="0">.</table>
Copy the code

1.4.2 Attribute values must be enclosed in double quotation marks

Do not use single quotes. Do not use no quotes

<! Recommend -- -- -- >
<script src="esl.js"></script>

<! -- Not recommended -->
<script src='esl.js'></script>
<script src=esl.js></script>
Copy the code

1.4.3 Boolean attributes, do not add attribute values

<input type="text" disabled>
<input type="checkbox" value="1" checked>
Copy the code

1.4.4 User-defined Attributes You are advised to use data- instead of XXX –

Using prefixes helps distinguish custom attributes from standards-defined attributes

<ol data-ui-type="Select"></ol>
Copy the code

1.4.5 Attribute order

Attributes should appear in a specific order to ensure readability;

  • class
  • id
  • name
  • data-*
  • src, for, type, href, value , max-length, max, min, pattern
  • placeholder, title, alt
  • aria-*, role
  • required, readonly, disabled

Class is designed for highly reusable components and should come first;

Id is more specific and should be used sparingly, so it comes second

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">
Copy the code

2. The general

2.1. A DOCTYPE

2.1.1 Use HTML5 docType to enable standard mode. Uppercase doctype is recommended

<! DOCTYPEhtml>
Copy the code

If you do not declare a document type, you go into weird mode, where the browser parses the page in its own way and renders it differently from browser to browser

2.1.2 Enabling IE Edge Mode

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Copy the code

2.1.3 Setting the correct lang attribute on the HTML tag

Help improve the accessibility of the page, for example, let the speech synthesizer determine the pronunciation it should use, let the translation tool determine the translation language, etc

<html lang="zh-CN">
Copy the code

2.2 coding

2.2.1 Pages must be simplified and character encoding must be clearly specified. The meta that specifies the character encoding must be the first direct child of head

<meta charset="UTF-8">

If no encoding is declared, the browser will parse the document according to its default encoding format, which may be garbled (or garbled because the encoding and encoding declaration format are different).

Please write it as utF-8 instead of UTF-8, UTF8, or UTF8. UTF8 or UTF8 only appears in some programming systems, such as the.NET Framework class system.text. Encoding in a property name called UTF8

2.2.2 HTML files use UTF-8 encoding without BOM

Utf-8 encoding has wider adaptability. BOM can cause unnecessary interference when using programs or tools to process documents

2.3 Introduction of CSS and JavaScript

2.3.1 There is no need to specify type attributes for CSS and JS, which are already included in HTML5 by default

<! Recommend -- -- -- >
<link rel="stylesheet" href="" >
<script src=""></script>

<! -- Not recommended -->
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
Copy the code

2.3.2 Presentation definitions are placed in external CSS and behavior definitions are placed in external JavaScript

Structure-style-behavior separation of code is beneficial for both readable and maintainable code

2.3.3 Import all CSS resources required by the page in the head

During page rendering, new CSS can cause elements to be recalculated and drawn, and pages to flicker. And CSS blocks JS execution

2.3.4 JavaScript should be placed at the end of the page or loaded asynchronously

Placing the script in the middle of the page blocks the rendering of the page. For performance reasons, follow this advice if not necessary

2.3.5 In mobile environments or Web applications designed only for modern browsers, if the protocol part of the URL referencing external resources is the same as that of the Web page, omit the protocol prefix

CSS is introduced using protocol-relative urls. In IE7/8, two requests are made. Whether to use protocol-relative urls should take into account the context for which the page is intended.

< script SRC = "/ / huoyuhao.net/jquery-1.10.2.min.js" > < / script >

The link does not declare the protocol name (HTTP/HTTPS), which will default to the current page protocol, and reduce unnecessary trouble to upgrade the protocol later

2.3.6 Avoid redirection and add “/” after URL address when writing link Address

When writing a link address, you must avoid redirection by adding “/” to the URL, for example: href=”www.huoyuhao.com/”

2.3.7 Avoid empty SRC and href

When the href attribute of the link tag is empty and the SRC attribute of the script tag is empty, the browser will render the current page URL as their attribute value, thus loading the page content as their value. Different browsers display as follows:

  • IE sends a request to the directory where the page resides.
  • Safari, Chrome, and Firefox send requests to the page itself;
  • Opera does nothing.

An empty SRC produces the result of a request:

  • Cause unexpected traffic burden to the server, especially when the time PV is large;
  • Waste server computing resources;
  • An error may occur.

The empty href attribute presents a similar problem. When the user clicks on an empty link, the browser also sends an HTTP request to the server, which can prevent the default behavior of an empty link through JavaScript

3. Head

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <! Edge: Always render the page in the latest document mode. Ignore the document type declaration. For IE8, always render pages in IE8 standard mode. The same goes for IE9. -->
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>
</head>
<body>
</body>
</html>
Copy the code

3.1 SEO

  • The page must contain the title tag to declare the title
  • The title must be a direct child of the head and immediately follow the charset declaration

3.2 DNS Preresolution

DNS prefetch is a feature that enables the browser to actively perform domain name resolution. It includes all links to documents, whether images, CSS, JavaScript or other urls that other users can click on, reducing the delay when users click links

<! -- Enable and disable DNS preresolution -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<! -- Add connection manually -->
<link rel="dns-prefetch" href="http://www.google.com">
Copy the code

Learn more about X-DNs-prefetch -Control

3.3 the favicon

Make favicon accessible

When favicon is not specified, most browsers request favicon.ico in the Web Server root. To keep favicon accessible and avoid 404, you must follow one of two methods:

Place the favicon.ico file in the Web Server root directory. Specify a Favicon using link

<link rel="shortcut icon" href="/favicon.ico">

3.4 the viewport

To be mobile-friendly, specify a viewport for the page.

Viewport Meta Tag allows you to set the width and initial zoom of the viewport area to avoid improper page display on mobile devices.

For example, if your page width is less than 980px and you want to be iOS friendly, you should set the width of your viewPort to fit your page width. Also, because different mobile devices have different resolutions, device-width and device-height variables should be used when setting.

In addition, in order for viewPort to work properly, the layout of the page content style should be adjusted accordingly, such as avoiding absolute positioning. For more information about viewports, see the Safari Web Content Guide

3.5 lang

HTML sets the meaning of the lang attribute

You can learn more about lang attributes from this specification.

Sitepoint offers a list of language codes

Picture 4.

4.1 SRC is not empty

The SRC value of img is disabled. Lazy-loaded images should also be added with the default SRC

If SRC is empty, some browsers will reload the current page. See more

4.2 the title attribute

Avoid adding unnecessary title attributes to img

Redundant titles affect the viewing experience and increase the page size

4.3 the Alt attribute

Add Alt attributes for important images

Improves the user experience when images fail to load.

4.4 Width and height attributes

Add width and height attributes to avoid page jitter

4.5 IMG Tag and CSS Background

Choose the implementation based on semantics

The img tag is appropriate for the following scenarios:

  • Using IMG(Alt text) images has important semantics, such as a warning icon. This ensures that the meaning of the image can be communicated to user-agents, including screen readers
  • Use IMG if you are relying on the browser to scale the image and it looks good (zoom the image out of normal document flow first)
  • Use IMG when stretching the background image with z-Index to fill it’s entire window
  • Using IMG instead of animated backgrounds with background images can significantly improve performance

The background-image attribute is suitable for the following scenarios:

  • Use background-image if the image is not part of the content
  • Use background-image when images are used instead of text (to avoid semantic tags)
  • If you need to shorten the download time through CSS sprites, use background-image

CSS images exist in the form of background images, while HTML images exist in the form of tags. In the loading process of a web page, images with A CSS background are not loaded until the HTML structure is loaded, while the IMG tag in HTML is part of the structure (content) of the web page and is loaded during the loading process.

Image as the background, when the image is not loaded or failed to load, there is no image placeholder, no Red Cross.

Images with potential download requirements, such as product logo, user profile picture and user-generated picture, are realized in the form of IMG, which is convenient for users to download.

Images that do not need to be downloaded, such as ICONS, backgrounds and images used by code, should be realized by CSS background images as far as possible

5. Multimedia

5.1 Media Format

When using the Audio and video tabs to play audio and video in modern browsers, pay attention to the format

Audio should be covered as much as possible in the following formats:

MP3/WAV/Ogg

The video should be covered in the following format as far as possible:

MP4/WebM/Ogg

5.2 audio and video

Prioritize the audio and video tags in HTML5-enabled browsers to define audio and video elements

5.3 Graceful Downgrade

Support for multiple browsers using retrogradation to plug-ins

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <object width="100" height="50" data="audio.mp3">
    <embed width="100" height="50" src="audio.swf">
  </object>
</audio>

<video width="100" height="50" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <object width="100" height="50" data="video.mp4">
    <embed width="100" height="50" src="video.swf">
  </object>
</video>
Copy the code

5.4 Auto Play

Enable automatic playback of audio and video only when necessary

5.5 Fault tolerance Description

Provide instructions inside the object tag to indicate that the browser does not support the tag

<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>

6. Reference

HTML coding specification