HTML5 Code Convention


HTML Code Convention

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 gradually developed better HTML writing specifications.

For HTML5, we should form a relatively 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.

It is recommended to use lowercase letters:

  • The 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 necessarily have to close all elements (such as the <p> element), but we recommend that each element should be closed with a closing tag.

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 necessarily have to be closed:

We can write:

<meta charset="utf-8">

It can also be written like this:

<meta charset="utf-8" />

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

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


Use lowercase attribute names

HTML5 attribute names allow uppercase and lowercase letters.

We recommend using lowercase letters for attribute names:

  • It is a very bad habit to use both upper and lower case at the same time.

  • 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 quotation marks.

We recommend using quotes for attribute values:

  • If the attribute value contains spaces, use quotation marks.

  • Mixed styles are not recommended, but unified styles are recommended.

  • Use quotation marks to make attribute values easier to read.

The following instance attribute values contain spaces and do not use quotation marks, so they cannot work:

<table class=table striped>

The following uses double quotes, which are correct:

<table class="table striped">

Picture attributes

Images 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 a designated space when loading it to reduce 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 less spaces:

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

Avoid too long a line of code

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

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


Blank lines and indentation

Don't add blank lines for no reason.

Add blank lines for each logic function block to make it easier to read.

Use two spaces for indentation. TAB is not recommended.

Don't use unnecessary blank lines and indentation between shorter codes.

Unnecessary blank lines and indentation:

<body>
   <h1>Tutorial Fish</h1>
   <h2>HTML</h2>
   <p>
     To learn useful tutorials, go to tutorialfish.com.
        To learn useful tutorials, go to tutorialfish.com.
    To learn useful tutorials, go to tutorialfish.com.
     To learn useful tutorials, go to tutorialfish.com.
   </p>
</body>

Recommend:

<body>
  <h1>Tutorial Fish</h1>
  <h2></h2>
  <p>
    To learn useful tutorials, go to tutorialfish.com
    To learn useful tutorials, go to tutorialfish.com
    To learn useful tutorials, go to tutorialfish.com
    To learn useful tutorials, go to tutorialfish.com
  </p>
</body>


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


A List Example

<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 document is correct:

Examples:

<!DOCTYPE html>
<head>
  <title>page title</title>
</head>
<h1>this is a headline</h1>
<p>this is a paragraph</p>

 Try It! 

However, 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="en">

The declaration language is for the convenience of screen readers and search engines.

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

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


Omit <head>?

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 headline</h1>
   <p>This is a paragraph. </p>
</body>
</html>
NoteIt is not recommended to omit the head tag at this time.

 Try It! 



Metadata

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

<title>Tutorial Fish</title>

Title and language allow search engines to quickly understand the topic of your page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tutorial Fish</title>
</head>



HTML Comments

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

<!-- This is a comment-->

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

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

The first character of a long comment is indented by two spaces to make it easier to read.


Style Sheet

The style sheet 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;
}


  • Put the opening brace on the same line as the selector.

  • Add a space between the opening brace and the selector.

  • Use two spaces for indentation.

  • Add a space between the colon and the attribute value.

  • Use a space after the comma and symbol.

  • Use a semicolon at the end of each attribute and value.

  • Use quotation marks only when the attribute value contains spaces.

  • The closing brace is placed on a new line.

  • Up to 80 characters per line.

NoteAdding spaces after commas and colons is a common rule.

Load JavaScript in HTML

Use concise syntax to load external script files (type attribute is not required):

<script src="myscript.js">



Use JavaScript to Access HTML Elements

A bad HTML format may cause JavaScript execution errors.

The following two JavaScript statements will output different results:

Example

var obj = getElementById("Demo")
var obj = getElementById("demo")

 Try It! 

Try to use the same naming rules for JavaScript in HTML.

Access the JavaScript code specification . (under construction)


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 not case sensitive: london.jpg can be accessed via London.jpg or london.jpg.

You must maintain a consistent style, and we recommend uniformly using lowercase file names.


File Extensions

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

The CSS file suffix is .css .

The JavaScript file suffix is .js .


The Differences 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 that:

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

There is no special restriction on the suffix in Unix systems, generally use .html.

Technical Differences

If a URL does not specify a file name (such as http://www.tutorialfish.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 full suffix of HTML is ".html".