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:

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

---

##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 usually use lowercase (similar to XHTML).
The lowercase style looks more refreshing.
Lowercase letters are easy to write.

---

Not recommended:

##

< ;p>This is a paragraph.

Very bad:

This is a paragraph.

##Recommended:

This is a paragraph.

---

#Close all HTML elements

In HTML5, you don't necessarily have to close all elements (such as

elements), but we recommend adding a closing tag to each element.

Not recommended:

##

This is a paragraph.

This is a paragraph.

Recommendation:

##

This is a paragraph.

This is a paragraph.

---

Close empty HTML elements

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

We can write like this:

You can also write like this:

The slash (/) is required in XHTML and 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 usually use lowercase (similar to XHTML).

• The lowercase style looks more refreshing.

• Lowercase letters are easy to write.

Not recommended:

#

Recommended:

##

---

Attribute valueHTML5 attribute value does not need quotation marks.

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 instance attribute value contains spaces and does not use quotation marks, so it will not work:

The following uses double quotes, which is correct:

---

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

Define the size of the image and load it You can reserve designated space to reduce flickering.

---

##Spaces and equal signs

You can use spaces before and after the equal sign.

But we recommend using less spaces:

---

##Avoid one line The code is too long
# 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 indentationDon’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 indents:

#

< ;h1>php中文网## 

HTML

## It's a dream.
php Chinese website, what you learn is not only technology, but also dreams.
php中文网, what you learn is not only technology, but also a dream,
php中文网, you learn not only technology, but also a dream.

Recommended:

php Chinese website

< ;p>php Chinese website, what you learn is not only technology, but also dreams.
php中文网, what you learn is not only technology, but also dreams.
php中文网, what you learn is not only technology, but also dreams.
php中文网, what you learn is not only technology, but also dreams.

##Form example:

# ;td>B

Name	Description of B

List example:

##

1. London
2. Paris
3. Tokyo

#Omit ; and ?


##In standard HTML5, the and tags can be omitted.

The following HTML5 document is correct:

---

    
 
这是一个标题
 
这是一个段落。

Run the program to try itOmitting the and tags is not recommended. The

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

< html lang="zh">

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

Omitting or will crash in DOM and XML software.

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

Omit ?

In standard HTML5, the tag can be omitted.

By default, the browser will add the content before to a default element.

     
段落 1。
 
段落 2。
   

Run the program and try it

---

Tips: Omitting the head tag now isnot recommendeduse.

---

Source data

The

The title and language can allow search engines to quickly understand your page Theme:

##

---

##HTML Comment

Comments can be written in :

Longer comments can be written on separate lines between :

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

---

Style sheetThe 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 closing curly brace is placed on a new line.

• Maximum 80 characters per line.

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

---

##Load JavaScript in HTML

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

##

HTML5 代码规范

知道并按照这些代码规范来编写程序，对我们是有很大帮助的