HTML5 coding standards

HTML coding conventions

Many web developers know little about HTML coding conventions.

Between 2000 and 2010, many web developers converted from HTML to XHTML.

Using XHTML developers have gradually developed better HTML writing standards.

For HTML5, we should form better code standards. The following provides several standard suggestions.

Use the correct document type

The document type declaration is located on the first line of the HTML document:

<!DOCTYPE html>

If you want to use lowercase like other tags, you can use the following code:

<!doctype html>

Use lowercase element names

HTML5 Element names can use uppercase and lowercase letters.

Recommended to use lowercase letters:

Mixing upper and lower case style is very bad.

Developers typically use lowercase (similar to XHTML).

The lowercase style looks more refreshing.

Lowercase letters are easy to write.

Not recommended:

<SECTION> 
  <p>这是一个段落。</p>
</SECTION>

Very bad:

<Section> 
  <p>这是一个段落。</p>
</SECTION>

Recommended:

<section> 
  <p>这是一个段落。</p>
</section>

Closing all HTML elements

In HTML5, you don't have to close all elements (such as <p> elements), but we recommend adding a closing tag to each element.

Not recommended:

<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>

Recommended:

<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

Close empty HTML elements

In HTML5, empty HTML elements do not have to be closed:

We can write like this:

<meta charset="utf-8">

We can also write like this:

<meta charset="utf-8" />

In XHTML The slash (/) is required in XML.

It's good to use this style if you expect XML software to use your page.

Use lowercase attribute names

HTML5 attribute names allow the use of uppercase and lowercase letters.

We recommend using lowercase letters for attribute names:

It is a very bad habit to use uppercase letters at the same time.

Developers typically use lowercase (similar to XHTML).

The lowercase style looks more refreshing.

Lowercase letters are easy to write.

Not recommended:

<div CLASS="menu">

Recommended:

<div class="menu">

Attribute value

HTML5 attribute values can be used without quotes.

We recommend using quotation marks for attribute values:

If the attribute value contains spaces, you need to use quotation marks.

Mixing styles is not recommended, it is recommended to unify the style.

Use quotation marks for attribute values to make them easier to read.

The following example attribute values contain spaces and do not use quotation marks, so they cannot work:

The following uses double quotation marks, which is correct of:

Image attributes

Images usually use the alt attribute. When the picture cannot be displayed, it can replace the picture display.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Define the size of the image and reserve designated space when loading to reduce flickering.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces and equal sign

You can use spaces before and after the equal sign.

<link rel = "stylesheet" href = "styles.css">

But we recommend using less spaces:

<link rel="stylesheet" href="styles.css">

Avoid a line of code that is too long

When using the HTML editor, it is inconvenient to scroll the code left and right. .

Try to keep each line of code to less than 80 characters.

Blank lines and indentation

Don’t add blank lines for no reason.

Add blank lines to each logical function block to make it easier to read.

Use two spaces for indentation, and TAB is not recommended.

Do not use unnecessary blank lines or indentation between shorter codes.

Unnecessary blank lines and indentation:

<body>
  <h1>相思</h1>
  <h2>HTML</h2>
  <p>
   红豆生南国，春来发几枝。
愿君多采撷，此物最相思。
  </p>
</body>

Recommendation:

<body>
<h1>相思</h1>
<h2></h2>
<p>红豆生南国，春来发几枝。
愿君多采撷，此物最相思。</p>
</body>

Table example:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

List example:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Omit<html> and <body>?

In standard HTML5, the <html> and <body> tags can be omitted.

The following HTML5 document is correct:

Example:

<!DOCTYPE html>
<head>
  <title>网页标题</title>
</head>
<h1>标题</h1>
<p>段落。</p>

Omitting the <html> and <body> tags is not recommended. The

<html> element is the root element of the document and is used to describe the language of the page:

<!DOCTYPE html>
<html lang="zh">

The declared language is for the convenience of screen readers and search engines.

Omitting <html> or <body> will crash in DOM and XML software.

Omitting <body> will cause an error in older browsers (IE9).

Omit <head>?

In standard HTML5, the <head> tag can be omitted.

By default, the browser will add the content before <body> to a default <head> element.

Example

<!DOCTYPE html>
<html>
<title>页面标题</title>
<body>
  <h1>标题</h1>
  <p>段落。</p>
</body>
</html>

Omitting the head tag is not recommended now.

Metadata

The <title> element in HTML5 is required. The title name describes the theme of the page:

<title>php Chinese website</title> ;

The title and language can let search engines quickly understand the topic of your page:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>ask.php.cn</title>
</head>

HTML comments

Comments can be written in  ; in:

Longer comments can be written in separate lines between :

The first character of long comments is indented by two spaces to make it easier to read.

Style sheet

The style sheet uses a concise syntax format (the type attribute is not required):

Short rules can be written in one line:

p.into {font-family: Verdana; font-size: 16em;}

Long rules can be written in multiple lines:

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font -size: 16em;
color: black;
}

Put the opening curly brace on the same line as the selector.

Add a space between the left curly brace and the selector.

Use two spaces for indentation.

Add a space between the colon and the attribute value.

Use a space after commas and symbols.

Use a symbol at the end of each attribute and value.

Use quotes only if the attribute value contains spaces.

The right curly brace is placed on a new line.

Maximum 80 characters per line.

A common rule is to add spaces after commas and semicolons.

Loading JavaScript in HTML

Use concise syntax to load external script files (the type attribute is not required):

Using JavaScript to access HTML elements

A poor HTML format may cause JavaScript execution errors.

The following two JavaScript statements will output different results:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

Try to use the same naming rules for JavaScript in HTML.

Access JavaScript code specifications.

Use lowercase file names

Most web servers (Apache, Unix) are case-sensitive: london.jpg cannot be accessed through London.jpg.

Other web servers (Microsoft, IIS) are not case sensitive: london.jpg can be accessed as London.jpg or london.jpg.

You must maintain a consistent style. We recommend using lowercase file names uniformly.

File extension

HTML file suffix can be .html (or r .htm).

CSS file suffix is .css.

JavaScript file suffix is .js. The difference between

.htm and .html There is essentially no difference between the extension files of .htm and .html. Both browsers and web servers treat them as HTML files.

The difference is:

.htm was used in early DOS systems, and the system now only has three characters.

There are no special restrictions on the suffix in Unix systems, generally .html is used.

Technical difference

If a URL does not specify a file name (such as http://www.php.cn/css/), the server will return the default file name. Typically the default file names are index.html, index.htm, default.html, and default.htm.

If the server is configured with only "index.html" as the default file, you must name the file "index.html", not "index.htm".

However, usually the server can set multiple default files, can you set the default file as needed.

Anyway, the complete suffix of HTML is ".html".

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 会被替换 document.getElementById("demo").innerHTML = "HELLO."; </script> </body> </html>

submit Reset Code

Automatic operation

HTML5 coding standards

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]