You Are Here: Home Web Development HTML Cheat Sheet

HTML Cheat Sheet
Getting started with basic HTML (XHTML)

By Christopher A. Nalty

This HTML (XHTML) guide / HTML cheat sheet came about because I occasionally have clients that want to take over maintenance of a site once it's complete.

What's that, you say?! Yes! I actually give my clients their own cheat sheet and let them take over the day-to-day operation of their site.

No, I don't view providing an (XHTML) HTML cheat sheet to my clients as bad business anymore than Ford, Chevrolet, or Dodge views the person changing his own oil as a bad customer.

My job is to provide a service. If my clients want an HTML cheat sheet so they can look under the hood and see how a Web page if built, "Go for it,!" I say, and I'll even help them along the way.

That's fine if you don't agree but I have happy clients that say otherwise.

From here on out, this is mainly for my clients. Thanks for your business! I am blessed to have worked with each one of you!

What is HTML (XHTML)?

HTML (XHTML) is a special kind of text document that is used by Web browsers such as Internet Explorer, Firefox, and Safari for the Mac, to present text and graphics.

HTML documents are usually refered to as "Web pages". The Web browser retrieves these pages and displays them, thanks to the Internet, from anywhere in the world.

Most likely you'll write this code by hand using a text edit program. On the Mac you can use TextEdit or Text Wrangler. I use BBEdit which has a few more features. On the PC you'll probably have NotePad. I will not ever tie you into one specific program by using a program like FrontPage with it's proprietary code.

If you have Adobe GoLive or Dreamweaver, I recommend that you use your provided HTML template within these programs at your own risk. I have experimented a bit and I've noticed some odd results, especially when using the "design view."

I try and make my code as clean as possible. This means that my templates are easy to read and maintain on the back side.

Skip using Microsoft Word

A word of warning before we move on. If you use Microsoft Word or another word processing program, make sure you save the file as plain text with the ".html" extension before uploading your file. An alternative is to cut and paste your updated code from Word into your text program.

The reason for saving as plain text is that the word processing programs place special tags into the code. You'll probably notice a Save as HTML command within Word. You're better off just editing the template I provided you, or making changes to the exsisting Web page. Trust me on this.

PS: If you really are a glutton for punishment, one of the best ways to learn how to code a Web page is to look at how other people have coded their HTML pages. The easiest way is to click on the "View" menu and then select "View Source". On some browsers, you have to click on the "File" menu and then select "View Source".

After you try this a few times you'll begin to develop a critical sense into what constitutes good "clean" code and bad code that is just a train wreck waiting to happen.

So what do you need to know?

I hope to teach you how to create, format, and add the following items:

  • Symantics
  • Style
  • Title
  • Headings and Paragraphs
  • Text Emphasis
  • Images
  • Links
  • and Lists such as this

Symantics

The great thing about HTML is that when properly formatted, it will work across Windows, Mac, and Linux platforms; across any make or model; and across all the different flavors of browsers.

To ensure your page will work when you upload it to a server, it is best to use all lowercase file names. You should also avoid spaces and punctuation in file names. (Dashes and underscores are fine to use).

If you are on a Windows machine, bless your heart, but please make sure your links to your own files are correct. Do not use C: or file:///C ... etc.

Style

For 99.9% of the design work I complete, I use one HTML file for the main content and a separate style sheet (CSS) for layout and design elements. What this means to you, dear client, is that when making changes to your Web page, all you will see is the content of each page. "What's the big deal," you ask? Well please read on.

Why Use CSS?

Style sheets exist, above all, to separate content from design.

Some of the benefits to writing code this way are:

  • More accessible to a wider variety of devices
  • Easier to make site-wide changes
  • Less code on the page make for smaller files and faster downloads
  • More control over code
  • Some will argue that the search engines will rank well coded pages higher.

Each HTML page has a head and a body

If you use your web browser's view source feature (see the View or File menus) you can see the structure of the Web pages. The document generally starts with a declaration of which version of HTML has been used, and is then followed by an <html> tag followed by <head> and then the <body>.

The <html> ... </html> acts like a container for the document.
The <head> ... </head> contains the title, and information on style sheets and scripts, while
the <body> ... </body> contains the markup with the visible content.

When you view source, this is what you may see:

You will also see some information regarding keywords, meta description, and other various information that the search engines need.

HTML Title

Every HTML document needs a title. It is a key component that search engines look for. Here is what you need to type:

<title>This is the Name of My Page</title>

The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document and needs to contain your keyword at least once, but no more than twice.

Your template already has a placeholder for the title. There should be no reason to update an exsisting file as it was written based on your chosen keyword.

Headings and Paragraphs

Headings

When you use Microsoft Word, you may be familiar with the built in styles for headings of different importance. In HTML, h1 is the most important, h2 is next in line, then h3, h4, h5 all the way on down to h6, the least important.

Here is how to add an h1 heading:

<h1>Your Important H1 Heading</h1>

and here is the code for an h2 heading:

<h2>Your Less Important H2 Heading</h2>

Paragraphs

Each paragraph you write should start with a <p> tag. It is good practice to close all the tags by adding a slash, like so </p>. Here's an example of two paragraphs:

<p>This is paragraph number one.</p>
<p>This is paragraph number two.</p>

Here's an example of a paragraphs with an open tag. Notice the missing slash before the second p?:

