Mark-up indentation

**AGreene** · Jun 30, 2008 10:23

Hello. I am new to Web design and have started using Ian Lloyd's "Build Your Own Web Site the Right Way" as a guide in my efforts. On the whole, I find the book quite useful, but one thing that I do not understand is why the mark-up examples always show varying degrees of indentation between headings, sub-headings, and so forth. Is this just an aid to viewing in outline form? It doesn't seem to be needed as I have pretty much given up on indenting the lines as given and still obtained the desired results. So why is it conventionally presented this way? Neither the proper way to indent (which apparently involves a complicated style change with long paragraphs) nor the reason for doing this are explained in the book (or in any of the other introductory books I have consulted in seeking an answer to this question). Thanks. --Alan

**RetroNetro** · Jun 30, 2008 11:08

I think it is to help you keep track of what opening element a closing element is closing, by them being indented the same amount you can line them up.

HTML Code:

<div id="outer">
 <div id="inner">
  <p>Blah, blah, blah</p>
 </div>
</div>

You see that the closing div for "outer" lines up with the opening one, as does the inner.

**c.t.c.** · Jun 30, 2008 13:00

Yes, I believe many indent their markup to clarify what contains what. However, I've never liked indenting my markup. I keep it flush left and use whitespace between lines as needed. However, I'm usually the only one working on my documents. Perhaps it makes sense to indent as a convention to help those you are collaborating with.

**adesignrsa** · Jul 1, 2008 08:51

A quote which explains why I indent properly:

"Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live."

Further to BPartch's example, it's also nice to do this:

Code:

<div id="blah">

 <p>Blah blah blah</p>

<div><!-- /blah -->

When you're pages get more complex, it's easier to see which ending div tags are which.

**spikeZ** · Jul 1, 2008 09:04

just to add a little to what the guys above have said, it's all about readability and not just for others.
Imagine you had a page with 650 lines of code or indeed something like the code below:

Code:

<div id="wrapper">

	<div id="midContentSecond">
		<div class="contentPanel">
			<div class="contentPanelInner">
			
			
			</div>
		</div>
		
		<div class="contentPanel">
			<div class="contentPanelInner">
			<h2>Book Online</h2>
			<form name="bookOnline" action="" method="post">
				<p><label for="selectHotel">Select Your Hotel</label><br />
						<select name="sels" class="l">
							<option>Bodidris Hall</option>
							<option>Wild Pheasant</option>
						</select></p>
				<p><label for="doa_d">Date of Arrival</label><br />
						<select name="doa_d" class="s">
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
						</select>
						
						<select name="doa_m" class="s">
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
						</select>

						<select name="doa_y" class="m">
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
						</select>
						</p>
				<p><label for="dod_d">Date of Departure</label><br />
						<select name="dod_d" class="s">
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
						</select>
						
						<select name="dod_m" class="s">
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
						</select>

						<select name="dod_y" class="m">
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
							<option>1</option>
							<option>2</option>
						</select>
						</p>
				<p><label for="nights">Promotion Code</label><br />
					<input type="text" name="promoCode" class="l"/></p>
				<p><button type="button" name="check" value="Book your hotel">Book Your Hotel</button></p>
				
			</form>
			</div>
		</div>

		<div class="contentPanel_map">
			<img src="images/map.jpg" />
		</div>
	</div>
	
	<div id="midContentThird">
	
		<div class="contentPanel">
			<div class="contentPanelInner">
			<h2>Hotel Brochures</h2>
			<img src="images/aBridge.jpg" />
			<p>Download the latest brochures <br />from our hotels</p>
			
			</div>
		</div>	

		<div class="contentPanel">
			<div class="contentPanelInner">
			<h2>fiddle me this</h2>
			<p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
			justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
			imperdiet eu, lacinia quis, nunc. Cras at felis.</p></p>
			<img src="images/myImage.jpg" style="margin: auto;"/>
			</center>
			</div>
		</div>

	
			<h3>Welcome to Llangollen Hotels</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
			justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
			imperdiet eu, lacinia quis, nunc. Cras at felis.</p>
			<p>Fusce molestie varius nulla. Mauris pellentesque. Aenean id ante. Fusce vestibulum augue non libero. Quisque varius vulputate
			magna. Donec placerat, nisl in posuere lacinia, felis dui pulvinar es.</p>
	</div>

	<div id="base">

		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
			justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
			imperdiet eu, lacinia quis, nunc. Cras at felis.</p>
			<p>Fusce molestie varius nulla. Mauris pellentesque. Aenean id ante. Fusce vestibulum augue non libero. Quisque varius vulputate
			magna. Donec placerat, nisl in posuere lacinia, felis dui pulvinar es.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
			justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
			imperdiet eu, lacinia quis, nunc. Cras at felis.</p>
			<p>Fusce molestie varius nulla. Mauris pellentesque. Aenean id ante. Fusce vestibulum augue non libero. Quisque varius vulputate
			magna. Donec placerat, nisl in posuere lacinia, felis dui pulvinar es.</p>
	
	</div>
