Style and Structure Guidelines
clear structure for your HTML documents makes them easy to read, easy to follow, and easy to modify.

If you disappeared tomorrow and other people had to come in to work on your HTML files, could they figure out what you’ve been doing . . . or would it be like looking at a big messy glob of tags and text? It’s easy to end up with spaghetti code. That’s why one of the first steps, in learning how to create Web pages, is to learn some simple structural guidelines.

File Creation Guidelines
One of the first steps, in learning how to create Web pages, is to learn some simple structural guidelines. Following a few simple style and structure guides makes your site both consistent and legible. There is no single “right” style or structure to use (as long as you are using the tags correctly of course!). What is most important isn’t that you follow our recommendations?it is that you are consistent in your own files, that way:

• When you’re building a new page and troubleshooting a problem, a clean style makes it easy to both see what you’ve done and make changes.
• When you come in to edit a page three months after you created it, you can quickly see what you did and how you did it, without having to recreate your thought pattern or walk through the file character by character.
• If someone else needs to modify it they can understand your code and make the necessary changes.

In general, keep each tag on a separate line. This makes it easy to see what is going on. Codes don’t become lost in a morass of type.

The exceptions to this are: in-body tags, such as making a word bold, and the line break command (
). The logical place for both of these are with the text they define.

Ask yourself: in which of these code examples is it easier to find the errors (and there are several errors!)?

In this one?

Getting Your Own

Widgets offers many, manythe great things including:

wigglers
• jumpers
• creepy-crawlies

.To place an order call our 1-800 number.

Or in this one?

Getting Your Own

Widgets offers many, manythe great things including:

wigglers

• jumpers
  
• creepy-crawlies
  

To place an order call our 1-800 number.

Here are the errors?did you see them all?

You can add comments to your file. The comments will be ignored by HTML but they can help you add information about your file or what a piece of code is doing.

The code tag looks like this:

Everything between the opening is invisible to the web browser.

Lists, especially nested lists, are hotbeds for accidental errors. Keeping lists legible makes using them much easier.

• Indent nested lists. Use the tab key to make a quick and easy indent. Remember, HTML ignores multiple spaces, so indenting in your file won’t affect the way the page displays.
• Keep tags on separate lines.
• Consider adding an extra return to “pull-out” lists visually.

Both of those examples will display exactly the same on a Web browser?but which do you find easier to read and edit?

This one?

Halloween gifts:

• wigglers
  • corpse white
  • choked blue
• jumpers
• creepy-crawlies

Easter gifts:

• fuzzies
  • chickie yellow
  • bunny beige
• floppies
• cottontails

Or this one?

Halloween gifts:

• wigglers
       
  
       
  • corpse white
         
  • choked blue
         

  
  

• jumpers
  
• creepy-crawlies
  

Easter gifts:

• fuzzies
       
  
       
  • chickie yellow
         
  • bunny beige
         

  
  

• floppies
  
• cottontails
  

File Directory Guidelines
Your Web site is made of many individual files. In addition to organizing the content inside each file consistently, it is a good idea to save the files in some logical locations with logical and consistent names. A good directory structure makes it easier to transfer files to and from your site and simplifies site maintenance.

Here’s a few guidelines to help you get started:

Structure Tip #1: Keep Related Files Together

Put related files into the same directory. For example, if you are making a home page about how you are an athletic star, you might have a baseball directory, a hockey directory, and a basketball directory. All the files about you and baseball go into the baseball directory, the one about hockey into the hockey directory, and the ones about basketball into the basketball directory.

Within each directory, put the same types of files together in subdirectories. For example, you might make an images subdirectory in your baseball directory and put all your jpegs and gifs of you rounding the bases there. In the hockey directory there will also be an images folder containing all your hockey images.

Structure Tip #2: Put Common Files in a Top-level Directory

Put elements that are used across the entire site in a top level directory, so you only need one copy of each file. For example, you might have a top-level directory called siteimages, which contains your logo and your smiling face.

Structure Tip #3: Create Index Files

Create a file called index.html and save it in the top level index. This file should contain the opening page of your site. This is the page that will load into a browser by default. When readers type http://www.bigego.com, this opening page will load.

Create a file called index.html within each of your subdirectories. Each of these index files will be the opening page for its respective section. When readers type http://www.bigego.com/baseball, your baseball index will load.

For example, If your main Web directory is called “public_html” you might have a directory structure like this:

public_html (main html directory)
     images (contains the site-wide gifs and jpegs)
     index.html (the opening page)
     baseball (a subdirectory)
          index.html (main page of the baseball section)
          images (contains baseball-related gifs and jpgs)
          sounds (this contains baseball-related sound files)
     hockey (a subdirectory)
          index.html (main page of the hockey section)
          images (contains hockey-related gifs and jpgs)
          sounds (contains hockey-related sound files)
     basketball (a subdirectory)
          index.html (main page of the basketball section)
          images (contains basketball-related gifs and jpgs)
          sounds (contains basketball-related sound files)

Each of the subdirectories holds files of the appropriate file type and category of files. This type of structure makes it easier to keep track of your site as it grows. If you put a structure in place like this at the beginning, then you won’t be faced with a cataloging mess later.