<p>This is a paragraph with an open tag. It will not 
render properly in your template.<p>
THIS IS AN OPEN PARAGRAPH TAG ==> <p>
THIS IS A CLOSED PARAGRAPH TAG ==> </p>

Adding Emphasis

You can emphasize (with italics) one or more words with the <em> tag, for example:

This is a really <em>interesting</em> document!

is displayed as: This is a really interesting document!

Adding Images

While content is king, it is the look and feel, along with images, that is queen of the kingdom. Images are often used to make your Web pages stand out among the crowd and to help get your message across.

Images can also be used as content. Did you know that Google can provide a ton of traffic if your images are taged properly and you provide something that people are actually looking for? Re-read that last sentence. The key is that you must provide something of value the people are looking for.

The simplest way to add an image is using the <img> tag. If you have a picture taken at night of the old Gutherie theater in Minneapolis that happens to be 330 pixels wide by 230 pixels high the first thing you need to do is name it correctly. (For this I'll assume that the image is already formated and sized properly). In our example, I would name the image something like "minneapolis-night-gutherie-picture.jpg" and upload it to your proper images folder.

Side Note: for my clients that use SBI! for hosting, this is always the image-files folder.

<img src="image-files/minneapolis-night-gutherie-picture.jpg" width="330" 
height="230" alt="The Old Gutherie Theater at night in Minneapolis, Minnesota." />

The src attribute names the image file. The width and height, while not strictly necessary, help speed the display of your Web page, and the alt tag adds a short description to your image for people who may view your page with a screen reader or have images turned off.

Here's what the image would look like live:

The Old Gutherie Theater at night in Minneapolis, Minnesota.

In broad terms, .jpg files are best for photographs, while .gif and .png are good for graphics.

To avoid delays in loading an image on your page, you need to avoid using images that are too large. SBI! hosted sites avoid this problem by requiring your images to be 100k or less.

Links

What really helped the Web take off back in 1996, and what makes it unique even today, is the ability to link from one page to another, and follow each link with just the the click of a mouse button.

Links are defined with the <a> tag. Here's an example of a defined link to a page titled "minnesota.html":

This a link to <a href="minnesota.html" alt="Minnesota. Land of 10,000 Lakes" 
target="_blank">Minnesota. The land of 10,000 Lakes.</a>.

The text between the <a> and the </a> is used as the caption for the link, the alt tag adds a short description for those using a screen reader, and the target tag tells the browser if the link should open in a new browser window or not.

Make sure you close thse inside tags with a quote mark. ==> "

Links to Pages

To link to a page on another Web site you need to give the full URL, more commonly called a Web address. For example, if you want to link to www.topflightmarketing.com you would type:

This is a link to <a href="http://www.topflightmarketing.com" 
title="Top Flight Marketing, LLC" target="_blank">Top Flight Marketing, LLC</a>.

If you are worried about Validating your code, you cannot place the target="#" code in your link.

Here's what it would look like live: Top Flight Marketing, LLC

Images as Links

You can even turn an image into a link. For example, if were were to link to the real Gutherie theater Web site from our Gutherie image above. Here's how we could do it:

<a href="http://www.guthrietheater.org"><img src="/image-files/
minneapolis-night-gutherie-picture.jpg" title="Gutherie Theater" 
target="_blank"/>Gutherie Theater</a>

Here's what the image would look like live:

Gutherie Theater at night.

 

E-Mail Addresses

The first choice is to have a form built to help avoid SPAM. This is not always an option, though. For example, here's how a typical unprotected e-mail address is coded:

<a href="mailto:myemail@example.com?subject=E-Mail for further 
details here">Click Here</a>

This is what it will look like live: Click Here

Protected E-Mail Address

Let's make that same address a bit safer from the SPAM bots using this cool tool from Hive Logic called Enkoder

This is the e-mail address that I put into Enkoder

<a href="mailto:myemail@example.com?subject=E-Mail for further 
details here">Click Here</a>

Below is the code that Enkoder produced. It looks nothing like an e-mail address, does it?
Think the SPAM bots can break this? I highly doubt it.

This is what that same code looks like live:

HTML Lists

There are several kinds of HTML lists.

Bullet or Unordered Lists

A bulletted or unordered list uses the <ul> and <li> tags, for example:

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>

Note that you always need to end the list with the </ul> end tag.

Here's an example of a unordered list:

  • the first list item
  • the second list item
  • the third list item

Numbered or Ordered Lists

A numbered or ordered list uses the <ol> and <li> tags. For example:

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>

Note that you always need to end the list with the </ol> end tag.

Here's an example of a ordered list:

  1. the first list item
  2. the second list item
  3. the third list item

Definition Lists

A definition list allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For example:

<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>

Here's an example of a definition list:

the first term
its definition
the second term
its definition
the third term
its definition

Nested Lists

Note that lists can be nested one within another as well. For example:

<ol>
<li>the first list item</li>
<li>the second list item</li>
<ul>
<li>first nested item</li>
<li>second nested item</li>
</ul>
<li>the third list item</li>
</ol>

Here's an example of a nested list:

  1. the first list item
  2. the second list item
    • first nested item
    • second nested item
  3. the third list item

You can also make use of paragraphs and headings etc. for longer list items.

Need More Information?

If you need more information on this HTML cheat sheet, please contact me using the form here.

Return from the HTML Cheat Sheet to the Home page or continue to explore the site using the right side navigation.