<!-- end wrapper //-->
</div>

From that code you can clearly see where elements start and finish - for example the select menus

Code:

<select name="dod_d" class="s">
	<option>1</option>
	<option>2</option>
	<option>1</option>
	<option>2</option>
	<option>1</option>
	<option>2</option>
	<option>1</option>
	<option>2</option>
</select>

are easy to look at as are the container divs.

Now if this was all left justified.....

Code:

<div id="wrapper">

<div id="midContentSecond">
<div class="contentPanel">
<div class="contentPanelInner">


</div>
</div>

<div class="contentPanel">
<div class="contentPanelInner">
<h2>Book Online</h2>
<form name="bookOnline" action="" method="post">
<p><label for="selectHotel">Select Your Hotel</label><br />
<select name="sels" class="l">
<option>Bodidris Hall</option>
<option>Wild Pheasant</option>
</select></p>
<p><label for="doa_d">Date of Arrival</label><br />
<select name="doa_d" class="s">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>

<select name="doa_m" class="s">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>

<select name="doa_y" class="m">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>
</p>
<p><label for="dod_d">Date of Departure</label><br />
<select name="dod_d" class="s">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>

<select name="dod_m" class="s">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>

<select name="dod_y" class="m">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>
</p>
<p><label for="nights">Promotion Code</label><br />
<input type="text" name="promoCode" class="l"/></p>
<p><button type="button" name="check" value="Book your hotel">Book Your Hotel</button></p>

</form>
</div>
</div>

<div class="contentPanel_map">
<img src="images/map.jpg" />
</div>
</div>

<div id="midContentThird">

<div class="contentPanel">
<div class="contentPanelInner">
<h2>Hotel Brochures</h2>
<img src="images/aBridge.jpg" />
<p>Download the latest brochures <br />from our hotels</p>

</div>
</div>	

<div class="contentPanel">
<div class="contentPanelInner">
<h2>fiddle me this</h2>
<p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
imperdiet eu, lacinia quis, nunc. Cras at felis.</p></p>
<img src="images/myImage.jpg" style="margin: auto;"/>
</center>
</div>
</div>


<h3>Welcome to Llangollen Hotels</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
imperdiet eu, lacinia quis, nunc. Cras at felis.</p>
<p>Fusce molestie varius nulla. Mauris pellentesque. Aenean id ante. Fusce vestibulum augue non libero. Quisque varius vulputate
magna. Donec placerat, nisl in posuere lacinia, felis dui pulvinar es.</p>
</div>

