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.
Always Declare Document Type
Always state the first line in your document as a document type.
The appropriate HTML document type is :
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 :-
This is a paragraph.
Bad :-
This is a paragraph.
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 :-
This is a paragraph.
This is a paragraph.
Bad :-
This is a paragraph.
This is a paragraph.
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 :-
Visit Simmanchith
Bad :-
Visit Simmanchith
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 :-
Bad :-
Very bad :-
It does not work, because there are spaces in the value :
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 :-

Bad :-

Related Links
Spaces and Equal Signs
HTML allows for the same sign spaces. But spaceless readings and groups are easier together.
Good :-
Bad :-
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.
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 :-
Famous Cities
Tokyo
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.
Bad :-
Famous Cities
Tokyo
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.
Good Table Example :-
Name
Description
A
Description of A
B
Description of B
Good List Example :-
- London
- Paris
- Tokyo
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 :
HTML Style Guide and Coding Conventions
Omitting <html> and <body>?
Without the html
and body
tags, an HTML page will validate as follows :
Example :-
Page Title
This is a heading
This is a paragraph.
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.
Omitting <head>?
You may also omit the HTML tag head
.
Browsers will append to a default head
element all elements before body
.
Example :-
Page Title
This is a heading
This is a paragraph.
We recommend that the head
tag be used, however.
Related Links
Close Empty HTML Elements?
Optionally, empty elements are closed in HTML.
Allowed :-
Also Allowed :-
Keep the closing slash (/) as XML and XHTML are necessary to get your page access by XML/XHTML.
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 :-
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 :
Page Title
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 :
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.
HTML Comments
Short comments on a single line like this should be written :
Comments extending beyond just one line should be written as follows :
If they are divided into two spaces, long observations are simpler to observe.
Using Style Sheets
For links to style sheets, use the following syntax (the type
attribute is optional) :
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
Loading JavaScript in HTML
To load external scripts, use the following syntax (optional the type
attribute) :
Accessing HTML Elements with JavaScript
JavaScript errors may occur if you use "untidy"
HTML code.
These two declarations of JavaScript yield different findings :
Example :-
This is paragraph 1.
This is paragraph 2.
Output :-
This is paragraph 1.
Hello
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!.
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.
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.
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.