SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mark-up indentation

    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

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Evangelist adesignrsa's Avatar
    Join Date
    Aug 2004
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ross Allchorn
    Web Consultant
    www.allchorn.com
    Twitter - @allchornr

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The easiest way to ensure your indentation is consistent is to just run the page through Tidy once you finish writing it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Tidy as a stand-alone program is a free download.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Tidy as a stand-alone program is a free download.
    For those that use Firefox there is also a add on for validation that offers HTML tidy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •