A Quick Hint

When learning to code HTML you will often find yourself thinking, “I saw something really cool on Jane Doe’s website, how can I do that too?” The simplest way to figure that out is to direct your browser to their web page, right click anywhere on the page and select, “View Page Source” in FireFox or “View Source” on Internet Explorer. Try it out now with this web page to see what I’m talking about. Once you go through this primer,you will have the tools to decode most personal and small business websites. Unfortunately, corporate websites are often the result of complex computer generated code. This means trying to learn HTML by viewing the source of CNN.com is bound to be a fruitless endeavor.

Structural Tags

There are 7 basic structural HTML tags: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, and paragraph. While some web designers don’t use Headings 1 - 6, using them can be very helpful in structuring your the layout of your web page and will also help the visually impaired navigate your site. Some HTML gurus suggest that you refrain from using Headings 5 and 6 since they are smaller than the default font and can be difficult to read. The Paragraph tag is just that, a marker telling your computer the beginning and end of a paragraph. Here are examples of the 7 basic tags.

From the above you should note a few things. First, notes that according to XHTML conventions, every tag must be opened and closed. For example <p> must be followed by </p> for the browser to know what should be included in that tab. Otherwise, your formatting will spill over indefinitely until it is over ridden by a new tag. The main exception to this rule is the “line break” tag, <br />. The <br /> is typed at the place where you want a line break.

Two other tags which are indirectly needed (or at least very useful) for structuring text are <div> & <span>. As best as I can figure out, these two tags work pretty much the same except that <span> is usually used for formatting a small section (usually within a paragraph) and <div> is used for larger portions (including multiple paragraphs, tables, etc). In addition, <div> tends to cause a line break and therefore makes it a poor choice to use within a sentence or paragraph. For example …

Common Style Tags

In addition to the structural tags above, there are many other ways you can tweak your formatting. Below is a table demonstrating some of the more common ones.

As I said, the above merely shows some of the more common ways of formatting text and was not meant to be a comprehensive list. I purposefully did not demonstrate underlining since I believe this should be avoided in HTML. By default, HTML notes a hyperlink by underlining it and changing the text color (typically to blue). Therefore, underlining text may confuse people into thinking your regular text is a link.

Also note that in the above chart, I often had to choose an arbitrary value to demonstrate the formatting tag. For example, the size tag has a wide range:

Likewise, there are a whole range of colors that you can select for your text, background, border, etc … 216 to be exact.

Refer to the chart below [from from HTML Goodies] to find the code for the color that you want to use. Alternatively, you can use Pixie to find the HTML code of any color that you like on your computer (from another webpage, a photo, a drawing, etc).

Lists

At some point you may desire to create a list using HTML. There are two ways to do this … the easy way and the hard way. The easy way is to use ordered list <ol> and unordered list <ul> tags. The hard way is to manually make each individual bullet. Let’s take a look at a samples lists using the <ol> and <ul> tags.

Okay, enough about plain text. The purpose of HTML is to develop hyperlinked documents so let’s learn about links!