HTML syntax 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 use uppercase and lowercase letters.
Lowercase letters are recommended:
- 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>
recommend:
<section> <p>This is a paragraph.</p> </section>
Close all HTML elements
In HTML5, you don't have to close all elements (for example
Element), but it is recommended to add a close tag to each element.
Not recommended:
<section> <p>This is a paragraph. <p>This is a paragraph. </section>
recommend:
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
Close empty HTML elements
In HTML5, empty HTML elements do not have to be closed:
We can write this:
<meta charset="utf-8">
You can also write:
<meta charset="utf-8" />
Slashes (/) are required in XHTML and XML.
If you expect XML software to use your page, this style is very good.
Use lowercase attribute names
HTML5 attribute names allow uppercase and lowercase letters.
Attribute names in lowercase letters are recommended:
- It's 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">
recommend:
<div class="menu">
Attribute value
HTML5 attribute values can be without quotes.
Quotation marks are recommended for attribute values:
- If the attribute value contains spaces, quotation marks are required.
- If mixed style is not recommended, unified style is recommended.
- Attribute 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 properties
Pictures usually use the alt attribute. When the picture cannot be displayed, it can replace the picture display.
<img src="html5.gif" alt="HTML5">
Define the size of the picture, and reserve the specified space during 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">
However, we recommend using fewer spaces:
<link rel="stylesheet" href="styles.css">
Avoid a long line of code
Using an HTML editor, it is inconvenient to scroll the code left and right.
Each line of code shall be less than 80 characters as far as possible.
Blank lines and indents
-
Do not add blank lines for no reason.
-
Add blank lines for each logical function 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>Rookie tutorial</h1>
<h2>HTML</h2>
<p>
Last year, today in this door, people's faces are red with peach blossoms.
People do not know where to go, peach blossoms still smile at the spring breeze.
</p>
</body>
recommend:
<body> <h1>Rookie tutorial</h1> <h2></h2> <p> Last year, today in this door, people's faces are red with peach blossoms. People do not know where to go, peach blossoms still smile at the spring breeze.</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 instance:
<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>Page title</title> </head> <h1>This is a title</h1> <p>This is a paragraph.</p>
metadata
The < title > element in HTML5 is required. The title name describes the topic of the page:
<title>Hello World</title> Title and language can let search engines quickly understand the theme of your page: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Hello, Lin goudan</title> </head>
HTML comments
Notes can be written in <-- And – >
<!-- This is a comment -->
Longer comments can be found in <-- And – > Chinese line:
<!-- This is a long comment. This is a long comment. This is a long comment. This is a longer comment. This is a longer comment. This is a long comment. -->
The first character of a long comment is indented by two spaces to make it easier to read.
style sheet
The stylesheet uses a concise syntax format (the type attribute is not required):
<link rel="stylesheet" href="styles.css">
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;
}
- Place the left curly brace on the same line as the selector.
- Add a space between the left curly brace and the selector.
- Indent with two spaces.
- Add a space between the colon and the attribute value.
- Use a space after commas and symbols.
- Use a semicolon at the end of each attribute and value.
- Use quotation marks only if the attribute value contains spaces.
- The right curly bracket is placed on a new line.
- A maximum of 80 characters per line.
- Note 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 attribute is not required):
<script src="myscript.js">
Accessing HTML elements using JavaScript
A bad 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 rules for JavaScript in HTML.
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 case insensitive: london.jpg can be accessed through london.jpg or london.jpg.
You must maintain a unified style. It is recommended to use 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.
The difference between. htm and. html
There is essentially no difference between. htm and. HTML extension files. Both browsers and Web servers treat them as HTML files.
The difference is:
. htm used in the early DOS system, the system can only have three characters.
There are no special restrictions on suffixes in Unix systems. html is generally used.
Technical differences
If a URL does not specify a file name (such as http://www.runoob.com/css/ ), the server will return the default file name. Usually, the default file names are index.html, index.htm, default.html, and default.htm.
If the server only configures "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.
In any case, the complete suffix of html is ". html".