HTML5 code specification

In the process of using HTML5, using normalized code makes it easier for you to use and read, and this section will show you how you can make the code in HTML5 more standardized!

HTML code conventions

Many Web developers know little about HTML code specifications.

Between 2000 and 2010, many Web developers switched from HTML to XHTML.

Developers using XHTML have evolved better HTML writing specifications.

For HTML5, we should develop better code specifications, and here are a few suggestions for the specifications.

Use the correct document type

The document type declaration is located on the first line of the HTML document:

< ! DOCTYPE html >

If you want to use smallcase like any other label, you can use the following code:

< !doctype html >

Use a small-case element name

HTML5 element names can be used in capital and lowercase letters.

Lowercase letters are recommended:

  • The mix of case styles is very bad.
  • Developers typically use small case (similar to XHTML).
  • The small-case style looks fresher.
  • Lowercase letters are easy to write.

Not recommended:

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

Very bad:

< Section >
< This is a paragraph. < /p >
< /SECTION >

Recommended:

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

Turn off all HTML elements

In HTML5, you don't have to close all elements (for example, the element), but we recommend that you add a close label for each element.

Not recommended:

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

Recommended:

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

Turn off empty HTML elements

In HTML5, empty HTML elements don't have to be turned off between:

We can write this:

< meta charset= "utf-8" >

You can also write this:

< meta charset= "utf-8" / >

Slashes (/) are required in XHTML and XML.

If you expect XML software to use your page, it's great to use this style.

Use a small-case property name

HTML5 property names allow the use of capital and lowercase letters.

We recommend using lowercase letter property names:

  • Using capitals at the same time is a very bad habit.
  • Developers typically use small case (similar to XHTML).
  • The small-case style looks fresher.
  • Lowercase letters are easy to write.

Not recommended:

< div CLASS= "menu" >

Recommended:

< div class= "menu" >

The property value

HTML5 property values can be quoted without quotation marks.

Property values We recommend using quotation marks:

  • Quotation marks are required if the property value contains spaces.
  • Mixed style is not recommended, it is recommended to unify style.
  • Property values are easy to read with 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 quotes are correct:

< table class= "table striped" >

Picture properties

Pictures typically use the alt property. It replaces the picture display when it cannot be displayed.

< img src= "html5.gif" alt= "HTML5" style= "width:128px; height:128px" >

Define the size of the picture and allow for a specified amount of space to be reserved for loading, reducing flickering.

< 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 a line of code that is too long

With the HTML editor, scrolling code left and right is inconvenient.

Try to be less than 80 characters per line of code.

Empty lines and indentations

Don't add empty lines for no reason.

Add empty lines to each logical function block to make it easier to read.

Indentation uses two spaces and TAB is not recommended.

Do not use unnecessary empty lines and indentations between shorter codes.

Unnecessary empty lines and indentations:

< body >

< h1 and W3Cschool Tutorials slt; /h1 >

< h2 > HTML < /h2 >

< P >
Learn technology, starting with W3Cschool.
Learn technology, starting with W3Cschool.
Learn technology, starting with W3Cschool.
Learn technology, starting with W3Cschool.
< /p >

< /body >

Recommended:

< body >

< h1 and W3Cschool Tutorials slt; /h1 >

< h2 > < /h2 >
< Learning technology, starting with W3Cschool.
Learn technology, starting with W3Cschool.
Learn technology, starting with W3Cschool.
Learn technology, starting with W3Cschool. < /p >

< /body >

Examples of tables:

< 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 >

Omitting the .lt;html;and the .lt;body?gt;?

In standard HTML5, labels can be omitted.

The following HTML5 documentation is correct:

Instance:

< ! DOCTYPE html >
< head >
< title . . . >
< /head >

< h1 . This is a title slt; /h1 >
< This is a paragraph. < /p >

Try it out . . .

It is not recommended to omit the hashtags slt;html;and slt;body.gt;

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

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

The declared language is intended to facilitate screen readers and search engines.

Omitting the dom and XML software will crash.

An error will occur in older browsers (IE9) by omitting the old browser.

Omitting the slt;head?

In standard HTML5, the label can be omitted.

By default, the browser adds the previous content to a default element.

Instance

< ! DOCTYPE html >
< Html >
< title . . . >

< body >
< h1 . This is a title slt; /h1 >
< This is a paragraph. < /p >
< /body >

< /html >

Try it out . . .
HTML5 code specification It is not recommended to omit the head label now.

Metadata

Elements in HTML5 are required, and the title name describes the subject of the page:

< Title and W3Cschool Tutorials >

Titles and languages allow search engines to quickly understand the topic of your page:

< ! DOCTYPE html >
< html lang= "zh" >
< head >
< meta charset= "UTF-8" >
< Title and W3Cschool Tutorials >
< /head >

HTML comments

Comments can be written !-- and --gt;

This is !-- note --

Longer reviews can be written !-- and --gt;

<!--
This is a longer comment. T his is a longer comment. This is a longer comment.
This is a longer comment This is a longer comment. This is a longer comment.
-->

Long comments the first character indented into two spaces for easier reading.

Style sheet

Style sheets use a clean syntax format (type properties are not required):

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

Short rules can be written in one line:

p.into { font-family: Verdana; /b12> 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 opening braces on the same line as the selector.
  • Add spaces between the left parenthesis and the selector.
  • Use two spaces to indent.
  • Add a space between the colon and the property value.
  • A space is used after the comma and symbol.
  • Symbols are used at the end of each property and value.
  • Quotes are used only if the property value contains spaces.
  • The closing braces are placed on a new line.
  • Each line can be up to 80 characters long.
HTML5 code specification Adding spaces after commas and cents is a common rule.

Load JavaScript in HTML

Use a clean syntax to load an external script file (type property is not required):

< script src= "myscript.js" >

Use JavaScript to access HTML elements

A poor HTML format can cause JavaScript to execute incorrectly.

The following two JavaScript statements output different results:

Instance

var obj =getElementById( "Demo" )

var obj = getElementById( "demo" )

Try it out . . .

JavaScript in HTML uses the same naming rules as much as possible.

Access the JavaScript code specification.

Use a small file name

Most Web servers (Apache, Unix) are case sensitive: the London .jpg cannot be accessed .jpg London.

Other Web servers (Microsoft, IIS) are case insensitive: london .jpg can be accessed .jpg London .jpg london.

You must maintain a uniform style, and we recommend the uniform use of small-ced file names.

The file extension

The HTML file suffix can be .html (or r.htm).

The CSS file suffix is .css.

The JavaScript file suffix is .js.

.htm the difference .html and the other

.htm and .html file are essentially no different. Browsers and Web servers treat them as HTML files.

The difference is:

.htm in earlier DOS systems, the system now has only three characters suffix.

There are no special restrictions on suffixes in Unix systems, and .html.

Technical differences

If a URL does not specify a file name (such as //www.w3cschool.cn/css/), the server returns the default file name. Usually the default file name is index .html, index .htm, default .html, and default .htm.

If the server only has "index .html" configured as the default file, you must name the file "index .html" instead of "index .htm".

However, typically the server can set multiple default files, can you set the default files as needed?

In any case, the HTML full suffix is ".html".

After this tutorial, W3Cschool recommends that you do HTML5 hands-on exercises to reinforce what you've just learned.