HTML Style Guide

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Style Guide

A consistent, clean, and properly formatted HTML code makes it easier for others to understand your code

Here are some tips for creating good HTML code.

Always Declare Document Type

The declare the document type is used in the first line of the document.

The correct document type for HTML is:

<!DOCTYPE html>

Use Lowercase Element Names

HTML enables mixing, using lowercase element names is recommended, because:

  • Mixing uppercase and lowercase names appear to be bad.
  • Lowercase names are usually used by the developers.
  • Lowercase looks cleaner.
  • Lowercase is easier to write.

Good:

<body>

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

</body>

Bad:

<BODY>

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

</BODY>

Close All HTML Elements

In HTML, all the elements are not necessary to be closed (for example the <p> element).

Closing all HTML elements are recommended as below, like this:

Good

<section>

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

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

</section>

Bad:

<section>

  <p>This is a paragraph.

  <p>This is a paragraph.

</section>

Use Lowercase Attribute Names

HTML enables mixing, using lowercase element names is recommended, because:

  • Mixing uppercase and lowercase names appear to be bad.
  • Lowercase names are usually used by the developers.
  • Lowercase looks cleaner.
  • Lowercase is easier to write.

Good:

<a href=”https://www.mywebhostguru.com/tutorials/html-home”>Visit our HTML tutorial</a>

Bad:

<a HREF=” https://www.mywebhostguru.com/tutorials/html-home”>Visit our HTML tutorial</a>

Always Quote Attribute Values

HTML specifies attribute values without quotes.

Quoting attribute values is recommended, because:

  • Developers quote attribute values.
  • Quoted values are easier to read.
  • If the value contains spaces, quotes must be used.

Good:

<table class=”striped”>

Bad:

<table class=striped>

Very bad:

This will not work, because the value contains spaces:

<table class=table striped>

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important in case the image cannot be displayed due to some reason.

Also, always specifies the width and height of images as it reduces flickering because the browser can reserve space for the image before loading.

Good:

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

Bad:

<img src=”html5.gif”>

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Good:

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

Bad:

<link rel = “stylesheet” href = “styles.css”>

Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.

Try to avoid too-long code lines.

Blank Lines and Indentation

Do not add blank lines, spaces, or indentations without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

Good:

<body>

<h1>Famous Cities</h1

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

<h2>Paris</h2>

<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>

</body>

Bad:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>

</body>

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

Good List Example:

<ul>

  <li>London</li>

  <li>Paris</li>

  <li>Tokyo</li>

</ul>

Never Skip the <title> Element

The <title> element is a must in HTML

The contents of a page title must be specified for search engine optimization (SEO) view. Search engine algorithms use the page title to decide the order when listing pages in search results.

The <title> element:

  • Specifies the title in the browser toolbar.
  • Gives the title for the page when it is added to favorites.
  • displays a title for the page in search engine results.

Therefore, it is important to make title as accurate and meaningful as possible:

<title>HTML Style Guide and Coding Conventions</title>

Omitting <html> and <body>?

An HTML page will validate without the <html> and <body> tags:

				
					<head>
  <title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Always add the <html> and <body> tags.
Omitting <body> can generate errors in older browsers.
Omitting <html> and <body> can also crash DOM and XML software.

				
			

Omitting <head>?

The HTMLtag can also be removed.

Browsers adds all elements before, to a defaultelement.

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

				
			

Close Empty HTML Elements?

In HTML, it is not necessary to close empty elements.

Allowed:

<meta charset=”utf-8″>

Also Allowed:

<meta charset=”utf-8″ />

Add the lang Attribute

Including the lang attribute inside the <html> tag, allows you to declare the language of the Web page. This is done with the purpose to assist search engines and browsers.

				
					<html lang="en-us">
				
			

Meta Data

Both the language and the character encoding <meta charset=”charset”> must be specified as early as possible in an HTML document, which allows proper interpretation and correct search engine indexing:

				
					  <meta charset="UTF-8">
				
			

Setting The Viewport

The viewport means the user’s visible area of a web page. It fluctuates with the device – it will be smaller on a mobile phone than on a computer screen.

The followingelement must be included in all the web pages:

The width=device-width part sets the width of the page to follow the screen width of the device.

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

				
					<meta name="viewport" content="width=device-width, initial-scale=1.0">
				
			

HTML Comments

Short comments must be written in one line, like this

<!– This is a comment –>
Comments that span more than one line must be written in this format:

<!–  This is a long comment example. –>

Using Style Sheets

Use  the below syntax for linking to style sheets :

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

 

				
					body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

				
			

Place the opening bracket on the same line as the selector

  • Before opening the bracket, use one space.
  • Use two spaces of indentation.
  • Use a semicolon after each property-value pair, along with the last.
  • If the value contains spaces, use quotes around values.
  • Place the closing bracket on a new line, without spaces.

Loading JavaScript in HTML

Accessing HTML Elements with JavaScript.

The “untidy” HTML code can result in JavaScript errors.

				
					<script src="myscript.js">
				
			

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420