Following is a brief rundown of the HTML elements that are commonly used on this site, how they are used, and a few tips regarding some of them. This is by no means an exhaustive list. Most of it deals with HTML 4.01, so if you’re interested in XHTML, be sure to read the page entitled Writing in XHTML.

Definitions of Terms

HTML
The language that makes up the content of any Web page (document). Links to other documents (known as hyperlinks) are what makes it hypertext; markup refers to the tags which define the various elements in a document.
Tags
These are used to define elements in HTML. Each consists of the “less than” and “greater than” characters (< and >) with the element name and possibly some attributes and values inside. See definitions below.
Elements
The building blocks that make up the Web page, such as paragraphs, headings, lists, tables, forms etc.
Attributes
Properties of an element. For example, the width attribute of the img element defines the width of an embedded image on the page.
Values
Assigned to specific attributes; in width="250", the value “250” defines the width of the element.
Block level
Refers to elements which define structure in a document. These can contain text level elements or often, other block level elements.
Text level
Refers to elements which can occur in the middle of text. Generally, these cannot contain block level elements.

At The Top

Doctype declaration
Appears at the very top of the source code. It may look like the example below. It tells the browser what version of HTML is being used. In some cases, it does make a difference, and if you intend to validate your page with the W3C (see below), it won’t validate without the doctype declaration. See Writing in XHTML for the doctype declaration you will need to use, which is different from this one. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
HTML begins here. Requires an end tag at the close of the document: </html>
<head>
What’s in here won’t appear on the page but is important nonetheless, as we shall see below. Requires an end tag: </head>
<title>
What’s in here will show up in the title bar at the top of your browser. Requires an end tag: </title>
<meta> tags
May contain the description of what’s on the page, who the author is, what generator was used to create the page, keywords to be used by search engines, and other important information. The content-type one is used to describe, among other things, the character encoding in use. No end tag is used.
<link>
Used in the head of each page on a site to connect the external style sheet to the page. No end tag is used. You can also use a <style> tag to make an embedded style sheet in the head of the page; in that case, you do need an end tag.

Cascading style sheets (CSS), as they are properly known, provide an excellent way to control such elements as fonts, colors, backgrounds, link properties, margins and formatting. Most browsers in current use have good support for style sheets; some older browsers do not, and these may render some Web pages oddly.

This site uses external style sheets (see the style element in the head of this document’s source) to control all aspects of visual presentation.

This site does something that most Internet sites do not (and that includes the likes of Yahoo! and BBC): it validates according to the World Wide Web Consortium (W3C), an international consortium that sets the official standards for the Web. Standards are a means of promoting interoperability on all browsers and platforms, whether old or new. What this doesn’t mean is that our site will look the same on all of them, which is impossible to achieve anyway.

<script>
Allows the use of scripts such as JavaScript. May appear anywhere in the document. Requires end tag.

BODY, A & IMG

<body>
What’s inside of this tag will appear to your visitors. Attributes such as background (background image), bgcolor (background color), text (text color), link, vlink and alink (link, visited link and active link colors) can be used here, although it is better to define page colors in a style sheet. Requires end tag.
<a> (for anchor)
This text-level tag allows you to use text or an image as a hyperlink to another location. It too, requires an end tag, and if you forget the end tag, you’re asking for trouble! The a element can also be used as a link target.

Links can be done in two ways. One way is to use the absolute reference:

<a href="http://www.ookingdom.com/design/elements">HTML Elements</a>

An easier way is to use the relative reference:

<a href="elements">HTML Elements</a>

This will work only if the page you’re linking to is in the same directory (folder) as the page you’re linking from. If you need to go up one folder (say, to ookingdom.com), you need to do it this way:

<a href="../">The Oo Kingdom</a>

Personally, I would rather not see “index.html” in the address bar, since it isn’t necessary, and the URL looks neater without it. To avoid this, I use relative references like <a href="../faith/"> or use the full (absolute) reference.

To link to the cover page of whatever directory you are in, you can use <a href="./">. If you use <a href="/">, the link will take you to the home page of the domain. Don’t use this unless you have a top-level domain! I don’t use this one, because if I try to navigate the files on my hard drive, the link will lead to the root directory of my computer!

Always use a trailing slash, as I have, at the end of the reference, if you’re linking to the default page of a directory. If you don’t (for example, <a href="../faith">), the server will try to find a file named “faith”, and that may delay the page loading.

If you use frames, watch your links. Many sites contain links to other sites that open in a frame. Then the new URL is not displayed in the address bar. I know of two ways to make links open at the top of the window, erasing the frames:

  1. Use a target="_top" attribute in the link tag.
  2. Use this tag in the head of the document:
    <base target="_top">

While I’m on the subject of links, the following should be noted: some sites use a link at the bottom of most pages that looks like this:

Go to <a href="#top">the top of this page</a>

This will always take you back to the top of the page in most older browsers. Some newer browsers do not recognize this unless you have this tag at the top of your page:

<a name="top"> … </a>

By the way, you can use any name and href values, as long as they match. You can also use a id instead of (or along with) a name (this is a must in XHTML). Just put the <a name…> tag where you want the link to lead. That’s how the “On This Page” navigations on this site work.

<img>
Allows the use of embedded image files (graphics) on the Web page. Attributes src (source) and alt (alternate text) are required; width and height attributes may help the page load faster. End tag is not required.

