HTML Basics:
Readable Code

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

The source code for your web page is getting long enough to be getting harder to read. You can count on having to edit your code later. It is important to be able to find the part you want to edit!

Source code for hector3.htm


There are a number of little tricks you can use to help.

  • Add blank lines between sections
  • Add indentions
  • Add comments to label or explain sections

White space between tags in the code is generally not seen at all on the page when viewed in a browser. So you have a lot of freedom to rearrange things to suit yourself.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by hand Arrow - Subtopic open
    icon-footprintReadable code
    FrontPage/FPXTo subtopics
    Images in HTMLTo subtopics
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


HTML editing software can automatically make some spacing and indention changes for you. It can also color code your tags, to make them easier to pick out of the code. By the time you finish this lesson, you will see why HTML authors value this automation!

Code formatted by HomeSite 4 with indentions and colored tags

Source code after reformatting with HomeSite 4
Colored tags, indented list

Icon Step-by-Step

Step-by-Step: Readable Code

 Icon Step-by-Step

What you will learn:

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

 Start with:  Monitor showing Windows Desktop  Class disk , 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

    Blank lines added to hector3.htm

    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.

Notepad: hector3.htm with indents to set off list items

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 -->

    Notepad: hector3.htm with comments showing the start and end of the list

    Yellow highlight shows Comment lines.

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

Warning 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!