HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [36]
♦ Use two spaces. Most coders use two or four spaces per indentation level. HTML elements can be nested pretty deeply. Going seven or eight layers deep is common. If you use tabs or too many spaces, you’ll have so much white space that you can’t see the code.
Aptana defaults to four spaces, but you can change it to two. From the General menu, choose Editors⇒Text Editors, and set the Displayed Tab Width option to 2.
♦ End at the left margin. If you finish the page and you’re not back at the left margin, you’ve forgotten to end something. Proper indentation makes seeing your page organization easy. Each element should line up with its closing tag.
Building a nested list
When you look over the code for the nested list, it can look intimidating, but it isn’t really that hard. The secret is to build the list outside in:
1. Create the outer list first.
Build the primary list (whether it’s ordered or unordered). In my example, I began with just the unordered list with the two countries in it.
2. Add list items to the outer list.
If you want text or headlines in the larger list (as I did), you can put them here. If you’re putting nothing but a list inside your primary list, you may want to put some placeholder
3. Validate before adding the next list level.
Nested lists can confuse the validator (and you). Validate your code with the outer list to make sure there are no problems before you add inner lists.
4. Add the first inner list.
After you know the basic structure is okay, add the first interior list. For my example, this was the ordered list of cat names in the U.S.
5. Repeat until finished.
Keep adding lists until your page looks right.
6. Validate frequently.
It’s much better to validate while you go than to wait until everything’s finished. Catch your mistakes early so you don’t replicate them.
Building the definition list
One more type of list — the definition list — is very useful, even if it’s used infrequently. The definition list was originally designed to format dictionary-style definitions, but it’s really useful any time you have name and value pairs. Figure 4-4 shows a sample definition list in action.
Figure 4-4:
A basic definition list.
Definition lists don’t use bullets or numbers. Instead, they have two elements. Definition terms are usually words or short phrases. In Figure 4-4, the browser names are defined as definition terms. Definition descriptions are the extended text blocks that contain the actual definition.
The standard layout of definition lists indents each definition description. Of course, you can change the layout to what you want after you understand the CSS in Books II and III.
You can use definition lists any time you want a list marked by key terms, rather than bullets or numbers. The definition list can also be useful in other situations, such as forms, figures with captions, and so on.
Here’s the code for basicDL.html:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Basic Definition List
Common Web Browsers
- Mosaic
The mother of all modern browsers. The first widely used
visual browser.
- Netscape
The commercial successor to Mosaic. Widely popular, but
eventually eclipsed by Internet Explorer
- IE
Microsoft’s entry into the browser market, and a dominant
player.
- Firefox
An open-source browser that has shaken up the