SamR's Quick HTML Reference

Since I teach a variety of people about HTML, I find it appropriate to keep a simple reference to HTML handy, as much of the HTML documentation is either unwieldy or outdated. For example, the HTML 3.0 documentation runs over 190 pages, and many of the traditional HTML references available at the time that I first wrote this (ca. 1995) included deprecated elements, such as <menu>. These days, there are now good references, but I still find it convenient to have my own.

Unfortunately, the time pressures of academic life have not given me sufficient opportunity to flesh-out all of this document (e.g., HTML's relationship to SGML). Nonetheless, both my students and I find it of some use, particularly in the electronic form.

• Introduction
• HTML Tags
  • Attributes
    • Logical and physical markup
  • Structure of HTML documents
  • Components of the head
  • Components of the body
    • Paragraphs in HTML
    • Section Headings
    • Text Styles
    • Graphic elements
    • Links and anchors
    • Lists in HTML
    • Tables in HTML
    • Miscellaneous
• Preparing a Web Site or Page
• Index of HTML Tags

Introduction

HTML, the hypertext markup language is a common language for building hypertext documents for the World-Wide Web. Originally, authors had to build their documents in "raw HTML" because no tools were available. Now that such tools are available, many people no longer directly write HTML. Nonetheless, there a good reasons to learn HTML, particularly because it helps you understand what is and is not possible on the web.

More recently, other markup languages have been developed and extensions to HTML have been added. The extensions are often platform specific. The other languages are often standards and provide more facilities. One key successor to HTML is XML (extensible markup language). HTML has also been extended with CSS (cascading style sheets) to give page authors more control over appearance. Neither additional languages nor extensions are covered in this document.

Note that HTML is a markup language, not a programming language. What's the difference? A markup language indicates information about the structure or purpose of pieces of information; a programming language indicates information about the execution of a process (more or less).

HTML Tags

In HTML, as in most markup languages, a page author marks up the document, indicating the roles of various parts of the page. One might indicate that something is the title of the document, the beginning of a section, an item in a list, and so on and so forth.

In HTML, textual elements are traditionally surrounded by tags, although there are some tags that act as text elements. A piece of marked-up text looks something like

<TAG>some text</TAG>

Note that the TAG indicates something about the text. For example, the TAG might be P for ``paragraph'' or em for ``emphasized''.

For example, one might indicate the title of a document with

<title>SamR's Quick HTML Reference</title>

Attributes

In addition, certain tags may have attributes (additional characteristics). For example, in Netscape's version of HTML, items in a list may indicate the type of mark that accompanies the item. In such cases, a piece of marked-up text looks something like

<TAG ATTRIBUTE_NAME=ATTRIBUTE>some text</TAG>

For example, one might describe a table with a larger-than-normal border with

<table border=10> ... </table>

Logical and physical markup

Note that there are two basic kinds of markup: logical markup, in which one describes the roles of pieces of text (e.g., ``this is a section heading'') and physical markup, in which one describes the appearance of text (e.g., ``this is times, twelve point, bold, centered''). Logical markup supports better information retrieval and permits readers to select appearances they find most appropriate. HTML provides a mixture of logical and physical markup tags, with some bias towards logical markup. More recently, HTML has added style sheets, which provides both a way to define your own logical elements and a way to assign a physical appearance to each logical element.

Structure of HTML documents

Each HTML document is broken into two pieces:

• a head, that includes information about the document
• a body, that includes the contents of the document

As one might expect, the head is surrounded by <head> and </head> tags, and the body is surrounded by <body> and </body> tags. Netscape extends the body tag with a background attribute. I feel that this makes documents unreadable, but your mileage may vary.

In addition, the whole document should be surrounded by <html> and </html> tags.

A basic HTML document might therefore appear as follows:

<html>
<head>
<title>A basic HTML document</title>
</head>
<body>
<p>
This is the only line in the document.
</p>
</body>
</html>

Components of the head

There are a number of different things you can put in the head of the document. You'll find that many documents include only a title. For now, all that you really need to understand is the title tag.

• <title>..</title> the title of the document. This is what typically appears in the menu bar, bookmarks list, and history list.
• <link rev="made" href="mailto:..."> a link to the author of the document. There are other link tags, such as to previous and next document. This section needs to be expanded. More in HTML 3.0 specs.
• <base>..</base> the base name of the document; used for relative addressing.
• <meta ...> a meta tag which describes characteristics of the document or embeds special http (hypertext transfer protocol) commands. For example, <meta http-equiv="Refresh" content="1; url=nifty.left.html"> tells the browser to switch to another document after 1 second. Some meta tags can also be included in the body of the document.

Components of the body

Paragraphs in HTML

• <p>..</p> a paragraph. Need not have the </p> tag, in which case <p> is treated as a paragraph separator.
• <blockquote>..</blockquote> a quoted piece of text.
• <address>..</address> the address of the document author
• <pre>..</pre> preformatted text. Usually presented in a monospace font.

Section Headings

HTML uses a hierarchical heading system, with labels from <h1> to <h6> Much of the documentation suggests that you only use them in order. For example, you should always begin your documents with an h1 tag and you should never use an h3 tag without a surrounding h2 tag.

Text Styles

• <em>..</em> emphasized text.
• <strong>..</strong> more strongly emphasized text.
• <code>..</code> program code.
• <i>..</i> display text in italics. Not recommended..
• <b>..</b> display text in boldface. Not recommended..
• <tt>..</tt> display text in typewriter font.

Graphic elements

• <img src="URL">..</img>
  • alt="text" include alternate text to use if the image cannot be displayed
  • align={top,middle,bottom} align the image relative to the text.
• <hr> a horizontal rule, useful for separating sections.

Links and anchors

So far, the tags we've seen have described parts of almost any text, whether on the Web or in printed form. Now let us consider the things that make hypertext hypertext: the links from page to page, and the anchors that let us link to particular parts of a page.

• <a href="URL">..</a> a link to another document.
• <a name="text">..</a> a named section of the present document.
• <a href="#text">..</a> a link to a named section in the current document.
• <a href="URL#text">..</a> a link to a named section in another document.

Lists in HTML

• <ol>..</ol> an ordered list. The elements of the list are numbered (or lettered or ...) sequentially. Netscape extends this with various attributes.
• <ul>..</ul> an unordered list. The elements of the list are indicated with some token. Netscape extends this with various attributes.
• <li>..</li> an element in an ordered or unordered list. Netscape extends this with various attributes. The </li> is optional.
• <dl>..</dl> a definition list. Traditionally, a list of words and their definitions.
• <dt>..</dt> the definition term, the object being defined.
• <dd>..</dd> the definition.

Tables in HTML

While HTML tables were originally developed to support better presentation of tabular data (that is, data that you'd like to organize into columns and rows), tables are often used to provide more precise layout. When you write HTML for me, you should only use tables for presenting tabular data and not for layout.

• <table>..</table> delineate the table.
  • border=# determine the size of the border drawn around the table
  • cellspacing=# spacing between cells
  • cellpadding=# spacing between contents and data
  • width=# or width="#%" the width of the table.
• <tr>..</tr> a row in a table.
  • align="{left,center,right}" align data in cells (that is, select one of left, center, or right and put it in quotes)
  • valign="{top,middle bottom,baseline}" align data in cells
• <td>..</td> a data cell in a row of the table.
  • align="{left,center,right}" align data in cell
  • valign="{top,middle bottom,baseline}" align data in cell
  • nowrap don't wrap the contents of the cell
  • colspan=# make a cell span multiple columns
  • rowspan=# make a cell span multiple rows
• <th>..</th> a cell used as a header in the table. Attributes are as for <td>.
• <caption>..</caption> the caption of the table.
  • align={top,bottom} does the caption appear above or below the body of the table

Miscellaneous

• <!-- ... --> a comment to the reader of the HTML file. Usually not interpreted by the browser.
• <br> force a break.

Preparing a Web Site or Page

You know how to make an HTML document. So, how do you get it on the Web? It all depends on your system and your Web server. I'm a Unix (and Linux) person, so my answers will be biased towards typically Unix installations.

First, you must create a Web directory. Typically, this directory is called public_html and must be in your home directory. The directory must be appropriate accessible. On Unix systems, this means that the directory must be readable and executable.

Next, you put the file in that directory. If you're working on a machine that shares a filesystem with the Web server, you can edit the file in that directory. If you're working on another machine, you'll need to transfer the file (typically with an ftp program). Make sure the file is readable.

Finally, you should check the page in a Web browser.

Not much too it, is there?