HTML Basics:
Readable Code

Step-by-Step: Readable Code

---

What you will learn:

to add spacing and indentions to code to make it easier to read

---

 Start with:     , hector3.htm

You don't need fancy software to make your code easier to read. Just add some white space as you go along.

Add Blank Lines

Gaps between sections helps you spot what you are looking for. You will add some blank lines between document parts.

1. Open in Notepad, if necessary,  hector3.htm  from your Class disk.
    

2. Add blank lines as follows:

   • before and after <title> line

   • after <h1> line

   • after <h2> line

   • after <p> line

   • after each <dd> line

   

   Yellow bars show where blank lines were added

---

Add Indentions

You can use indentions to create visual outline of your document. By indenting the items in a list, for example, you visually set them off from the rest of the document.

1. Add two spaces in front of each <dt> tag (the term part of the definition)
   These spaces will not show in the browser when you view the page.
    
2. With the cursor to the left of each <dd> tag, press the TAB key. Your code jumps over a number of spaces.

Yellow block show where indents were added.

---

Add Comments

The longer your page gets, the more important it is to include hidden comments. Such comments can point out special spots on the page or label sections to make it easier for you to find them later. You can even use Search to find the right spot.

Use comments to explain what is going on in complex pages. It is unfortunately common to completely forget why you wrote what you wrote!

Comments do not show when you view the page in a browser, but anyone who opens the source code can read them. Make it a regular practice to add comments as you create the page.

1. Add a blank line above the <dl> tag.
    

2. Type the following comment in the new blank line:

   <!-- Begin Hobbies list -->
    

3. Add a blank line below the closing tag and type:

   <!-- End Hobbies list -->
    

   

   Yellow highlight shows Comment lines.
    

4. Save as  hector4.htm  to your Class disk in the web folder.
    
5. Print the source code from Notepad.
    
6. Close Notepad.

 Edit your documents in only one editing program at a time. You can open an HTML document in two different editing programs at once. But they may not talk to each other about the changes you make. So when you save the document with one program, the changes you made to the copy in the other program are not saved. You can lose a lot of work this way!

Advanced editing programs are smart enough to notice changes made by another program and will ask if you want to update the copy in that program. However, it is still easy to get confused and dump changes that you meant to keep!