HTML Style Guide and Coding Conventions

A coherent, and clean HTML code makes reading and understanding easier for others.

Some instructions and advice on creating good HTML code are provided below.

You can also search for these topics, html style guide and coding convention difference, html style guide definition guide and example, html style guide and coding convention model and important.

Always Declare Document Type

Always state the first line in your document as a document type.

The appropriate HTML document type is :

<!DOCTYPE html>

Use Lowercase Element Names

In the name of an element in HTML, you can use both uppercase and lowercase letters.

However, we recommend that element names be written in lowercase because of the following reasons :

It doesn't look good to mix uppercase and lowercase names.
Lowercase names are usually used by developers.
The lowercase version appears more professional.
It's easier to write with lowercase letters.

Good :-

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

Bad :-

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

You can also search for these topics, html use lowercase element names duplicate change dynamically example, keep html lowercase element names only.

Close All HTML Elements

It is not necessary to close all elements in HTML (for example, the< p> element).

But all HTML elements such as this are strongly recommended to close :

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>

You can also search for these topics, close all html elements atributes example, close all html elements header, input, and table.

Use Lowercase Attribute Names

HTML permits uppercase and lowercase to be mixed into names of attributes.

We recommend however the use of names for lowercase attributes, as :

It doesn't look good to mix uppercase and lowercase names.
Lowercase names are usually used by developers.
The lowercase version appears more professional.
It's easier to write with lowercase letters.

Good :-

<a href="https://www.simmanchith.com/">Visit Simmanchith</a>

Bad :-

<a HREF="https://www.simmanchith.com/">Visit Simmanchith</a>

You can also search for these topics, html use lowercase atributes names only example, html use lowercase atributes names position and length meaning, html use lowercase atributes names not working.

Always Quote Attribute Values

HTML provides quotes-free attribute values.

We recommend, however, that attribute values be quoted because :

Normally, attribute values are quoted by programmers.
It is easier to read quoted figures.
If the value contains spaces, quotations must be used.

Good :-

<table class="striped"></table>

Bad :-

<table class=striped></table>

Very bad :-

It does not work, because there are spaces in the value :

<table class=table striped></table>

You can also search for these topics, html always keep quotes(single or double) atribute values example, html always quote atribute values escape character, single quote vs double quote, html always quote atribute values not working, html always quote atribute values required.

Always Specify alt, width, and height for Images

Always enter the alt image attribute. If the image is not displayed, that attribute is important.

Set the width and height of the images also constantly. The browser can reserve space for the picture before loading. This reduces splintering.

Good :-

<img src="html-resources/img-computer.jpg" alt="Computer" style="width:128px;height:128px">

Bad :-

<img src="html-resources/img-computer.jpg">

You can also search for these topics, html always specify alt, width, and height for images with example, html always specify alt, width, and height for images classification, dimension, and format.

Spaces and Equal Signs

HTML allows for the same sign spaces. But spaceless readings and groups are easier together.

Good :-

<a href="https://www.simmanchith.com" alt="The best place to learn programming languages">

Bad :-

<a href = "https://www.simmanchith.com" alt = "The best place to learn programming languages">

You can also search for these topics, html spaces and equal signs between words, html spaces and equal signs between attribute names and values, html escape spaces and equal signs code, html spaces and equal signs questions.

Avoid Long Code Lines

It is NOT easy to scroll right and left for HTML code to be read by an HTML editor.

Excessively long code lines should be avoided whenever possible.

You can also search for these topics, html avoid long code lines break guide and example, html avoid long code lines blank and counter, html avoid long code lines not working, html avoid long code lines problem and tutorial.

Blank Lines and Indentation

Add blank lines, spaces, and indentations only when absolutely necessary.

Add blank lines to separate large or logical blocks for ease of reading.

Add two indentation spaces to make them readable. Do not use the key on the tab.

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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</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>

You can also search for these topics, html blank lines and indentation between elements,tags and code, html blank lines and indentation enter or delete, html blank lines and indentation force and groups, html blank lines and indentation how to add items, html blank lines and indentation insert or remove.

Never Skip the <title> Element

In HTML, you need the title element.

In search engine optimization (SEO), the contents of a page title are very important! The title of the page is used by search engine algorithms to determine the order when search results list the pages.

The title element :

creates a title for the toolbar in the browser.
When a page is added to favourites, it gets a title.
In search engine results, the page is given a title.

Therefore, try to make the title as exact and meaningful as possible :

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

Omitting <html> and <body>?

Without the html and body tags, an HTML page will validate as follows :

Example :-

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

The html and body tags, on the other hand, should always be included!

body can lead to errors in the old browsers by omitting.

Omittinghtml and body can crash the software for both DOM and XML.

You can also search for these topics, html omitting html and body elements example, html omitting html and body tags detection.

Omitting <head>?

You may also omit the HTML tag head.

Browsers will append to a default head element all elements before body.

Example :-

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

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

</body>
</html>

We recommend that the head tag be used, however.

