Hello, world!

HTML 5 Style Guidelines and Coding Standards HTML

Some HTML 5 style guidelines and coding standards discussed in the HTML tutorial are the proper file extensions, applying proper document type, applying lower case element names, meta data, image attributes, using lower case file names and more.



HTML Coding Standards

Web developers are frequently hesitant about applying the coding style and syntax in HTML.
Some web developers shifted from HTML to XHTML amid 2000 and 2010.
Web developers were required to create valid and "well-formed" code with XHTML.
Validating code in HTML5 is a slightly more complex.
You have to produce your own Style Guidelines and Coding Standards with HTML5.

Be Capable and Adaptable

Applying a consistent style makes your HTML very easy to understand and use for others.
Applications such as XML readers, may possibly read your HTML in the future.
It is clever to use with a well-formed "XHTML" syntax.
Keep your style smart, neat, orderly, and well-formed constantly.

Apply Lower Case Element Names

Combining uppercase and lowercase letters in element names is accepted.
But we suggest using lowercase element names:
Mixing uppercase and lowercase names is not recommended
Web developers tend to applying lowercase names (as in XHTML)
Lowercase looks neat
It is more easy to write in Lowercase

Not Recommended:
<SECTION>
  <p>Put paragraph here...</p>
</SECTION>
 
Definitely Not Recommended:
<Section>
  <p> Put paragraph here...</p>
</SECTION>
 
Recommended:
<section>
  <p> Put paragraph here...</</p>
</section>

Apply Proper Document Type

Consistently declare the document type as the first line in your page content: <!DOCTYPE html>
If you want to use lower case tags constantly, you can apply: <!doctype html>

Use Lower Case File Names

Some web servers such as Apache, Unix are case sensitive on file names:
doha.jpg cannot be attained as Doha.jpg.
Some web servers such as Microsoft, IIS are case insensitive:
doha.jpg can be attained as Doha.jpg or doha.jpg.
If you want to combine upper and lower case, you have to be really consistent.
If you transfer from a case insensitive, to a case sensitive server, even little errors will crash your web.
If possible use lower case file names at all times, to avoid such errors.

Close Empty HTML Elements

In HTML5, it is not required to close empty elements.
This syntax is accepted:
<meta charset="utf-8">
 
This syntax is accepted as well:
<meta charset="utf-8" />

It is necessary to use the slash (/) in XHTML and XML.
If you are expecting XML application to access your HTML page, it is good enough to keep it.

Closing All HTML Elements

In HTML5, it is not necessary to close all elements, but closing all HTML elements is suggested.
 
Not Recommended:
<section>
  <p>Put paragraph here...
  <p>Put paragraph here...
</section>

Recommended:
<section>
  <p>Put paragraph here...</p>
  <p>Put paragraph here...</p>
</section>

Quote Attribute Values

In HTML5 you can apply attribute values without quotes.
However quoting attribute values is suggested:
If the value consists of spaces, you have to apply quotes
Combining styles is bad
It is more easy to read in quoted values
 
This cannot be processed since the value contains spaces:
<table class="table" striped>
 
This can be process:
<table class="table striped">

Image Attributes

Sometimes you cannot view images, so it is recommended to apply the alt attribute with images at all times.
Example:
<img src="image.gif" alt="HTML5" style="width:128px;height:128px">

Specify the image size always. It will lessen flickering as the browser can store space for images before they are loaded.
Example:
<img src="image.gif" alt="HTML5" style="width:128px;height:128px">

Use Lower Case Attribute Names

HTML5 accepts combining uppercase and lowercase letters in attribute names.
But using lowercase attribute names is recommended:
Combining uppercase and lowercase names is not recommended
Wed Developers are using lowercase names (as in XHTML)
Lowercase looks neat
It is more easy to write in Lowercase
 
Not Recommended:
 <div class="menu">
 
Recommended:
 <div class="menu">
 

Blank Lines and Indentation

We suggest not to insert blank lines if there is no reason to use it.
For precise reading, insert blank lines to split large or logical code blocks.
For precise reading, add 2 spaces of indentation and using TAB is not recommended.
Avoid using useless blank lines and indentation.
It is not essential to use blank lines among short and related items.
Also avoid indenting each element:

Not Recommended:
<body>

  <h1> Wonders Cities of the World</h1>

  <h2>Doha</h2>

  <p>
 Doha is Qatar's largest city, with over 60% of the nation's population living in Doha or its surrounding suburbs, and it is also the economic centre of the country.
  </p>

