Omit The Protocol
Omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless the respective files are not available over both protocols. Omitting the protocol from embedded resources makes the URL relative and avoids mixed content issues and results in minor file size savings.
Not Recommended
<script src="https://www.example.com/scripts/javascript.js"></script>
body{
background: url(https://www.example.com/images/background.jpg);
}
<img src="https://www.example.com/images/logo.png" />
Recommended
<script src="//www.example.com/scripts/javascript.js"></script>
body {
background: url(//www.example.com/images/background.jpg);
}
<img src="//www.example.com/images/logo.png" />
When a URL's protocol is omitted, the browser uses the underlying document's protocol instead. It looks strange at first, but this "protocol-less" URL is the best way to reference third party content that's available via both HTTP and HTTPS. This would certainly solve a bunch of mixed-content errors we're seeing on HTTP pages -- assuming that our assets are available via both HTTP and HTTPS.
Code Formatting Rules
Indentation:
Don't use tabs or multiple tabs for indentation. Instead use 2 spaces at a time to indent your code.
Avoid Capitalization:
Always use lowercase only and avoid capitalization whenever possible. All your code has to be in lowercase. This applies to element names, attributes, attribute values (unless text/CDATA), selectors, properties, and property values (with the exception of strings).
Not Recommended
<A HREF="/">Home</A>
<IMG SRC=" clock-radio.png" ALT=" Clock Radio ">
Recommended
<a href="/">Home</a>
<img src="clock-radio.png" alt="Clock Radio">
Trailing Whitespace:
Remove all trailing white spaces. Trailing white spaces are unnecessary and increase the page size. Removing unnecessary whitespace will help you reduce the file size and save website bandwidth.
Not Recommended
<p>Welcome to the world of Joy._</p>_
Recommended
<p>Welcome to the world of Joy</p>
General Rules
Encoding:
Always use UTF-8 as character encoding. Specify the encoding in HTML templates and documents via <meta charset="utf-8">. Do not specify the encoding of style sheets as these assume UTF-8.
Comments:
Remove all unnecessary and unwanted comments from your HTML, Java Script and CSS, as it save many bytes of data, and reduces the file size and browser renders them faster. Use comments to explain code like what does it cover, what purpose does it serve.
Entity Code:
There is no need to use entity references like ", , or , assuming the same encoding (UTF-8) is used for files and editors as well as among teams. The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or "invisible" characters (like no-break spaces).
Not Recommended
The currency symbol for the Euro is &eur;.
Recommended
The currency symbol for the Euro is "".
TYPE Attributes:
Omit type attributes for style sheets and scripts. Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. Do not use type attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript).
Not Recommended
<link rel="stylesheet" href="https://www.example.com/css/style.css" type="text/css">
<script src="https://www.example.com/scripts/javascript.js" type="text/javascript"></script>
Recommended
<link rel="stylesheet" href="//www.example.com/css/style.css">
<script src="//www.example.com/scripts/javascript.js"></script>
General Formatting:
Use a new line for every block, list, or table element, and indent every such child element. Put every block, list, or table element on a new line. Also, indent them if they are child elements of a block, list, or table element.
<table>
<tr>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Bangalore</td>
<td>India</td>
</tr>
</table>
<ul>
<li>SEO</li>
<li>SEM</li>
<li>SMM</li>
</ul>
About the Author: Joydeep Deb
