HTML5 code specification

HTML code convention


Many web developers know very little about HTML code specifications.

From 2000 to 2010, many web developers switched from HTML to XHTML.

Developers using XHTML have gradually developed better HTML authoring specifications.

For HTML5, we should form a good code specification. The following provides suggestions for several specifications.

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

Uppercase and lowercase letters can be used for HTML5 element names.

Lowercase letters are recommended:

The style mixed with capital is very bad.

Developers usually use lowercase (similar to XHTML).

The lowercase style looks more refreshing.

Lowercase letters are easier 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 (such as <p> elements), but we recommend adding 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>

Turn off empty HTML elements

In HTML5, empty HTML elements don't have to be closed:

We can write like this:

<meta charset="utf-8">

You can also write like this:

<meta charset="utf-8" />

A slash (/) in XHTML and XML is required.

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

Use lowercase attribute names

HTML5 attribute names allow uppercase and lowercase letters to be used.

We recommend using lowercase attribute names:

It is a very bad habit to use uppercase writing at the same time.

Developers usually use lowercase (similar to XHTML).

The lowercase style looks more refreshing.

Lowercase letters are easier to write.

Not recommended:

<div CLASS="menu">

Recommend:


<div class="menu">

Attribute value

HTML5 attribute values ​​can be quoted.

Attribute values ​​We recommend using quotes:

Quotes are required if the attribute value contains spaces.

Mixed style is not recommended, it is recommended to unify style.

Property values ​​are easy to read using quotes.

The following instance property values ​​contain spaces, no quotes, so they don't work:

<table class=table striped>

The following double quotes are used, which is correct:

<table class="table striped">

Picture attribute

Images usually use the alt attribute. It can replace the picture display when the picture cannot be displayed.

<img src="html5.gif" alt="HTML5" >

Define the size of the image, you can reserve the specified space when loading, reduce the flicker.

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


Space and equal sign

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

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

Each line of code should be as small as 80 characters.

Blank lines and indents

Don't add blank lines for no reason.

Adding blank lines to each logical function block makes it easier to read.

Indentation uses two spaces, and TAB is not recommended.

Do not use unnecessary blank lines to indent between shorter codes.

Unnecessary blank lines and indentation:

<body> 
  <h1>php中文网</h1> 
  <h2>HTML</h2> 
  <p> 
      php Chinese network, learning not only technology, but also a dream. 
      Php Chinese network, learning not only technology, but also a dream. 
   Php Chinese network, learning not only technology, but also a dream, 
      php Chinese network, learning not only technology, but also a dream. 
  </p> 
</body>

Recommend:


<body> 
<h1>php中文网</h1> 
<h2></h2> 
<p>php Chinese network, learning not only technology, but also a dream. 
Php Chinese network, learning not only technology, but also a dream. 
Php Chinese network, learning not only technology, but also a dream. 
Php Chinese network, learning not only technology, but also a dream. </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, the <html> and <body> tags can be omitted.

The following HTML5 documentation is correct:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>jquerylearn.com</title>
</head>
<h1>This is a title</h1>
<p>This is a paragraph. </p>
Run the program and try it out

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

The <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 language is stated to facilitate screen readers and search engines.

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

Omit <body> An error occurs in older browsers (IE9).

Omit <head>?

In standard HTML5, the <head> tag can be omitted.

By default, the browser adds content before <body> to a default <head> element.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>jquerylearn.com</title>
<body>
<p id="Demo">Paragraph 1. </p>
<p id="demo">Paragraph 2. </p>
<script>
    // Only paragraph 2 will be replaced
    document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>
Run the program and try it out

Tip : Now omitted head tag also is not recommended for use.

Source data

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

<title>php中文网</title>

The 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>php中文网</title> 
</head>

HTML comment

Comments can be written in <!-- and -->:

<!-- This is a comment -->

Longer comments can be written in <!-- and --> branches:

<!--  
  This is a longer comment. This is a longer comment. This is a longer comment. 
  This is a longer comment which is a longer comment. This is a longer comment. 
-->

Long comments first character indents two spaces, making it easier to read.

Style sheet

Style sheets use 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 brace on the same line as the selector.

Add a space between the opening brace and the selector.

Use two spaces to indent.

Add a space between the colon and the attribute value.

Use a space after the comma and symbol.

Symbols are used for each attribute and the end of the value.

Quotation marks are used only if the attribute value contains a space.

Place the right curly brace on a new line.

Up to 80 characters per line.

 
Adding spaces after commas and semicolons is a common rule.


Load JavaScript in HTML
Use a concise syntax to load an external script file (the type attribute is not required):

<script src="myscript.js">

Accessing HTML elements using JavaScript

A bad HTML format can cause JavaScript execution errors.


JavaScript tries to use the same naming convention in HTML.

Access the JavaScript code specification.

Use lowercase filename

Most web servers (Apache, Unix) are case sensitive: london.jpg cannot be accessed via London.jpg.

Other web servers (Microsoft, IIS) are not case sensitive: london.jpg can be accessed via London.jpg or london.jpg.

You must maintain a uniform style, we recommend using a lowercase filename.


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

The .htm and .html extension files are essentially indistinguishable. Both the browser and the web server treat them as HTML files.

The difference is that:

.htm Applies to earlier DOS systems, the system can now have only three characters.

There are no special restrictions on suffixes on Unix systems. Generally, .html is used.


Technical difference


If a URL does not specify a filename (such as http://www.php.cn/css/), the server will return the default filename. Usually the default files are named 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, usually the server can set multiple default files, you can set the default files as needed.

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

Last Updated: 2018-08-22 13:34:01 By akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :