3.3 Common HTML elements

This section briefly describes the important behaviour, attributes, and rules for each of the common HTML elements.

<html>

Must have exactly one head element followed by exactly one body element. No attributes of interest.^3.1

<head>

Only allowed within the html element. Must have exactly one title. May also contain link elements to refer to external CSS files and/or style elements for inline CSS rules. No attributes of interest.

<title>

Must go in the head element and must only contain text. Information for the computer to use to identify the web page rather than for display, though it is often displayed in the title bar of the browser window. No attributes.

<link>

An empty element that must go in the head element. Important attributes are: rel, which should have the value "stylesheet"; href, which specifies the location of a file containing CSS code (can be a URL); type, which should have the value "text/css". The media attribute may also be used to distinguish between a style sheet for display on "screen" as opposed to display in "print".

Other sorts of links are also possible, but are beyond the scope of this book.

<body>

Only allowed within the html element. Should only contain one or more block-level elements, but most browsers will also allow inline elements. Various appearance-related attributes are possible, but CSS should be used instead.

<p>

A block-level element that can appear within most other block-level elements. Should only contain inline elements (words and images). Automatically typesets the contents as a paragraph (i.e., automatically decides where to break lines). May have the common attributes class and style.

<img>

An empty, inline element (i.e., images are treated like words in a sentence). Can be used within almost any other element. Important attributes are src, to specify the file containing the image (this may be a URL, i.e., an image anywhere on the web), and alt to specify alternative text for non-graphical browsers.

<a>

Known as an anchor. An inline element that can go inside any other element. It can contain any other inline element (except another anchor). Important attributes are: href, which means that the anchor is a hypertext link and the value of the attribute specifies a destination (when the content of the anchor is clicked on, the browser navigates to this destination); name, which means that the anchor is the destination for a hyperlink.

The value of an href attribute can be: a URL, which specifies a separate web page to navigate to; something of the form #target, which specifies an anchor within the same document that has an attribute name="target"; or a combination, which specifies an anchor within a separate document. For example,

http://www.w3.org/TR/html401/

specifies the top of the W3C page for HTML 4.01 and

http://www.w3.org/TR/html401/#minitoc

specifies the table of contents further down that web page.

<h1> ... <h6>

Block-level elements that denote that the contents are a section heading. Can appear within almost any other block-level element, but can only contain inline elements. No attributes of interest. These should be used to indicate the section structure of a document, not for their default display properties. CSS should be used to achieve the desired weight and size of the text in headings.

<table>, <tr>, and <td>

A table element contains one or more tr elements, each of which contains one or more td elements (so td elements can only appear within tr elements, which can only appear within table elements). A table element may appear within almost any other block-level element. In particular, a table can be nested within the td element of another table.

The table element has a summary attribute to describe the table for non-graphical browsers. There are also attributes to control borders, background colours, and widths of columns, but CSS is the preferred way to control these features.

The tr element has attributes for the alignment of the contents of columns, including aligning numeric values on decimal points. There are no corresponding CSS properties.

The td element also has alignment attributes for the contents of a column for one specific row, but these can be handled via CSS instead. However, there are several attributes specific to td elements, in particular, rowspan and colspan which allow a single cell to spread across more than one row or column.

Unless explicit dimensions are given, the table rows and columns are automatically sized to fit their contents.

It is tempting to use tables to arrange content on a web page, but it is recommended to use CSS for this purpose instead. Unfortunately, the support for CSS in web browsers tends to be worse for CSS than it is for table elements, so it may not always be possible to use CSS for arranging content. This warning also applies to controlling borders and background colours via CSS.

An example of a table with three rows and three columns:

<table>
    <tr>
        <td></td> <td>pacific</td> <td>eurasian</td>
    </tr>
    <tr>     
        <td>min</td> <td>276</td> <td>258</td>
    </tr>
    <tr> 
        <td>max</td> <td>283</td> <td>293</td>
    </tr>
</table>

It is also possible to construct more complex tables with separate thead, tbody, and tfoot elements to group rows within the table (i.e., these three elements can go inside a table element, with tr elements inside them).

<hr>

An empty element that produces a horizontal line. It can appear within almost any block-level element. No attributes of interest. This entire element can be replaced by CSS control of borders.

<br>

An empty element that forces a new line or line-break. It can be put anywhere. No attributes of interest. This element should be used sparingly. In general, text should be broken into lines by the browser to fit the available space.

<ul>, <ol>, and <li>

A ul or ol element contains one or more li elements. Anything can go inside an li element (i.e., you can make a list of text descriptions, a list of tables, or even a list of lists). The former case produces a bullet-point list and the latter produces a numbered list. These elements have no attributes of interest. CSS can be used to control the style of the bullets or numbering and the spacing between items in the list.

It is also possible to produce “definition” lists, where each item has a heading. Use a dd element for the overall list with a dt element to give the heading and a dd element to give the definition for each item.

<pre>

Block-level element that displays any text content exactly as it appears in the source code. Good for displaying computer code. It is possible to have other elements within a pre element. No attributes of interest. Like the hr element, this element can usually be replaced by CSS styling.

<div> and <span>

Generic block-level and inline (respectively) elements. No attributes of interest. These can be used as “blank” elements with no predefined appearance properties. Their appearance can then be fully specified via CSS. In theory, any other HTML element can be emulated using one of these elements and appropriate CSS properties. In practice, the standard HTML elements are more convenient for their default behaviour and these elements are used for more exotic situations.

Paul Murrell

This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.