'Staggered' mark up?


I’m working from the ‘Build Your Own Web Site The Right Way’ by Ian Lloyd, and have completed the first exercise in his book.

My question is: In his book his mark up goes something like that below, all nicely staggered…(Actually, for some reason, when I post this thread the spacing disappears from the markup below, so it doesn’t view as staggered. I hope you know what I mean though? For example, the title tag sits a few spaces in from the left margin and so on)[/B]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
<html xmlns=“http://www.w3.org/1999/xhtml”>
<title>The Most Basic Web Page in the World</title>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>

Whereas my mark up on NOTE PAD went something like this, namely, without all the ‘staggering’:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
<html xmlns=“http://www.w3.org/1999/xhtml”>
<title>The Most Basic Web Page in the World</title>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>

[B]It still viewed ok in the browser, but is this ok to not stagger…why stagger the code?
Also, as long as the mark up is saved as a .html file, does it matter whether it’s saved in ‘save as type’ under Text Documents (*.txt) or All Files?

Many thanks in advance for any help.

Best wishes,


Hi sbg, welcome to the forums.

What you are calling “staggered” is “indentation”. It is not necessary, but is a coding style convention. Indentation, and other “whitespace”, does not affect the rendering of the mark-up, but can be very useful in making the code more readable. This is especially true when the page gets more complex has has many levels of nested tags. Keeping the tag pairs indented the same allows you to easily see which closing tag belongs to which opening tag. Of course you could use comments instead (or use both). The main thing is to write it so it’s easier for you to read.

.html files are plain text files with the .html extension. You could save it with the .txt extension and then rename it with the .html extension if you wanted to.

Yes it does because using save as type *.txt can add a .txt extension to the filename automatically so that you end up with index.html.txt and then you have to rename the file to get rid of the .txt and if you have “hide known extensions” turned on you have no way to see the .txt on the end or to rename the file to get rid of it.

The only way to ensure that the file gets named correctly is to either specify “All Files” or to surround the actual filename in “” so that the program knows not to add an extension.

(Surrounding with “” is also the only way to save .htaccess files with their correct name.)

A lot of people, including myself, stagger code to make it easier to work with. Others don’t. Some keep the indented, commented versions on their home/work computers, and put “compressed” copies up for quicker loading.

This site compresses your CSS.

This site compresses your HTML.

If all you have are the compressed version then you can recreate the formatted version using HTML Tidy. http://tidy.sourceforge.net/

Stephen, does compressing CSS and HTML files increase load speed that much? (I’m talking small-to-average sites, not monsters like Yahoo! or ESPN or such.)

Not significantly - unless all your visitors are still on 150 and 300 baud dialup connections where every few extra characters add another second to the download time.

The only time it would make a big difference is if you tend to put lots of comments in your page and the compression strips those comments out (in which case you would need to keep the original since nothing can put the comments back).

As an example of where compression does make a difference the jQuery JavaScript library is 114k formatted and well documented but only 18k once the comments and spaces are removed.

If removing the comments and surplus spaces from your HTML or CSS would result in a noticeable percentage difference in the file size then it may be worth doing. It may also be worth doing if you have done everything else you can think of to reduce the load time and your page still loads more lowly than you’d like - on the basis that every little bit helps.

If you don’t comment your code then stripping all the spaces out can’t hurt since you can always use HTML Tidy to put the spaces back. So compressing out the spaces can never be considered wrong even where it makes so little difference as to not matter.

In most cases though there are better uses you could make of the time than running your page source through a compressor.

Thanks for all your help guys,

I never cease to be amazed at the resources available on the internet and forums such as these, we no longer need schools and universities, only a passion for learning.

So, a huge big thankyou to all who have a care to share their knowledge.

Best wishes and happy new year,


I think they’ll always be a place for academia. The internet is a great place for finding answers to your questions. But sometimes it’s good to be asked questions to get your answer. I know I’m not always the best at guiding my own path through things to my desired goal.

That’s what I thought, at least for my purposes. Thanks!

Wow, Stuart, can’t go there. The Internet is a great teaching resource, I teach Web design to my students using mostly Web-based resources (including SP), but I would never want to heave schools and universities over the side. I’m now considering spending money I don’t have for a basic Photoshop class at the local community college, because I don’t seem to have the patience (or maybe the aptitude :slight_smile: ) to learn it from online tutorials.

When you “stagger” code, it makes it easier to check that tags are closed (beginning and ending tags will line up/have the same indentation) and you can quickly tell how sections are nested or how they relate to each other. It’s just another helpful trick you can use when dealing with code, kind of like syntax highlighting/color coding in Dreamweaver and Notepad++.

I find staggering most helpful when dealing with tables of data. On simple sites for testing I may only indent the code for content and leave the container code (two or three divs) straight, though I wouldn’t do that for a final production site. It’s better to pick a method and stick to it, consistency can really speed things up down the line.

I agree. I too use the web as a teaching aide.

The one thing you can’t get from the web is the filtering from someone who already knows the material to tell you which pieces fit in what order, which are important and which are trivial, which are of historical interest only, and which are just plain incorrect. In a classroom with someone guiding the class through the information on the web you at least get another perspective on the information from someone who you know is qualified to teach the material (something that may not be true of those who wrote the material on the web that is being used (and where the individual would therefore have no way of telling which of two pages stating different things was the correct one).

Teachers are the ultimate interactive tool. When a student gets stuck on a concept or can’t find an error, if he’s learning from a Web tut, he can either curse the computer with no effect except a rise in his blood pressure, or send a question to the author (and often receive a “Screw you, n00b!” response). A teacher is there to identify the student’s individual difficulty and assist him through it, in a way tailored to the needs of that individual student. Other students can also help each other through the sticky parts.

What’s that old Asimov story about the kids doing their schoolwork on computers, and wishing for the old days of live teachers and live kids in real classrooms?

Off Topic:

Congratulations on the shiny new JS Guru banner, Stephen.

You are getting mixed up - that’s the old JS guru banner - I declined the nomination for 2009 JS guru because I won it in 2008. Just waiting for the shiny new Programming Guru banner to replace it.