Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    This tutorial took three or four hours to write, so I'd appreciate at least some input as to what you think :-). Regardless, I'll have to break it up into chunks as it is quite long.

    Introduction
    There are many techniques that are useful to any kind of programming language. Although XHTML is not technically a programming languages (it is what we call a markup language, a language that doesn't control flow or activity, but rather that simply adds description to existing text), some of the same techniques apply to it, as well.

    Possibly the most important programming technique is indentation. In a regular piece of text, indentation is generally used to indicate the beginning of a new paragraph. When quoting large amounts of text, that text is indented in what is commonly referred to as a `block quote'. These are all stylistic devices to help us read the text more easily -- they set apart certain parts of the text so that we might notice them more.

    In the case of block quotes, it helps to clearly set apart that which is not one's own work when it is too long to simply put in quotation marks (how long depends on the writing style you are using). In the case of paragraph differences, it helps emphasize the logical divisions in the text with stylistic ones. This latter usage is the reason that code is indented.

    Indentation is critical to easy-to-read code. XHTML in particular has the characteristic that it is a structural language -- it describes the structure of a document. Now, XHTML describes the structure of a document for a browser. Theoretically speaking, it also describes it for a human being reading the code; however, since human beings do not read, parse, and process XHTML with the ease that a browser can do it, we need additional aids. That is what indentation is for XHTML -- an aid to help us parse the XHTML and grasp the structure of a document quickly, without having to read every single tag. It also helps show us the flow of the code, if you will, which later permits us to get to a specific place in the document much more quickly.

    I won't explain the concept of flow of code as it is a difficult concept to explain. I'll just leave it at the fact that, if you've seen code flow, you'll know what I'm talking about. If you haven't seen it yet, you will as you get better at coding.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Indentation and Line Breaking

    (X)HTML
    On to indentation in (X)HTML. The difference in indentation between HTML and XHTML is virtually nonexistent -- the structure of the document produced is virtually identical, so even if closing tags are absent, the indentation can still represent the structure. Since that is the basic difference between the two, I will simply present how to indent XHTML.

    First off, two concepts are important to know: block-level elements and inline elements.

    Block-level elements are elements like paragraphs (p tag), forms, and headings (tags like h1 and h2). The characteristic of these elements is that they can contain other block-level elements as well as any inline elements and pure textual data. Generally speaking, putting one of these in a page results in its appearing on a separate line (most of these also have a certain amount of spacing above and below by default). The generic block-level element, whose sole purpose is essentially to group other elements together, is the div (which can be assumed to stand for `division' -- a division to group elements together).

    Inline elements are elements like emphasis (em tag), strong, and links (`a' tag). The characteristic of these elements is that they can only contain other inline elements and pure textual data. Putting these in a page has no effect on surrounding text. Often these will give a specific styling to the text they contain (for example, em italicizes text, strong bolds it, and a link will make it a certain color and underline it). The generic inline element, whose purpose tends to be to give a certain style to a specific chunk of text, is the span element.

    Now that we have those definitions out of the way, we can more clearly explain the indentation style that will be presented. Generally speaking, just as they are styled, so are the tags placed. What I mean by this is, we generally put the tags for block-level elements on their own lines, while we tend to put the tags for inline elements within the text wherever they would usually go. This helps us, when reading the code, to quickly grasp which tags will induce a new line or block in the page and which will simply be used for in-place information.

    Each block-level element indicates a new level of indentation; for example:
    HTML Code:
    <html>
    	<head>
    		<title>This is the title of the page</title>
    	</head>
    	<body>
    		<h1>This is the title of the page</h1>
    		<h2>This is the title of the section</h2>
    		
    		<p>This is the first paragraph</p>
    		<p>This is the second paragraph</p>
    	</body>
    </html>
    Note how the closing tags for the block-level elements are on their own-line, except in the case of the p and h* tags, and are also at the same indentation level as the opening tags.

    This gives us a good indentation framework, but there are still a couple of issues to deal with. First is grouping -- how can we indicate sections that are mostly unrelated within the page, even though they are both inside a common tag? The quick solution to that is adding a blank line in between. Above, for example, the head and body tags are both children of the html tag, but they serve unrelated purposes. As such, we can rewrite lines four and five:
    HTML Code:
    ...
    </head>
    <body>
    ...
    Instead, we can write:
    HTML Code:
    ...
    </head>
    
    <body>
    ....
    Though the difference isn't all that important here, the longer a document gets, the more it helps to indicate such relationships with extra blank spaces.

    Another important point to make about block-level elements is that they can sometimes contain a lot of raw text. Paragraphs, for example, will often have a lot of text inside them. There are two ways to put this:
    HTML Code:
    <p>This is the text that goes into the paragraph, starting right after the tag
    and ending right before the closing tag.</p>
    and
    HTML Code:
    <p>
    	This is the text that goes into the paragraph, starting the line after the
    	opening tag and indented, and ending the line before the closing tag, which
    	is at the same indentation level as the opening one.
    </p>
    Which you use is a matter of personal preference. I like to use the latter. Especially when you put other block-level elements inside, this proves a good way to be consistent, since other block-level elements will be on their own lines anyway, and if you contain other block-level elements, you should always have the closing tag of the inner element on a line different from that of its parent.

    There is still an issue with tables. tr and td tags (table rows and cells) are not clearly block-level or inline elements. There are two ways to deal with this:


    • We can treat the tr tags as block-level (e.g., give them each a new line) and treat the td tags as inline (e.g., put them on the same line). This mimcs the rendering of browsers -- tr tags indicate new rows, whereas td tags indicate cells. The issue with this method comes when we have long text within the table cells. It is in these cases that we run into the issue of line wrapping, which is covered a little bit further into the tutorial.
    • We can treat both tr and td tags as block-level, putting them each on their own line.
    Examples:
    HTML Code:
    <table>
    	<tr>
    		<td>This is the first example</td><td>With two columns</td>
    	</tr>
    </table>
    HTML Code:
    <table>
    	<tr>
    		<td>This is the second example</td>
    		<td>With two columns, too</td>
    		<td>Or three, without any complications or misunderstandings</td>
    		<td>Or four</td>
    		<td>&amp;c.</td>
    	</tr>
    </table>
    Which of these two methods is used is essentially up to the developer. Personally, I lean towards the latter implementation for the reason mentioned in the former. Which brings us to the issue mentioned there.

    Line Breaking
    Each tag goes onto its own line, but sometimes text gets really long. I'm pretty sure I'm not the only one who has hit View Source and been frustrated at having to scroll left and right just to see the code. This is an extremely annoying issue that comes from people who don't break their text at even intervals.

    Now, this is a common mistake, and generally arises in those who aren't used to command-line interfaces, which are almost always limited to eighty-character line length. The concept of the eighty-character line wrap came up with command-line editors such as ViM and Emacs, where the lines on screen were only eighty characters long. By consequence, users would often manually start a new line at the eightieth character, to avoid having to scroll left and right.

    This is the style of line breaking that I would recommend using. Most editors support at least showing you a line at the eightieth character, so that you can break the line there. Some support automatically wrapping your text at this line (that is the case with KDE's Kate editor on Linux). Appendix A contains the options that work best for this for three Free Software (GPL'd) editors on Windows (JExt, JEdit, and TS Web Editor). It also contains the options for a few common Linux editors (ViM, Emacs, and Kate). Note that ViM and Emacs also run on Windows, though Kate doesn't (yet). If you PM me, I can add further programs to the list.

    Indentation Rules
    Indentation itself seems like a simple enough idea -- just hit tab, and you've indented your code. That is not, however, the case. There is a somewhat heated debate over how code should be indented. `How many ways can code be indented?' you may ask. There are actually two ways, one of which has a couple of variations.

    The first way of indenting code is with tab characters. In C/C++, Java, PHP, and other languages, these are represented as \t. In Visual Basic, as vbTab. This is one character that represented an indentation. The idea behind using this character is that each person can adjust the width of the tab; editors generally include an option for making one of these characters appear as four, eight, or some other such number of spaces.

    The problem with this method of indentation is that of line wrapping, again. If one person codes with the tab character, and displays it as four spaces, but another person displays it as eight spaces, then you may start getting lines longer than the editor space. Using an eighty-character wrapping point can eliminate some of this, as most editors now run in windows which will show somewhere above eighty characters, often 160 of them at least. However, it is still a sticky situation.

    The second method of indentation is with explicit spaces. This involves creating however many `space' characters to get to the indentation point you're looking for. Usually people go for four or eight spaces, as that is reasonably standard. Some even use two.

    As for me, my preferred method of tabbing is with four spaces. This can also usually be set as an option within editors, where hitting `Tab' will insert four spaces instead of creating a tab character. How to do it for the aforementioned editors can be found in Appendix B.

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Overindenting, overview, example, and notes

    Overindenting
    There's one thing you don't want to do when indenting which becomes particularly important with XHTML, where you can get into several levels of indentation, especially when nesting tables for layout (which you shouldn't do!!). I refer to this error as overindenting. It happens when you keep indenting further levels of code and end up indenting so much that you have practically no room left between the indentation and the line-breaking point (eighty characters, usually), thus making your life more difficult, when the point of indenting and line breaking is making it easier.

    My solution to this is a rather simple combination of resetting the indentation level and separating the reset area. What I mean by this is best exemplified in the following code:
    HTML Code:
    <div>
    	This is a bit of code that is indented.
    	
    	<div>
    		This is a second level of indentation.
    		
    		<div>
    			This is a third level of indentation.
    			
    			<div>
    			    This is a fourth level of indentation.
    			   
    				<div>
    				 This is a fifth level of indentation.
    					
    					<div>
    					 This is a sixth level of indentation.
    					    
    						 <div>
    							 This is a seventh level.
    							 
    							 <div>
    								 Eight, but there isn't really all that much room
    								 for text now.
    							 </div>
    						 </div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    You may think you'll never get that deep indentation-wise; trust me, sooner or later, you'll probably run into that situation. Here's how we solve the problem:
    HTML Code:
    <div>
    	This is a bit of code that is indented.
    	
    	<div>
    		This is a second level of indentation.
    		
    		<div>
    			This is a third level of indentation.
    			
    <div>
    	This is a fourth level of indentation.
       
    	<div>
    		This is a fifth level of indentation.
    		
    		<div>
    			This is a sixth level of indentation.
    			
    <div>
    	This is a seventh level.
    	
    	<div>
    		Eight, but there's plenty of room to work with now that we've changed
    		how we indent.
    	</div>
    </div>
    
    		</div>
    	</div>
    </div>
    
    		</div>
    	</div>
    </div>
    Note how every three levels of indentation, we go back to the beginning. Also notice how we leave a blank space above and below, to mark clearly that such a reset is happening. The fact that it gets cut every three levels of indentation is actually personal preference -- you use however many you want. But the technique is sound in XHTML. We don't really lose sight of the structure of the document, and we don't back ourselves into a corner.

    Overview and Example
    So we have a list of a rules that we can follow:





    1. Indent block-level elements such as html, p, body, form, and div, indenting one more level for each additional block-level element inside a parent.
    2. Don't indent inline elements such as em, strong, or span, or elements without closing tags such as img or input elements.
    3. Keep the closing tags for block-level elements on the same column as the opening tag.
    4. Put block-level elements on their own lines.
    5. Put tables on their own lines and trs on their own lines. Recommend putting tds on their own lines, although you can also treat them like inline elements.
    6. If you are going to start the text for block-level elements on its own line, indent it. **optional, but recommended**
    7. Wrap lines at eighty characters.
    8. Indent with four spaces. **optional, but recommended**
    9. Every three indentation levels, unindent and leave a blank line above and below the unindentation.
    10. Use blank lines to separate unrelated bits of XHTML.
    11. When having to divide a tag across lines (for example, if you can't fit all of the attributes onto one line), indent the lines beyond the first one. This rule also applies to inline elements whose contents are split over more than one line.
    12. When you put a linebreak at the end of a line (<br />), change lines after it.
    To illustrate the above rules, here is an example:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="en">
    	<head>
    		<title>Programming Tutorials and Antonio Salazar</title>
    		<link rel="stylesheet" type="text/css" href="style.css" />
    	</head>
    
    	<body>
    		<h1>Antonio Salazar</h1>
    		<h1 id="subtitle">Also Known As *******...</h1>
    	
    		<p class="photo">
    			<img class="photo" src="images/moi.jpg" alt="It is I"
    				title="It is I" /><br />
    			Caption
    		</p>
    	
    		<p>
    			Many people I meet whom I do not know ask, 'Who are you?'. And I
    			tell them I am Antonio Salazar<sup><a href="#def1">1</a></sup>.
    			And grandiose as that may sound, I have no relation to the former 
    			<a href="http://en.wikipedia.org/wiki/Antonio_Salazar">ruler of
    				Portugal</a>.
    		</p>
    	
    		<p>
    			So, on to the more in-depth stuff. In my spare time, I program, and,
    			on occasion, play basketball or soccer. I'm not particularly good
    			at either sport, but they're both fun :-).
    		</p>
    	
    		<p>
    			Programming-wise, I can hold my own in C++, JavaScript, (X)HTML
    			CSS, PHP, ASP, and Visual Basic. I taught myself all of those
    			except VB, for which I had an teacher who was bad enough that I'm
    			pretty sure I taught myself that, too...
    		</p>
    	
    		<h2>Tutorials</h2>
    	
    		<p>
    			Why does this page have the title 'Programming Tutorials and Antonio
    			Salazar'? Because soon enough, I'm going to try to make this site
    			more about programming and less about me, cuz I'm boring and
    			programming is really cool. So stick around and keep checking back,
    			I may even get around to posting an HTML/CSS/JS tutorial sometime
    			this week!
    		</p>
    		
    		<h2><a class="noDeco" id="sfProjects">Free Software Projects</a></h2>
    		
    		<p>
    			Since two years ago, I have started three separate Free Software
    			Projects. The table below describes them: (I know, cheap way to
    			stick a table in...).
    		</p>
    		
    		<table>
    			<tr>
    				   <td class="titleRow">Project Name</td>
    				   <td class="titleRow">Project Site</td>
    				   <td class="titleRow">Purpose</td>
    				<td class="titleRow">Development Language</td>
    				<td class="titleRow">Development Status</td>
    				   <td class="titleRow">Future</td>
    			</tr>
    		</table>
    		
    		<p id="def1" class="footnote">
    			<sup>1</sup> - 
    			For those of you who are already gearing up to ask, yes, I do mind
    			being called 'Tony' ;-). And spelling it differently changes
    			nothing...
    		</p>
    		
    		<p class="afterword">
    		    Required are a few image links to the outside. Fortunately, I have
    			plenty of those to supply:<br />
    			
    <a class="noDeco"
    	href="http://spreadfirefox.com/community/?q=affiliates&amp;id=0&amp;t=59">
    	<img class="hiddenLinked" alt="Get Firefox!" title="Get Firefox!" 
    	 src="http://www.spreadfirefox.com/community/images/affiliates/Buttons/180x60/safer.gif" /></a>
    	
    	</body>
    </html>
    This example is from a page I wrote about myself for my first-semester GA Tech CS class. A good advantage of this page was the fact that I had to include a variety of different elements in the page, which are useful for exhibiting indentation, as well. Notice that in certain cases I skirt the indentation rules or the linebreaking rules (for example, the last a tag skirts both of them; it unindents completely even though a is an inline tag, and the img tag inside it goes longer than eighty characters -- in this particular case, there was no real way to make that line short enough, so I went for a few small changes that still maintained the structural visualization fairly well); this emphasizes the point that these rules are not set in stone. In certain cases, you have to break them. But following them in general gets you into the habit so that you can read the code you write more easily, and so that others can read the code you write more easily, too.

    Notes
    There is one key issue with breaking a line at eighty characters; namely, how do you handle database information outputted via, say, PHP? In response to that, as part of OpenEduWeb (see my signature), I am attempting to write a PHP function that will take text and wrap it appropriately to make resulting code clean. I'll announce its availability here when it gets done.


    EDIT: Another note is that for some reason vBulletin software is messing up some of the indentation in the example. If you see something inside a paragraph that starts earlier or later than the rest of the paragraph, that's an error on vBulletin's part, not on mine. It probably has something to do with (surprise!) vBulletin turning my four-space tabs into actual tab characters.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Appendices

    Appendix A: Line Breaking Editor Settings
    Windows Editors
    JEdit
    In JEdit, you can set the visible wrapping margin to appear at the eightieth character by setting Utilities->Global Options->Editing->Wrap Margin to 80. In the same dialog, set Word Wrap to hard to make JEdit automatically cut the lines off at 80 characters on its own. Soft means that even though it will cut them off in the display, in the final file, it will leave them as long lines. You don't want that, either. If you leave Word Wrap set to None, you will have to cut the lines off yourself; then, you can use the margin line as a guide.

    JExt
    In JExt, you can set the visible wrap guide to appear at the eightieth character by setting Edit->Options...->Editor->Wrap Guide offset to 80 and checking Enable Wrap Guide in the same dialog. There is no setting in JExt to automate word wrapping; you have to do that part yourself, using the wrap guide as exactly that -- a guide.

    TS Web Editor
    In TS Web Editor, you can set the right edge (or wrap guide) to appear at the eightieth character by setting View->Editor Settings->Right Edge to 80. The right edge appears to be impossible to turn off, and there does not seem to be a setting in TS Web Editor to automate word wrapping; the right edge must be used as a guide.

    Linux Editors
    **To be filled in when I boot into Linux again.**

    Appendix B: Indentation Settings
    Windows Editors
    JEdit
    You can set JEdit to use spaces instead of the tab character when you hit `Tab' by checking Utilities->Global Options->Editing->Soft (emulated with spaces) tabs. In the same dialog, set `Tab width' and `Indent width' to 4 to use four spaces for tabs. `Tab width' sets the width that tab characters will be displayed at (for external files) and `Indent width' sets the width that will be used to indent your files.

    JExt
    You can set JExt to use spaces instead of the tab character when you hit `Tab' by checking Edit->Options...->Editor->Soft Tabs. In the same dialog, set the `Tab Size' to 4 to use four spaces for tabs. There is no distinction in JExt between displayed and used tab widths as there is for JEdit.

    TS Web Editor
    You can set TS Web Editor to use spaces instead of the tab character when you hit `Tab' by checking View->Editor Settings->Tabs to Spaces. In the same dialog, set the `Tab Width' to 4 to use four spaces for tabs. As in JExt, there is no distinction between displayed and used tab widths as there is for JEdit.

    Linux Editors
    **To be filled in when I boot into Linux again.**


    Appendix C: Getting the Editors
    Below is a list of the places where you can find the aforementioned editors:
    Windows Editors

    Linux Editors
    Please note that most Linux editors should come in packages with their distribution. Make sure you check your package CDs or repositories before downloading these manually.

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    This was a very interesting read.. good job Shadowfiend!!

    Indentation is not somthing that many people take into havy consideration, but it can make all the difference. I espcially liked your section about tabs vs spaces as methods to indent code.


  7. #6
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Yes, enjoyed that.

    The solution to "Overindenting" is not one that I would have thought of; very cunning! As you say the lack of space for content when too far indented is an age old problem and one that is never going to go away...

    One thing, though... I do not tend to indent <head> or <body> tags. I feel that the benefit gained in terms of readability is not sufficient to justify 99% of your source being indented.

    ie.
    Code:
    <html>
    
    <head>
        <title>Waffle</title>
    </head>
    
    <body>
        <p>Hello World!</p>
    </body>
    
    </html>
    Sean

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    That is a good point. I tend to waffle about doing that. Sometimes I do it, sometimes I don't. When I'm using something that automatically indents my code, such as Kate/Quanta on Linux, then I tend to just leave it as is. But when I'm writing in something where I indent my own code, like yourself, I tend to start indenting after the second toplevel tag.

  9. #8
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,656
    Member #
    1234
    Liked
    137 times
    AWESOME ARTICLE!
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  10. #9
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    Great Article.. Cheers!!

    Great job on this article very useful..
    Overindenting is a problem I have encountered many times..

    A couple questions:
    Does formatting XHTML code have any affect on the way a
    page is loaded or parsed by a browser?

    I have encountered this with CSS:
    It seems to make CSS files smaller but.. I find very annoying..

    Here is how I normally format CSS ..
    #main_content
    {
    border:2px solid #FFCF13;
    width:597px;
    height:auto;

    }
    This way of formatting seems to make a CSS file smaller
    #main_content{border:2px solid #FFCF13; width:597px;height:auto;}
    which is better and does the size of you CSS file really matter?

    Thanks,
    igeek

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The formatting of XHTML should have no effect, nor should that of CSS.

    Size always matters, of course, but here we're talking about a matter of bytes, essentially. You'll notice Javascript files are often trimmed a lot, with all the code glued together and variables named as single letters to optimize filesize.

    At the end of the day, it's a question of [i]how much[i] -- how much difference will it make in the end filesize? For example, in GMail's case, the Javascript is probably at least a third the size it would be if it were in its original, clean form. But in the case of a small site's CSS file, it probably doesn't make that much difference.

    I personally use the former method. I find that being able to read my CSS is very important, and the latter way of writing it is far far less legible.

    That said, there are probably tools that you can run on well-formatted CSS and JS files that will turn them nasty but smaller. The upside for those who are secretive about their code is it takes a dedicated person to decipher JS code that has been trimmed, for example. I'm not secretive about my code -- quite the opposite --, so I try to make it legible.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

indent in xhtml
,
indent text xhtml
,
indent xhtml
,
indenting text in xhtml code
,
word wrap indent in xhtml
,
xhtml full paragraph indent
,

xhtml indent

,

xhtml indent code

,
xhtml indent tag
,
xhtml indent text
Click on a term to search for related topics.
All times are GMT -6. The time now is 10:50 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com