You can also search for these topics, html omitting head code unit, html omitting head coverage section, html omitting head not working, html omitting head raw method.

Close Empty HTML Elements?

Optionally, empty elements are closed in HTML.

Allowed :-

<img src="html-resources/img-computer.jpg">
<br>
<hr>

Also Allowed :-

<img src="html-resources/img-computer.jpg" />
<br />
<hr />

Keep the closing slash (/) as XML and XHTML are necessary to get your page access by XML/XHTML.

You can also search for these topics, close empty html elements code example, close empty html elements beween tags, close empty html elements remove or self.

Add the lang Attribute

In order to declare the Website language, you should always include the lang attribute within the html tag. This is intended to support browser and search engines.

Example :-

<html lang="en-us">

You can also search for these topics, html add the lang attribute accesibility, html add the lang attribute codes and change, html add the lang attribute example, html add the lang attribute format.

Meta Data

In an HTML document, both the language and the meta charset="charset" character encoding should be defined as early as possible for correctly interpreting and search-engine indexing :

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

You can also search for these topics, html meta data example, html meta data refresh, html meta data best practices, what is meta data, html meta data how to use, html get meta data.

Setting The Viewport

The viewport is the visible area of a webpage for the user. It changes with the device - it is smaller than on a computer screen on a mobile telephone.

All of your web pages should have the following meta element :

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

This provides browser instructions for controlling and scaling the page.

The width=device-width part defines the page width to follow the device screen width (which will vary depending on the device).

Initial Scale=1.0, when the page is first loaded by the browser, sets the initial zoom level.

You can also search for these topics, html change viewport width size, and content type, html setting the viewport default value, html setting the viewport example, html setting the viewport default select option and data attribute.

HTML Comments

Short comments on a single line like this should be written :

<!-- This is a comment -->

Comments extending beyond just one line should be written as follows :

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

If they are divided into two spaces, long observations are simpler to observe.

You can also search for these topics, html comments example, html comments shortcut syntax, what is use of html comments in html, what is conditional comments in html, how to view html comments, how do we write html comments, how to hide html comments from view source, how to put html comments.

Using Style Sheets

For links to style sheets, use the following syntax (the type attribute is optional) :

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

CSS rules that aren't too long can be written in this format :

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

CSS rules that are too long to fit on a single line should be broken up into multiple lines :

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

Set the opening bracket on the same selector line
Use one area before the bracket opens
Use two spaces of indentation
Use the semi-column after each value-pair, including the last
If the value contains spaces, only use quotes around it
Without leading spaces, start a new line with the closing bracket

You can also search for these topics, html using style sheets adding, using external style sheets in html, html using style sheets not working.

Loading JavaScript in HTML

To load external scripts, use the following syntax (optional the type attribute) :

<script src="myscript.js" />

You can also search for these topics, loading javascript in html file example, javascript not loading in html, loading html code in javascript, loading javascript code internally or externally in html .

Accessing HTML Elements with JavaScript

JavaScript errors may occur if you use "untidy" HTML code.

These two declarations of JavaScript yield different findings :

Example :-

<!DOCTYPE html>
<html>
<body>

<p id="Demo">This is paragraph 1.</p>
<p id="demo">This is paragraph 2.</p>

<script>
    // Only paragraph 2 will be overwritten
    document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

Output :-

This is paragraph 1.

Hello

You can also search for these topics, accessing html element with javascript write or display, accessing html element with javascript without document, javascript access or change html element attribute, accessing html element with javascript how to create or remove.

Use Lower Case File Names

When it comes to filing names, some web servers (Apache, Unix) are case sensitive : "london.jpg" cannot be accessed as "London.jpg."

There's no case-sensitive on other web servers (Microsoft, IIS) : "london.jpg" can be accessed as "London.jpg".

You have to be aware of this if you are using a mix of uppercase and lowercase.

Even minor errors will break your website if you switch from a case-insensitive to a case-sensitive server.

Always use lowercase file names to avoid these issues!.

You can also search for these topics, html use lower case file names extension automatically or default, html use lower case file names example.

File Extensions

The .html extension for HTML files should be (.htm is allowed).

A .css extension should be provided to the CSS files.

A .js extension should exist for JavaScript files.

You can also search for these topics, html file extensions default list, html accept file extensions, html save file with extensions.

Differences Between .htm and .html?

The file extensions .htm and .html do not differ!.

Each web browser and web server will treat both as HTML.

You can also search for these topics, difference between .htm and .html files and extension.

Default Filenames

The server adds only the default filename, for example "index.html" and "Index.html". When a URL does not specify a filename to the end (as in the "http://www.simmanchith.com/") the server adds the default name.

If the default filename is set to "index.html" your server, then your file must be named "index.html," rather than "default.html".

Servers can be set with several default filenames, however : you can generally configure as many default filenames as you like.

You can also search for these topics, html default filenames extension, html default filenames address bar, html default filenames build, change and case sensitive, html default filenames for a new document.