The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My work

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,842 other followers

HTML indentation: 2 spaces

Posted by jpluimers on 2017/10/12

Using too many editors in too many environments, tabbed files usually kills my productivity.

Not just because the structure of the indented code, also because most editors are stupid enough to also use tabs beyond the indentation, for instance for carefully aligned initialisation statements.

Changing the tab-size effectively waves good bye to those.

It’s weird (Wiert loves that word) that HTML peeps even argue about tabs versus spaces:

Most people still use HTML for pixel perfect rendering and spaces help getting character perfect rendering of the source code.

I was glad to bump into [WayBackJefferson Lima answering this on Stack Overflow:

The Google HTML/CSS Style Guide and the W3School HTML(5) Style Guide recommend 2 spaces.

This article also brings an analysis of the effect of tabs vs spaces in the resulting file size.

Source: [WayBack] html5 – html indenting standard, tab or two spaces? – Stack Overflow

So: use 2 spacec for HTML indent.

It doesn’t really matter in transmitted size (minified compressed transfer difference is ~0% and the usual image bloat is way larger than the HTML anyway – just try www.webbloatscore.com and watch).

References:

  • Indent by 2 spaces at a time.
  • Don’t use tabs or mix tabs and spaces for indentation.

Source: [WayBackGoogle HTML/CSS Style Guide

  • Do not add blank lines 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.
  • Do not use unnecessary blank lines and indentation. It is not necessary to indent every element.

Source: [WayBackHTML5 Style Guide

Tabs Spaces Saving
Raw file size 1403 bytes 1703 bytes 300 bytes/18%
Raw file GZipped   327 bytes   332 bytes      5 bytes/1.5%
Raw file minified 1199 bytes 1199 bytes      0 bytes/0%
Minified & GZipped   312 bytes   312 bytes      0 bytes/0%

When minified, it doesn’t matter if tabs or spaces are used, since they are all stripped away.

Source: [WayBackEffect of tabs vs. spaces in HTML files

–jeroen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: