Basic Concepts

“HTML” stands for Hypertext Markup Language.  “Hypertext” refers to the ability to have links in your text to related information on other pages.  “Markup” refers to the special tags (codes) that “mark” parts of your text for special treatment.  Those tags can be somewhat different and cryptic, and that’s why they are called a “Language” of their own.

Tags are always enclosed in angle brackets, like this: <TAG>  The word or words in the angle brackets tell what the tag should do.  Tags can be either upper case or lower case, according to your preference.  Often tags are in pairs, with a beginning tag and an ending tag with regular text in between.  In that case, the ending tag has a slash before the name: </TAG>  Some tags (like links explained below) have additional options inside the angle brackets.

Links

Links, also called a hyperlinks, look like this:

<A HREF="example.html">example link</A>

The text between the tags is what the user will see, usually in a different color and with an underline to indicate that it is a link.  Inside the beginning tag, example.html is the address of the page that the link will go to when it is clicked.  The address you put here could be a complete address to any site including the http://, or just another page on the same site.

If you want the link to open in a new window:

<A HREF="example.html" TARGET=_blank>example link</A>

Bold, Italic, Underline

To mark text as bold:

<B>bold</B>

To mark text as italic:

<I>italic</I>

To underline text:

<U>underline</U>

To do all three:

<B><I><U>all three</U></I></B>

When using several tags together like this, be sure to put the ending tags in the opposite order as the beginning tags so that they match up properly.

Numbered and Bulleted Lists

Numbered (Ordered) Lists

Numbered lists are marked with “ordered list” (OL) tags, with any number of “list items” (LI) in between:

<OL>
<LI>number one item</LI>
<LI>number two item</LI>
<LI>number three item</LI>
</OL>

Use ordered lists in cases where the order is important.  For example, it matters a lot what order you perform the instructions for a recipe:

1. Put carob chips in saucepan and melt completely.
2. Mix in almond butter, then Rice Krispies®.
3. Spoon out tablespoon-sized blobs onto wax paper and place in refrigerator.

Bulleted (Un-ordered) Lists

Bulleted lists are just like numbered lists, except instead of “OL” you will use “UL” (un-ordered list):

<UL>
<LI>first item</LI>
<LI>second item</LI>
<LI>third item</LI>
</UL>

Use bulleted lists when the order of the items is not significant.  For example, the ingredients for a recipe can be listed in any order:

• 1 cup carob chips
• 1 cup crunchy almond butter
• 1 cup Kellogs® Rice Krispies®

Nested Lists

You can also put lists within lists:

<UL>
<LI>first item
   <OL>
   <LI>sub item</LI>
   <LI>another sub item</LI>
   </OL>
</LI>
<LI>second item</LI>
<LI>third item</LI>
</UL>

When placing lists within lists, be sure to place the entire sub-list within the list item (LI) tags for the item it belongs under.  The sub list does not need to be the same kind of list as the list that contains it.

Special Characters

You can put special character “entities” anywhere in your text.  All you have to do is find out the code name or number and enter it starting with an ampersand (&) and ending with a semi-colon (;).

Keep in mind that you always have to enter the less-than (<), greater-than (>), and ampersand (&) symbols by their code names or numbers, since those symbols would otherwise be interpreted as the beginning of tag markers or special character sequences. 

Named Entities

The less-than symbol (<), for example, has the code name lt and can be entered like this:

&lt;

When entering code names, make sure to use the correct case, because the special character names are case-sensitive.

Note that all named special characters can also be rendered with their numeric code (see below).  The names are a convenience intended to make them easier to remember.

See also: Special Character Names.

Numbered Entities

For a numeric example, let’s say you want a paragraph marker (¶).  You would find the number for it (182 in this case) and enter it like this:

&#182;

It is important when entering special characters by number to make sure you include the number sign.

Special Typographical Features

Soft (Discretionary) Hyphen

Sometimes it is desirable for long words to be broken across line boundaries with a hyphen, but it is usually not desirable in such cases to see the hyphen unless the word actually does wrap around to another line.  This is the place to use a soft (or discretionary) hyphen.  The soft hyphen can be encoded as follows:

long&shy;word

Normally, this will render as “long­word,” but when it needs to wrap, “long­word” will wrap nicely with a hyphen.

Non-Breaking Space

Just as it is sometimes desirable to break a word across line boundaries, it is also sometimes desirable to make sure words don’t break across line boundaries, even if they are separate words.  The non-breaking space is used in such cases.  The non-breaking space is encoded as follows:

la&nbsp;de&nbsp;da!

Using non-breaking spaces, the text will always render together as “la de da!” even if it would otherwise have wrapped across lines.

COPYRIGHT NOTICE

This tutorial is Copyright © 2007 by Robert Lee Dickinson.  All rights reserved.

Any redistribution or reproduction of part or all of the contents in any form is prohibited other than the following:

• You may print or download to a local hard disk extracts for your personal and non-commercial use only
• You may copy the content to individual third parties for their personal use, but only if you acknowledge the website as the source of the material

You may not, except with our express written permission, distribute or commercially exploit the content.  Nor may you transmit it or store it in any other website or other form of electronic retrieval system.