Too many or too large graphics can spoil a page by making it load very slowly. You may have a cable modem or DSL service, but the guy down the street is still poking along at 56 K. Be considerate of him! Use only GIF or JPEG images (not BMP; they’re much larger files), and keep the file sizes small. And putting too many graphics on a single page can be a problem too, as the server has to find all of those items.

Don’t resize large graphics to make them smaller on the page by using the width and height attributes; the file is still the same size. Instead, use an image editor, such as Adobe PhotoDeluxe, to resize the actual image file (you may need to sharpen the edges afterward). Then you’ll have the image at the size you want it, and also a smaller file that will load more quickly.

GIF Works is useful for optimizing GIF image files. It’s entirely Web based, so you don’t need to download a program to run it.

Block Level Elements

These elements will section off portions of the Web page into blocks of various types.

<table>, <tr>, <th><td>
Tables are used to create data charts; most websites still use them for layout. The tr element begins a new row; the th element is a heading for a column, and the td element is for data in each column. These do not require end tags in HTML, but table does! In practice, it’s good to use end tags anyway, and they are required in XHTML.

I discovered a quirk* in the Netscape 6 browser: if you begin a table cell with another block level element (for example, <td><p> or <td><h2>), Netscape 6 will space it down an extra line, but Netscape 4 or Internet Explorer won’t. You can use a <span> tag instead of the <p> to set the font for the text without creating a new paragraph. A better way is to set the padding or margin in the style sheet, which is how I solved the problem for this site.

*This is not really a quirk, but only compliance with the new web standards. Several newer browsers do this (including Internet Explorer 6 for Windows); it often depends on which version of HTML is specified in the doctype declaration. See Microsoft’s page on IE 6 and doctype for the details as to which DTDs will put IE 6 into standards-compliant mode.

<p>
The paragraph tag. It blocks off a batch of text to form a paragraph. Images can be contained within this tag, but never another <p> or other block level element! End tag is not required, but I find that occasionally a browser won’t display text properly without one.
<h1>, <h2>, <h3> etc.
These are heading tags. They work like paragraph tags, except that the text will appear bold and will be sized according to the number in the tag: h1 is the largest, and h6 is the smallest. An extra blank line will appear below the heading also. End tags are required.
<ul>
Unordered list; will usually appear indented, with a bullet in front of each list item. End tag is required.
<ol>
Ordered list; each list item will be numbered. End tag is required.
<li>
List item; appears inside of ol or ul elements. End tag is required.
<dl>
Definition list; contains <dt> (defined term) elements followed by any number of <dd> (definition) elements. This is what you are reading now.
<blockquote>
Used for longer quotations. Browsers generally will indent from both sides.
<hr>
Stands for horizontal rule. It simply puts a horizontal line across the page. No end tag is needed in HTML 4.01.
<form>
Other elements can be used inside of this tag to create drop-down menus, multiple-choice questions, and a variety of other items.
<div> and <span>
These tags are used to isolate chunks of HTML to be used in conjunction with style sheets to control fonts, colors or whatever. div is a block level element, but span is a text-level element, meaning that it can be used anywhere, even in the middle of a sentence (see below).

Text Level Elements

These elements can be used inside of block level elements, but they can never contain block level elements!

<em> and <strong>
For emphasis and stronger emphasis. These tags affect the text inside them. Visual browsers usually render em as italic text, while strong is rendered as bold text. Each requires an end tag. You can use <i> (for italic) and <b> (for bold) to do the same thing in visual browsers, but screen readers will not pick up the emphasis.
<cite>
Contains a citation or a reference to other sources, that is, a mention of something or somebody as an example to support an argument or help explain what is being said. Normally appears in italics.
<dfn>
Marks up the defining instance of a term (such as Heaven and Hell on The Way to Eternal Life, in a Nutshell). Normally appears in italics.

The next three special tags are normally rendered in a fixed-width font (typewriter style):

<code>
Designates a fragment of computer code. Often used on this site for HTML markup presented as content.
<samp>
Designates sample output from programs, scripts, etc. Seldom used on this site.
<kbd> (for keyboard)
Indicates text to be entered by the user (remember to enter the <kbd>.html</kbd> at the end of the website address).
<abbr> and <acronym>
Used to mark up abbreviations (to be spelled out, like HTML or FBI) and acronyms (to be spoken as words, like GIF and NATO). Internet Explorer 6 does not support abbr, so we do not use it on this site.
<q>
Used to mark up short quotations. Good browsers will wrap this element in quotation marks; Internet Explorer 6 won’t do this, but a script can be used to make it happen. Some newer browsers support q only with straight quotes; they can be styled as curly quotes in a style sheet.
<big> and <small>
Increases or decreases the size of the font in use. Requires an end tag.
<font>
I left this one for last because I don’t use it any more. It controls the font, and it must appear only inside the innermost block-level element (p, td etc.) in order to validate! End tag is also required. I find it so much easier to define fonts in a style sheet.

If you want to use a special font on your Web page, be careful to use common fonts that most people have on their computers, not the weird, funky ones you just got with that new program. Your visitors will end up with a default font! When in doubt, list two or more similar fonts, separated by commas ("Verdana, Helvetica, Arial, sans-serif" or "Book Antiqua, Times New Roman, Times, serif"). Keep font sizes reasonable: too big, and the page is huge; too small, and it’s hard to read. Also, stick with fonts that are crisp, clear and easy to read.