HTML5 code specification
HTML code convention
Many Web developers know very little about HTML’s code specifications.
Between 2000 and 2010, many Web developers switched from HTML to XHTML.
Developers using XHTML have gradually developed better HTML writing specifications.
For HTML5, we should form a better code specification, and here are several suggestions for the specification.
Use the correct document type
The document type declaration is 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 be in uppercase and lowercase letters.
Lowercase letters are recommended:
The mixed 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:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Very bad:
<Section>
<p>This is a paragraph.</p>
</SECTION>
Recommended:
<section>
<p>This is a paragraph.</p>
</section>
Close all HTML elements
In HTML5, you don’t have to close all elements (for example, < p > elements), but we recommend that each element add a close tag.
Not recommended:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Recommended:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Turn off empty HTML elements
In HTML5, empty HTML elements do not have to be closed:
We can write like this:
<meta charset="utf-8">
It can also be written like this:
<meta charset="utf-8" />
A slash (/) is required in XHTML and XML.
If you expect XML software to use your page, using this style is very good.
Use lowercase property names
HTML5 property names allow uppercase and lowercase letters.
We recommend using lowercase property names:
It is a very bad habit to use both uppercase and lowercase.
Developers usually 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 Property values can be without quotation marks.
We recommend using quotation marks for attribute values:
Use quotation marks if the attribute value contains spaces.
Mixed style is not recommended, it is recommended to unify the style.
Property values are easy to read using quotation marks.
The following instance property values contain spaces and do not use quotation marks, so they do not work:
<table class=table striped>
The following double quotation marks are correct:
<table class="table striped">
Picture Properti
Pictures are usually used alt Property. When the picture cannot be displayed, it can replace the picture display.
<imgsrc="html5.gif"alt="HTML5">
Define the size of the picture, you can reserve the specified space when loading to reduce flicker.
<img src="html5.gif" alt="HTML5" style= **"width:128px;height:128px**">
Spaces and equal signs
Spaces can be used before and after the equal sign.
<link rel ="stylesheet" href ="styles.css">
But we recommend using fewer spaces:
<link rel="stylesheet" href="styles.css">
Avoid too long a line of code
With the HTML editor, it is not convenient to scroll the code around.
Try to have less than 80 characters per line of code.
Blank lines and indents
Don’t add blank lines for no reason.
Add blank lines to each logical block to make it easier to read.
Indentation uses two spaces, and TAB is not recommended.
Do not use unnecessary blank lines and indents between shorter code.
Unnecessary blank lines and indents:
<body>
<h1>菜鸟教程</h1>
<h2>HTML</h2>
<p>
The rookie tutorial not only teaches skills, but also dreams.
The rookie tutorial not only teaches skills, but also dreams.
The rookie tutorial not only teaches skills, but also dreams.
The rookie tutorial not only teaches skills, but also dreams.
</p>
</body>
Recommended:
<body>
<h1>rookie tutorial</h1>
<h2></h2>
<p>The rookie tutorial not only teaches skills, but also dreams.
The rookie tutorial not only teaches skills, but also dreams.
The rookie tutorial not only teaches skills, but also dreams.
The rookie tutorial not only teaches skills, but also dreams.</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 <html> and <body> tags can be omitted.
The following HTML5 documents are correct:
Example:
<!DOCTYPE html>
<head>
<title>TITLE</title>
</head>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
Omission is not recommended <html> and <body> label.
<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 declaration language is designed to facilitate screen readers and search engines.
Omit <html> or <body> crashes in DOM and XML software.
Omit <body> errors occur in older browsers (IE9).
Omit < head >?
In standard HTML5 <head> tags can be omitted.
By default, the browser sets the <body> the previous content is added to a default <head> on the element.
Example
<!DOCTYPE html>
<html>
<title>TITLE</title>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>
Now omit head tags are not recommended.
Meta data
In HTML5 <title> the element is required, and the title name describes the theme of the page:
<title>Rookie Tutorial</title>
Title and language allow search engines to quickly understand the theme of your page:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Rookie Tutorial</title>
</head>
HTML comment
Comments can be written in <!– and– >:
<!-- This is a comment -->
Longer comments can be written on lines <!– and– >:
<!--
This is a lengthy comment. This is a lengthy comment. This is a lengthy comment.
This is a lengthy comment. This is a lengthy comment. This is a lengthy comment.
-->
The first character of a long comment is indented by two spaces, making it easier to read.
Style sheet
Stylesheets use a concise syntax format (the type attribute is not required):
<link rel="stylesheet" href="styles.css">
Short rules can be written on 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;
}
Place the left curly braces on the same line as the selector.
Add a space between the left curly bracket and the selector.
Use two spaces to indent.
Add a space between the colon and the attribute value.
Use a space after commas and symbols.
Each attribute and value ends with a semicolon.
Quotation marks are used only if the property value contains spaces.
The right curly braces are placed on the new line.
A maximum of 80 characters per line.
It is a common rule to add spaces after commas and colons.
Load JavaScript in HTML
Use concise syntax to load external script files type property is not required):
<script src="myscript.js">
Access HTML elements using JavaScript
A poor HTML format can cause JavaScript execution errors.
The following two JavaScript statements output different results:
Example
var obj = getElementById("Demo")
var obj = getElementById("demo")
Try to use the same naming convention for JavaScript in HTML.
Use lowercase file names
Most Web servers (Apache, Unix) are case-sensitive: london.jpg can’t pass London.jpg to visit.
Other Web servers (Microsoft, IIS) are case-insensitive: london.jpg can be passed through London.jpg or london.jpg to visit.
You must maintain a uniform style, and we recommend using lowercase file names.
File extension
The HTML file suffix can be .html (or .htm ).
The CSS file suffix is .css .
The JavaScript file suffix is .js .
.htm and .html the difference between
.htm and .html there is essentially no difference in the extension file of Both browsers and Web servers treat them as HTML files.
The difference is:
.htm when used in early DOS systems, the system may now have only three characters.
There are no special restrictions on suffixes in Unix systems. .html .
Technical difference
If a URL does not specify a file name (such as http://www.runoob.com/css/ ）the server will return the default file name. The default file name is usually index.html , index.htm , default.html , default.htm .
If the server is configured with only “index.html” as the default file, you must name the file “index.html” instead of “index.htm”.
However, usually the server can set multiple default files, and you can set the default file name as needed.
Anyway, the full suffix of HTML is “.html”.