A Partial HTML Reference

Common HTML Tags

In this tutorial, I’m going to list some of the more relevant HTML tags you will be using. I have divided them into two categories: block elements, and inline elements.

Block Elements

Block elements automatically generate a line break at their beginning and their end. Using CSS, you can control a block element’s height and width, specify if the text in a block element is left-aligner/right-aligned/centered, or indent the first line of text in a block element.

Headers: <h1> <h2> <h3> <h4> <h5> <h6>

Headers are used to denote important headers in your document; if your document was a book, these would be the names of chapters etc. Extracting the headers from your document should allow someone to create a kind of table of contents.

Headers are block elements, meaning that they are on their own line.

Conventionally, you only want to have one <h1> tag in your document. After that, anything goes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Autobiography of Richard Le Guen | leguen.ca</title>
</head>
<body>
<h1>The Autobiography of Richard Le Guen</h1>
<h2>Introduction</h2>
<p>Richard Le Guen is a graduate
of Software Engineering at Concordia University.
He works as a tutor there.</p>
<h2>Early Youth</h2>
<h3>Family</h3>
<p>Richard Le Guen is the youngest in a family of 6;
his parents came from the small island of Mauritius to Canada in the 70s.</p>
<p>They lived in Sudbury, where they had their first son,
before moving to Montreal, where the rest of the family was born.</p>
<h3>Friends</h3>
<p>Richard has no friends.</p>
<h2>Death</h2>
<p>
Richard died in the line of duty, protecting the President from assassination.
</p>
</body>
</html>

Divisions <div>

A division has no semantic meaning. It is just a block-level division of a document. Other than the fact that – like any other block element – a <div> places a line break before and after itself, it is invisible until you specify how it should look using CSS. You’ll usually want to use the "id" and "class" attributes (see below) combined with CSS to distinguish div elements.

Tables, <table>

With the <table> element come various other elements as well: <tbody>, <tr> (table row), <td> (table cell) and <th> (table header cell) which are to be used in a <table> element.

It is important to note that while it is easy to use a table to control the structure of elements in a web site, this is wrong and a table should only be used when you have a table of information in your document.

Inline Elements

Inline elements can be placed inside a block-level element, and do not begin or end with a line break. It is invalid to put a block-level element nested inside an inline element.

Images, <img />

Images, like we saw earlier, are elements which are represented using empty (or self-closing) tags. To specify the image file to reference, use the ‘src’ attribute. The ‘src’ attribute can be a relative path, an absolute path, or a full URL.

It is also recommended that you include the ‘alt’ attribute when referencing an image; in the event that the image can’t be included in the rendered document, the text provided by the alt attribute will appear.

Span <span>

Like a div, a span has no semantic meaning. It is just an inline element used to organize the content of a document. Again, you’ll probably want to use the "class" and "id" attributes to distinguish between <span> elements.

Input <input />

Input elements are empty (self-closing) elements, nested inside inside form elements. They allow users to interact with a web site. We will see them in the future.

Common HTML Attributes

The "id" Attribute

The "id" attribute can give a unique name to an element in your document. Doing this can allow both style sheets and scripts to target that element specifically.

Since the "id" attribute should be unique throughout the docment, you can also target that element in a document with an anchor element. To do this, append an octothorpe "#" and the id to the end of the url in the "href" attribute.

In the example, I can very easily use CSS to ensure that all the links in the Navigation Bar look the same, since they are all of the same class. Note that the last link belongs to both the "Navigation" and the "External" classes.

The "title" Attribute

The title attribute allows you to give a descriptive title to any element in your document. Most browsers will display the title in a kind of floating label when the mouse hovers over the element. A popular example of the use of titles are the comments which appear when you let your mouse rest over a comic on xkcd.com.