HTML(5) Code Standards

HTML Code Conventions

Many web developers are not well-versed in HTML code standards.

Between 2000 and 2010, many web developers transitioned from HTML to XHTML.

Developers using XHTML gradually developed better HTML coding standards.

For HTML5, we should establish good coding standards. The following provides several suggestions for such standards.

Use the Correct Document Type

The document type declaration is the first line of an HTML document:

<!DOCTYPE html>

If you want to use lowercase as with 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:

A mix of uppercase and lowercase is very bad.
Developers usually use lowercase (similar to XHTML).
Lowercase style looks cleaner.
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>

Close All HTML Elements

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

Not Recommended:

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

Recommended:

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

We can write it like this:

<meta charset="utf-8">

Or like this:

<meta charset="utf-8" />

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

If you expect XML software to use your page, it is a good idea to use this style.

Use Lowercase Attribute Names

HTML5 attribute names allow the use of uppercase and lowercase letters.

We recommend using lowercase attribute names:

Using a mix of uppercase and lowercase is very bad.
Developers usually use lowercase (similar to XHTML).
Lowercase style looks cleaner.
Lowercase letters are easier to write.

Not Recommended:

<div CLASS="menu">

Recommended:

<div class="menu">

Attribute Values

HTML5 attribute values can be without quotes.

We recommend using quotes for attribute values:

Quotes are needed if the attribute value contains spaces.
Mixed styles are not recommended; it is better to be consistent.
Attribute values in quotes are easier to read.

The following example, where the attribute value contains spaces and is not quoted, will not work:

&lt;table class=table striped>

The following, using double quotes, is correct:

<table class="table striped">

Image Attributes

Images usually use the alt attribute. It displays when the image cannot be shown.

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

Define the image dimensions so that space can be reserved during loading, reducing flicker.

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

Spaces and Equal Signs

Spaces can be used around the equal sign.

&lt;link rel = "stylesheet" href = "styles.css">

But we recommend using fewer spaces:

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

Avoid Long Code Lines

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

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

Blank Lines and Indentation

Do not add blank lines without a reason.

Add blank lines to separate logical blocks to make the code easier to read.

Indent using two spaces; do not use tabs.

Do not use unnecessary blank lines and indentation between short codes.

Unnecessary Blank Lines and Indentation:

<body>  <h1>tutorialpro.org</h1>  <h2>HTML</h2>
      <p>    tutorialpro.org, learning is not only about technology but also about dreams.    tutorialpro.org, learning is not only about technology but also about dreams.   tutorialpro.org, learning is not only about technology but also about dreams,    
    tutorialpro.org, learning is not only about technology but also about dreams.  </p></body>

<body><h1>tutorialpro.org</h1><h2></h2>
    <p>tutorialpro.org, learning is not only about technology but also about dreams. tutorialpro.org, learning is not only about technology but also about dreams. tutorialpro.org, learning is not only about technology but also about dreams. tutorialpro.org, learning is not only about technology but also about dreams.</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>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:

Example:

<!DOCTYPE html><head>  <title>Page Title</title>
    </head>

    <h1>This is a heading</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 and is used to describe the language of the page:

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

Declaring the language helps screen readers and search engines.

Omitting <html> or <body> can cause crashes in DOM and XML software.

Omitting <body> can cause errors in older browsers (IE9).

Omit <head>?

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

By default, browsers will add the content before <body> to a default <head> element.

Example

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

| | Omitting the head tag is not recommended at this time. | | --- | --- |

Metadata

The <title> element is mandatory in HTML5. The title name describes the subject of the page:

<title>tutorialpro.org</title>

Titles and languages help search engines quickly understand the subject of your page:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>tutorialpro.org</title></head>

HTML Comments

Comments can be written between :

<!-- This is a comment -->

Longer comments can be written between  and can be broken into multiple lines:

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

Indent the first character of a long comment by two spaces for easier reading.

Stylesheets

Use concise syntax for stylesheets (the type attribute is not necessary):

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

Short rules can be written on one line:

p.into {font-family: Verdana; font-size: 16em;}

Long rules can be written on 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 selector and the left curly brace.
Use two spaces for indentation.
Add a space between the colon and the attribute value.
Use a space after commas and semicolons.
End each attribute and value with a semicolon.
Use quotes only when the attribute value contains spaces.
Place the right curly brace on a new line.
Each line should be a maximum of 80 characters.

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

Loading JavaScript in HTML

Use concise syntax to load external scripts (the type attribute is not necessary):

<script src="myscript.js">

Accessing HTML Elements with JavaScript

Poor HTML formatting can lead to JavaScript execution errors.

The following two JavaScript statements will produce different results:

Example

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

Use consistent naming rules in HTML for JavaScript.

Access JavaScript Code Standards.

Use Lowercase File Names

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 consistent style, and we recommend using lowercase file names.

File Extensions

HTML file extensions can be .html (or .htm).

CSS file extensions are .css.

JavaScript file extensions are .js.

Difference Between .htm and .html

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

The difference is:

.htm was used in early DOS systems where the system could only have three characters.

In Unix systems, the extension is not restricted, and .html is generally used.

Technical Difference

If a URL does not specify a file name (like http://www.tutorialpro.org/css/), the server will return a default file name. Usually, the default file names are index.html, index.htm, default.html, and default.htm.

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

However, most servers can be set up with multiple default files, and you can configure them as needed.

In any case, the complete suffix for HTML is ".html".

❮ Thread Procon Html Intro ❯