<div id="base">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
imperdiet eu, lacinia quis, nunc. Cras at felis.</p>
<p>Fusce molestie varius nulla. Mauris pellentesque. Aenean id ante. Fusce vestibulum augue non libero. Quisque varius vulputate
magna. Donec placerat, nisl in posuere lacinia, felis dui pulvinar es.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget urna in erat egestas feugiat. Proin ullamcorper, 
justo ac varius scelerisque, libero elit semper velit, et adipiscing lacus mi sit amet risus. In ipsum lectus, feugiat quis, 
imperdiet eu, lacinia quis, nunc. Cras at felis.</p>
<p>Fusce molestie varius nulla. Mauris pellentesque. Aenean id ante. Fusce vestibulum augue non libero. Quisque varius vulputate
magna. Donec placerat, nisl in posuere lacinia, felis dui pulvinar es.</p>

</div>
<!-- end wrapper //-->
</div>

it makes it quite difficult to figure out what is where - which makes debugging and fixing it harder!

**felgall** · Jul 1, 2008 14:34

Of course there is no necessity to actually load the pages to the web that way. You can always feed the page through an HTML compress program before uploading to get rid of all the whitespace and so make the page somewhat smaller and faster to download. When you need to edit it, feed it through Tidy to put back all the whitespace and indentation.

**AGreene** · Jul 2, 2008 12:51

Thank you all for your replies. And just to correct my initial posting, I now find on pp. 53-54 of Mr. Lloyd's manual a section on "Indenting your Markup" which does confirm what you all have been saying regarding indentation being used to keep the various sub-categories organized. So I will adopt this as a practice, if only for its appeal as a stylistic exercise. Still, I remain confused as to how to format long paragraph texts so that line run-over does not start at the flush left margin, but rather to the right of the first line in the paragraph, as shown in Mr. Lloyd's examples (I am using "NoteTab Light" which does not allow me to set tabs or styles). Of course, I could ignore or accept to work around this intrusion, but it would be preferable not to have this interfere with the variable mark-up indentation above and below.

**C. Ankerstjerne** · Jul 2, 2008 13:34

You can of course make carriage returns in your code, and indent from there (as per the example below), but that will make editing very cumbersome (imagine how much work it would be if you needed to add or remove just a few words). Personally, I just let it wrap. This doesn't bother me, since I can then just skip to the next line which doesn't start at the first character. Also, you should be able to set up your text editor to either wrap the text, or overflow the editing window.

Code html4strict:

<div>
  <p>
    Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.
    Sed non felis in eros lacinia
    fringilla. Nunc mi risus, tempus
    eget, posuere vitae, sodales
    et, leo. Donec id nibh vel felis
    accumsan pellentesque.
    Maecenas malesuada
    accumsan quam. Integer vitae
    leo a ipsum sagittis pretium.
    Ut quis tortor at tortor
    vulputate sagittis. Pellentesque
    viverra, elit ornare bibendum
    egestas, tortor justo iaculis
    risus, id dictum massa nulla vel
    arcu. Etiam mattis sem in lacus.
    Nunc scelerisque, diam eu
    consectetuer laoreet, tortor
    nisi pulvinar arcu, non tincidunt
    tellus lorem et enim. Curabitur
    non lectus ac nulla tempor
    fermentum. Phasellus a orci.
    Cras tincidunt erat ut nisi.
    Proin luctus faucibus odio.
  </p>
</div>

**felgall** · Jul 2, 2008 14:09

The easiest way to ensure your indentation is consistent is to just run the page through Tidy once you finish writing it.

**AGreene** · Jul 2, 2008 17:03

Thanks again. Apart from the earlier explanations, I now have learned that I can use my NoteTab Light editor's "toggle wrap" button to switch back and forth between a continuous "unbroken" line (theoretically extending beyond the window), and one that automatically "breaks" at the limits of the window's format. This seems to do the trick for the time being; I now can switch to "unbroken" when I want to view the overall outline format, and then back to "broken" when I want to edit a long-running paragraph's text, etc. As for the Tidy tool: my text editor seems to hint at supporting it (perhaps this is included in the pay-for NoteTab version, whereas I have a free download?), but I have not succeeded in finding or opening it. The main thing, in any case, is to learn things from the ground up.