HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML(5) Code writing specifications

The following lists common and frequently used HTML code specifications. Good writing habits are conducive to code maintenance and upgrades, improving work efficiency, and hoping to be helpful to everyone.

HTML code conventions

Many web developers know little about HTML code specifications.

In2000 to2010In the year, many web developers transformed from HTML to XHTML.

Developers using XHTML have gradually developed good HTML writing standards.

And for HTML5 , we should form a good code specification, the following provides several specification suggestions.

Use the correct document type

The document type declaration is located in 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 uppercase and lowercase styles is very bad.
Developers usually use lowercase (similar to XHTML).
Lowercase style looks cleaner.
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>

Recommendation:

<section>　
　　<p>This is a paragraph.</p>
</section>

Close all HTML elements

In HTML5 In HTML, you do not necessarily need to close all elements (such as <p> elements), but we recommend adding a closing tag to each element.

Not recommended:

<section>
　　<p>This is a paragraph.</p>
　　<p>This is a paragraph.</p>
</section>

Recommendation:

<section>
　　<p>This is a paragraph.</p>
　　<p>This is a paragraph.</p>
</section>

Close empty HTML elements

In HTML5 Comma, empty HTML elements do not necessarily need to be closed:

We can write it like this:

<meta　charset="utf-8">

can also be written like this:

<meta　charset="utf-8"　/>

In XHTML and XML, the slash (/) is required.

If you expect XML software to use your page, using this style is very good.

Use lowercase attribute names

HTML5 Attribute names are allowed to use uppercase and lowercase letters.

We recommend using lowercase attribute names:

Using both uppercase and lowercase at the same time is a very bad habit.
Developers usually use lowercase (similar to XHTML).
Lowercase style looks cleaner.
Lowercase letters are easy to write.

Not recommended:

<div　CLASS="Style">

Recommendation:

<div　class="style">

Attribute values

HTML5 Attribute values can be without quotes.

We recommend using quotes for attribute values:

If the attribute value contains spaces, quotes must be used.
Mixed styles are not recommended, and it is recommended to use a unified style.
Using quotes for attribute values is easier to read.

The following example attribute values contain spaces and do not use quotes, so they cannot take effect:

<table　class=table　striped>

The following uses double quotes, which is correct:

<table　class="table　striped">

Image attributes

Images usually use the alt attribute. It can replace the image to be displayed when the image cannot be displayed.

!DOCTYPE html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)>/title>　
</head>
<body>
<img　src="logo.png"　alt="HTML5Basic Tutorial">
</body>
</html>

Define the size of the image, reserve a specified space when loading, and reduce flickering.

<img　src="logo.png"　alt="HTML5Basic Tutorial"　style="width:128px;height:40px">

Spaces and equal signs

Spaces can be used before and after the equal sign.

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

But we recommend using less space:

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

Avoid one line of code being too long

Using an HTML editor, it is inconvenient to scroll the code left and right.

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

Blank lines and indentation

Do not add blank lines without reason.

Add a blank line for each logical functional block, which makes it easier to read.

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

Do not use unnecessary blank lines and indentation between short lines of code.

Unnecessary blank lines and indentation:

　　　　　　　　<body>
　　<h1>Basic Tutorial Website(oldtoolbag.com)>/h1>
　　<h2>HTML</h2>
　　<p>
　　　　Basic Tutorial Website, learn the basics, and you can go further.
　　　　Basic Tutorial Website, learn the basics, and you can go further.
　　　Basic Tutorial Website, learn the basics, and you can go further,
　　Basic Tutorial Website, learn the basics, and you can go further.
　　</p>
</body>

　　Recommendation:

<body>
<h1>Basic Tutorial Website(oldtoolbag.com)>/h1>
<h2>HTML</h2>
<p>Basic Tutorial Website, learn the basics, and you can go further.
Basic Tutorial Website, learn the basics, and you can go further.
Basic Tutorial Website, learn the basics, and you can go further.
Basic Tutorial Website, learn the basics, and you can go further./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>PHP</li>
　　<li>JAVA</li>
　　<li>C++</li>
</ol>

Should <html> and <body> be omitted?

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

In the following HTML5 The document is correct:

Example:

!DOCTYPE html
<head>
　 <title>Page Title</title>
</head>
<h1>This is a title</h1>
<p>This is a paragraph.</p>

It is not recommended to omit the <html> and <body> tags.

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

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

Declaring the language is to facilitate screen readers and search engines.

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

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

Should <head> be omitted?

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>Page Title</title>
<body>
　　<h1>This is a title</h1>
　　<p>This is a paragraph.</p>
</body>
</html>

　 It is not recommended to omit the head tag now.

Metadata

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

<title>Basic Tutorial Website</title>

The title and language allow search engines to quickly understand the theme of your page:

!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Basic Tutorial Website</title>
</head>

HTML comment

Comments can be written in the  :

<!--　This is a comment　-->

Long comments can be written in the <!-- And --Write in the middle line:

<!--　
　　This is a long comment. This is
　　A long comment. This is a long comment.
　　This is
　　A long comment This is a long comment. This is
　　A long comment.
-->

The first character of a long comment is indented with two spaces, making it easier to read.

Stylesheet

The stylesheet uses a simple syntax format (the type attribute is not required):

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

Short rules can be written on a single line:

p.into {font-family: Verdana; font-size:　14px;}

Long rules can be written over multiple lines:

body {
　　background-color: yellow;
　　font-family: "Arial Black", Helvetica, sans-serif;
　　font-size:　14px;
　　color: red;
}

The left curly brace and the selector are placed on the same line.
A space is added between the left curly brace and the selector.
Two spaces are used for indentation.
A space is added between the colon and the attribute value.
A space is used after commas and symbols.
Semicolons are used at the end of each attribute and value.
Quotes are used only when the attribute value contains spaces.
The right curly brace is placed on a new line.
The maximum number of characters per line 80 characters.

Adding a space after commas and colons is a common rule.

Load JavaScript in HTML

Load external script files using concise syntax (the type attribute is not required):

<script src="myscript.js">

Using JavaScript to access HTML elements

A poor HTML format can cause JavaScript execution errors.

The following two JavaScript statements will output different results:

Example

var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

In HTML, try to use the same naming rules for JavaScript.

Use lowercase filenames

Most web servers (CentOS, *Unix) is case-sensitive: loading.jpg cannot be accessed via Loading.jpg.

Other web servers (Windows, IIS) are case-insensitive: loading.jpg can be accessed via Loading.jpg or loading.jpg.

You must maintain a consistent style, and we recommend using lowercase filenames.

File extension

The file extension for HTML files can be .html (or .htm).

The file extension for CSS files is .css.

The file extension for JavaScript files is .js.

The difference between .htm and .html

The .htm and .html file extensions are essentially the same. Browsers and web servers treat them as HTML files.

The difference lies in:

.htm is applied in early DOS systems, and the system now can only have three characters.

In Unix systems, there are no special restrictions on the suffix, usually using .html.

Technical Distinction

If a URL does not specify a file name (such as https://www.oldtoolbag.com/html/, The server will return the default file name. The default file name is usually index.html, index.htm, default.html, and default.htm.

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

However, servers can usually be set to have multiple default files, and you can set the default file name as needed.

However, the complete suffix for HTML is ".html".

HTML5 History API HTML5 WebSocket