HTML (5) Code Specification
HTML Code Conventions
Many Web developers HTML code specification poorly understood.
In 2000-2010, many Web developers to convert from HTML to XHTML.
Developers use XHTML gradually develop a good HTML writing specifications.
And for in HTML5, we should form a relatively good code norms, several recommendations are provided below specification.
Use the correct type of document
The document type declaration in the first row of the HTML document:
If you want to use other labels, like lower case, you can use the following code:
Lowercase element names
HTML5 element name can use uppercase and lowercase letters.
Recommended use lowercase letters:
- Mixed case style is very bad.
- Developers typically use lowercase (similar XHTML).
- Lowercase style looks more refreshing.
- Lowercase letters easy to write.
Not recommended:
<P> This is a paragraph. </ P>
</ SECTION>
Very bad:
<P> This is a paragraph. </ P>
</ SECTION>
recommend:
<P> This is a paragraph. </ P>
</ Section>
Turn off all HTML elements
In HTML5, you do not want to close all of the elements (for example, <p> element), but we recommend that each element must add a closing tag.
Not recommended:
<P> This is a paragraph.
<P> This is a paragraph.
</ Section>
recommend:
<P> This is a paragraph. </ P>
<P> This is a paragraph. </ P>
</ Section>
Close empty HTML elements
In HTML5, empty HTML element does not have to shut down:
We can write:
You can also write:
XML, XHTML and slash (/) is a must.
If you expect to use your software XML page, this style is very good.
Lowercase attribute name
HTML5 allows the use of the property name uppercase and lowercase letters.
We recommend using lowercase attribute name:
- Use case is a very bad habit.
- Developers typically use lowercase (similar XHTML).
- Lowercase style looks more refreshing.
- Lowercase letters easy to write.
Not recommended:
recommend:
Property Value
HTML5 attribute values can not quote.
We recommend using the attribute value quotes:
- If the property value contains spaces need to use quotation marks.
- Mixed style is not recommended, the proposed unified style.
- Property values using quotation marks are easy to read.
The following examples attribute value contains spaces, do not use quotation marks, it can not work:
The following uses double quotation marks, it is correct:
Image properties
Image alt attributes often used. When the image can not be displayed, it can replace image display.
Defined image size, can be reserved at the time of loading specified space, reduce flicker.
Spaces and equal signs
You can use spaces before and after the equal sign.
However, we recommend using less space:
Avoid long line of code
Using an HTML editor, left and right scrolling code is inconvenient.
Each line of code as much as possible less than 80 characters.
Blank lines and indentation
Do not add a blank line for no reason.
For each logic function block add a blank line, which makes it easier to read.
Indent two spaces, not recommended TAB.
Do not use unnecessary blank lines are indented between short code.
Unnecessary blank lines and indenting:
<H1> This tutorial </ h1>
<H2> HTML </ h2>
<P>
This tutorial, learning is not only technology, but also a dream.
This tutorial, learning is not only technology, but also a dream.
This tutorial, learning is not only technology, but also dream,
This tutorial, learning is not only technology, but also a dream.
</ P>
</ Body>
recommend:
<H1> This tutorial </ h1>
<H2> </ h2>
<P> This tutorial, learning is not only technology, but also a dream.
This tutorial, learning is not only technology, but also a dream.
This tutorial, learning is not only technology, but also a dream.
This tutorial, learning is not only technology, but also a dream. </ P>
</ Body>
Form Example:
<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:
<Li> London </ li>
<Li> Paris </ li>
<Li> Tokyo </ li>
</ Ol>
Omit the <html> and <body>?
In the HTML5 standard, <html> and <body> tag can be omitted.
The following documents are correct HTML5:
Example:
<Head>
<Title> Page Title </ title>
</ Head>
<H1> This is a heading </ h1>
<P> This is a paragraph. </ P>
try it"
Not recommended omitted <html> and <body> tag.
<Html> element is the root element of the document, the language used to describe the page:
<Html lang = "zh">
Language statement is to facilitate screen readers and search engines.
Omit the <html> or <body> in the DOM and XML software crashes.
Omit the <body> error occurs in older browsers (IE9).
Omit the <head>?
In the HTML5 standard, <head> tag can be omitted.
By default, the browser will content <body> before added to a default <head> element.
Examples
<Html>
<Title> Page Title </ title>
<Body>
<H1> This is a heading </ h1>
<P> This is a paragraph. </ P>
</ Body>
</ Html>
try it"
 | Now omit the head tags are not recommended. |
|---|
Metadata
HTML5 in the <title> element is required, the name of the title describes the theme of the page:
Title and language that allows the search engine will soon understand the theme of your page:
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8 ">
<Title> This tutorial </ title>
</ Head>
HTML comments
Comments can be written in the <- and -!> In:
Longer comments in the <! - And -> wrote in branches:
This is a longer comment. This is a longer comment. This is a longer comment.
This is a longer comment This is a longer comment. This is a longer comment.
->
The comments of the first character indent two spaces, easier to read.
Stylesheet
Stylesheet terse syntax (type attribute is not required):
Rules can be written as a short line:
Long multi-line rules can be written:
background-color: lightgrey;
font-family: "Arial Black" , Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- The brace on the same line with the selectors.
- Choose between the left brace and add a space.
- I use two spaces to indent.
- Has added space between the colon and the property values.
- Use a space after the comma and symbols.
- Property values have to use the end of each symbol.
- Only when the property value contains spaces use quotation marks.
- Right brace on a new line.
- Up to 80 characters per line.
| After the comma and semicolon add spaces is a common rule. |
|---|
Loading JavaScript in HTML
Use simple syntax to load external script file (type attribute is not required):
Use JavaScript to access HTML elements
A bad HTML format may cause the execution of JavaScript errors.
The following two JavaScript statements to output different results:
HTML, JavaScript Try to use the same naming convention.
Access JavaScript code specifications .
Lowercase filenames
Most Web servers (Apache, Unix) are case sensitive: london.jpg London.jpg can not access.
Other Web servers (Microsoft, IIS) is not case sensitive: london.jpg can be accessed via London.jpg or london.jpg.
You must maintain a unified style, we recommend consistent use lowercase file names.
File extension
HTML file suffix can be .html (or r .htm).
CSS file extension is .css.
JavaScript file suffix .js.
The difference between .htm and .html
The file extension .htm and .html on the nature there is no difference. Browser and the Web server will treat them as HTML files to deal with.
The difference is that:
.htm application in early DOS systems, or systems are now only three characters.
Suffix is not particularly limited to Unix systems, usually with .html.
Technically difference
If a URL does not specify a file name (such as http://www.w3big.com/css/), the server will return to the default file name. The default file name is usually 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", rather than "index.htm".
Generally, however, the server can set up multiple default file, you can set the default file it as needed.
Anyway, HTML full suffix is ".html".