</body>

Recommended:
<body>

<h1>> Wonders Cities of the World</h1>
<h2>Doha</h2>

<p>
Doha is Qatar's largest city, with over 60% of the nation's population living in Doha or its  surrounding suburbs, and it is also the economic centre of the country.
</p>

</body>

Table Example:
<table>
  <tr>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Doha</td>
    <td>Qatar</td>
  </tr>
  <tr>
    <td>Vigan</td>
    <td>Philippines</td>
  </tr>
</table>

List Example:
<ol>
  <li>Doha</li>
  <li>Vigan</li>
  <li>Durban</li>
</ol>

Spaces and Equal Signs

It is accepted to put spaces around equal signs:
Example:
<link rel = "stylesheet" href = "styles.css">
 
But it is recommended to not put spaces for easy reading, and grouping entities is better:
Example:
<link rel="stylesheet" href="styles.css">

Don’t Use Long Code Lines

It is very uncomfortable to scroll right and left to read the HTML code each time we use an HTML editor.
It is not recommended to use code lines longer than 80 characters.

Excluding <head>

Excluding the <head> tag in the HTML5 standard is allowed.
Web browsers will put all elements before <body>, to a default <head> element.
By excluding the <head> tag, you can lessen the complication of HTML:
 

HTML code example excluding <head>:

<!DOCTYPE html>
<html>
<title>Title of the Page</title>

<body>
  <h1>Put heading here.</h1>
  <p>Put paragraph here.</p>
</body>

</html>

Excluding <html> and <body>

Excluding the <html> tag and the <body> tag in the HTML5 standard is allowed.
The following example will certify the code as HTML5:

HTML code example excluding <html> and <body>:

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

<h1>Put heading here.</h1>
<p>Put paragraph here.</p>
 
But we do not suggest excluding the <html> and <body> tags.
The <html> element is the page content root. It is the suggested location for identifying the page language:
<!DOCTYPE html>
<html lang="en-US">
It is essential to declare language for accessibility programs such as screen readers and search engines.
Excluding <html> or <body> can destroy DOM and XML application.
Excluding <body> can create errors in older browsers like IE9.

HTML Comments

By using the tags <!— Comments here -->, you can write short comments on one line, with a space after <!-- and a space before -->.
Long comments, extending many lines, can be written inside <!-- and --> on new lines:
<!--
  Put Long comments here. Put Long comments here. Put Long comments here. Put Long comments here. Put Long comments here.
  Put Long comments here. Put Long comments here. Put Long comments here. Put Long comments here. Put Long comments here.
-->
It is simple to identify the Long comments by indenting them 2 spaces.

Meta Data

It is necessary to put the <title> in HTML5.
Be smart on choosing a title as: <title>HTML5 Meta Data</title>
The language and the character encoding must identified together as sooner as possible in a page content to ensure correct interpretation, and proper search engine indexing:

HTML code example meta data:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Meta Data</title>
</head>

Style Sheets

For linking style sheets, use the basic syntax (It is not required to put the type attribute):
<link rel="stylesheet" href="styles.css">
 
This example shows short rules that are written on one line:
p.into {font-family:"Arial"; font-size:16em;}
 
This example shows long rules that are written more than one lines:
body {
  background-color: lightblue;
  font-family: "Verdana", Arial, sans-serif;
  font-size: 16em;
  color: black;
}
 
Putting the opening bracket on the same line as the selector is necessary.
Applying one space before the opening bracket is suggested.
Adding 2 spaces of indentation is recommended.
Among every property and its value, put colon and one space.
Adding space after every comma or semicolon is recommended.
Applying semicolon after every property-value pair and the last is suggested.
If only the value contains spaces, then you can use quotes around values.
Put the closing bracket on a separate line, with no leading spaces.
Do not use lines over 80 characters.

Loading JavaScript in HTML

For booting external scripts use basic syntax (It is not required to put the type attribute):
<script src="myscript.js">

Accessing HTML Elements with JavaScript

Use well-formed, tidy HTML styles, to avoid output with JavaScript errors.
 
These two JavaScript examples will generate different outputs:
var obj = getElementById("Demo")
var obj = getElementById("demo")

Always apply the same HTML naming standard (as JavaScript).

File Extensions

Extension for HTML files is not .htm it should be .html
Extension for CSS files is a .css
Extension for JavaScript files is a .js