Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Search Engine People
  • SEO
  • SEM
  • CRO
  • Display
  • Blog
  • Why Us
  • Contact
  • Join Our Team
  • Get A Quote

Toll Free: 1-877-695-7388

GTA: (647) 699-2838

"Omit The Protocol" And 7 Other Tips To Write Better Web Code

Joydeep Deb | August 17th, 2012
Tweet
Share3
Share
Pin
3 Shares

HTML and CSS Style Guide

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="http://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="http://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>

Tweet
Share3
Share
Pin
3 Shares
Posted in Web DesignTagged code, Web Design

About the Author: Joydeep Deb

Joydeep Deb is a Senior Digital Marketer and Technical Marketer with 12+ years of experience in Digital Marketing, Lead Generation, Online Brand Management, Marketing Campaigns, Search Engine Optimization (SEO), Search Engine Marketing (SEM), PPC, eMail Marketing, Web Analytics, Web Technologies, Web Design and Development.

Blog | Tools | MISC

Recent Posts

  • Maximizing Your E-Commerce Sales:
    A CRO Audit Guide
  • Movin’ On Up! Why Migrating to Google Analytics 4 (GA4) Should be a Priority
  • A Year in Review: The Digital Marketing Trends That Defined 2021
  • The Basics of Video Marketing
  • Just How Much Do Google Reviews Impact Your SEO Ranking?

Categories

  • Analytics & ROI Analysis
  • Company News
  • Content
  • Conversion Optimization
  • CRO
  • Display Advertising/RTB
  • Email Marketing
  • En Español
  • En Français
  • Inbound Marketing
  • Lead Nurture & Marketing Automation
  • Local Search
  • Marketing
  • Mobile
  • Partnership Marketing
  • PPC
  • PR
  • SEO
  • Social Media Marketing
  • Web Design

Additional Posts

Writing Mistakes You Didn’t Know You Make

August 17th, 2012 | by Linda Stacy

Listen – Measure – Monitor: What It Really Means, How To Do It & What To Use

August 16th, 2012 | by Kristy Bolsinger

Effectively Geo Targeting Single-Region & Multi-Regional Sites in Google

August 15th, 2012 | by Neil Perulli

LET'S TALK

Need more information or want to get in touch?

Get in touch!
  • SEO
  • SEM
  • Display
  • Blog
  • Why Us
  • Join Our Team
  • Contact Us
  • Local SEO
  • Small Business SEO
  • Enterprise SEO
  • International SEO

LOCATION

1305 Pickering Parkway,
5th Floor Pickering, L1V 3P2

PHONE

Toll Free: 1-877-695-7388
Greater Toronto Area: (647) 699-2838

Social

© Search Engine People Inc. 2023 – Canada’s Top Digital Agency
© SEP 2023 – A Search Engine People Company | Privacy Policy

Search Engine People