Clean Code

Clean code means that your HTML coding follows all specifications, it isn't always possible to completely use true clean code, but try to stick very close to it. I clean up many webpages that have LOTS of problems because their code is a mess. Here are a few ways to keep your code clean:

• Don't type special characters into your code, instead type their escape code... many characters should NEVER be typed directly into HTML code... for example the "", the "©", "&", and the " itself. Instead, type &escape_code; (Ampersand, Escape Code for Character, then a semicolon). For these 5 characters, here are the escape codes...
  
  • For the liFor the tt> type >
    
  • For the © type ©
  • For the & type &
  • For the " type "



• Use quotes around values in attributes... For example, if you want a horizontal rule that is half of the screen width, type < hr width="50%" > rather than < hr width=50% >, or if you want one that is size 5 type < hr size="5" > rather than < hr size=5 >. Isn't it ironic that I don't? < g >
  
  
• Don't overlap tags... Overlapping occurs when Tag A starts, Tag B starts, Tag A closes, then Tag B closes. This will cause errors in sensitive browsers. For Example, it will not render correctly in Navigator 4.0 Beta1, Netscape purposefully built into the browser so developers could catch errors.
Examples:

• Wrong Way (Overlaps):
  < font size=+1 >< b >This is Bold and One Font Size Bigger< /font >< /b >
  This is Bold and One Font Size Bigger
  Right Way (Doesn't Overlap):
  < font size=+1 >< b >This is Bold and One Font Size Bigger< /b >< /font >
  This is Bold and One Font Size Bigger
  
• Wrong Way (Overlaps):
  < a href="here.html" >< i >This link is italicized< /a >< /i >
  This link is italicized
  Right Way (Doesn't Overlap):
  < a href="here.html" >< i >This link is italicized< /i >< /a >
  This link is italicized
  

The Comment Tag

If you are writing an HTML document, sometimes you may want to put little reminders to yourself with your code so that you will be able to interpret your coding better. A comment will not appear in a web browser when the page is displayed... it is only visible when the source code is viewed. You start commented text with < !-- and end it with -- >.

The UNORDERED LIST

The Unordered List is the first of the three types of lists. This is probably the most common list you will use.


Example of an Unordered List...

• pencils
  
• pens
  
• erasers
  
• paper
  
• glue
  

<ul>
 <li>pencils
 <li>pens
 <li>erasers
 <li>paper
 <li>glue
</ul>

The Ordered List

Example of an Ordered List...

1. pencils
   
2. pens
   
3. erasers
   
4. paper
   
5. glue
   

<ol>
 <li>pencils
 <li>pens
 <li>erasers
 <li>paper
 <li>glue
</ol>

The Definition List

This type of list is a little more complicated, but still very easy to use. This list starts with the <dl> opening tag, and ends with the </dl> closing tag. This has another tag known as <dt> for Definition Term, and <dd> for Definition Definition. These two tags do not need closing tags.

Example of a Definition List...

alliance

A union, relationship, or connection by kinship, marriage, or common interest.

alligator

Large amphibious reptile with very sharp teeth, powerful jaws.

alliterate

To arrange or form words beginning with the same sound.

<dl>
 <dt>alliance
 <dd>A union, relationship, or connection by kinship, marriage,
 or common interest.
 <dt>alligator
 <dd>Large amphibious reptile with very sharp teeth, powerful jaws.
 <dt>alliterate
 <dd>To arrange or form words beginning with the same sound.
</dl>

Extended Fonts

The newest version of many browsers supports extended fonts, in which you can choose to have the document fonts be other than the normal one. This is accomplished by adding the FACE="font_name" attribute to the <FONT> tag. The most commonly supported fonts are Verdana, Arial, Helvetica, Impact, Comic Sans MS, and a few others. It is not recommended to make your page font dependent, because the older versions of many browsers don't yet support this feature.

Example of Extended Fonts...

<font size=+2 face="Verdana">Verdana</font>
Verdana
<font size=+2 face="Arial">Arial</font>
Arial
<font size=+2 face="Helvetica">Helvetica</font>
Helvetica
<font size=+2 face="Impact">Impact</font>
Impact
<font size=+2 face="Comic Sans MS">Comic Sans MS</font>
Comic Sans MS

Note: If you don't see one or more of the above fonts, then your browser probably doesn't support the extended fonts.

A word on fonts: Now that CSS (Cascading Style Sheets) is supported by almost all web browsers, you can often style a whole page with a font or style each section of a page with different fonts without using the <font> tag. CSS is definitely worth learning after you know the basics of HTML. You can check out our CSS Tutorials for more information

Text Color

You can change the color of the text by setting the COLOR="font_color" attribute in the <FONT> tag. The Color is usually set by using the hexadecimal system (#000000 black to #FFFFFF white) but can also be set in newer browsers by using the simple word of the color. (Red for Red, Blue for Blue, etc.)

Example of Text Color...

<font color="Blue">Hey I'm Blue!</font>
Hey I'm blue!
<font size=+2 face="Impact" color="Green">Hey I'm green and in Impact Font!</font>
Hey I'm green and in Impact Font!
<font color="Red">Hey I'm red!</font>
Hey I'm red!

Take a look at our HTML Color Chart for more hexadecimal color codes.

Navigation Within A Document

Wouldn't it be nice to be able to click a link and move to another area within the same page? Well you can. You will use the normal anchor tag (<A HREF>) except instead of placing another page in the quotes, we will use a named portion of the document, which begins with a #. To name the part of the document, go to the area you want to name, and place <a name="name_of_area">text</a>, then to call a link to that place from somewhere else in the document, use <a href="#name_of_area">text</a> Example:

<a href="#section2">Go To Section 2</a><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<a name="section2">Welcome To Section 2!</a>

Go To Section 2
blah
blah
blah
blah
blah
blah
Welcome To Section 2!

Once you have the section named, you can even call it from other documents... for example, if you named a section in index.html called section2, you could call it from bookmarks.html using <a href="index.html#section2">.

Using internal page links seems silly on a short page like this, but it definitely pays off on long pages.