XHTML and HTML — a brief introduction thomasalspaugh.org/pub/fnd/xhtml.html

Introduction

This document is a brief introduction to HTML and XHTML. The W3C (World Wide Web Consortium) provides specifications of these languages on its web site [HTML4.01, XHTML1.0]. Once you are reasonably familiar with the possibilities the languages provide, these specifications are all you need to understand and write web pages.

HTML (Hyper Text Markup Language) is the original Web page language. XHTML is an XML language based on HTML, with the exactly the same power but a more regular syntax that can be processed by XML tools. Both languages are accepted by current browsers (this page is XHTML). If you are just starting to learn, you should learn XHTML.

Both HTML and XHTML are designed to express the structure of documents, rather than merely their presentation. A separate language, CSS (Cascading Style Sheets), provides powerful and detailed control of presentation, far more than was ever provided by HTML [CSS1, CSS2]. As the HTML specification states, Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions.

(X)HTML elements are divided into block elements that are rendered as rectangles of the window, usually in a vertical stack; and inline elements that are catenated horizontally and then broken into lines that are rendered as parts of a block.

You may find it helpful to save this page and examine it with a text editor to see how a web page is put together. You can experiment with (X)HTML by writing your own test pages and opening them in a browser to see how they may be presented.

The W3C specification

The W3C specifications are the definitions of the two languages; some tools and browsers (especially those produced by for-profit groups) produce or read variations on the definitions, but it is to your advantage to stick to the standard.

The XHTML specification is quite brief, and simply explains how to express what HTML expresses in an XML syntax.

The HTML specification contains the meat of both languages. Besides the table of contents, the specification has an index, and useful tables of all the elements and all their attributes. The table of contents is on the main page, and the tables of elements and attributes and the index are accessible through links at the top of each page.

Style sheets

Once you have become reasonably familiar with XHTML and HTML, you probably will want to play with how your pages are presented. The best way to do this is to learn and use CSS. Two versions of CSS have been defined at this writing: CSS1 is much simpler and will do most of what you want, while CSS2 is considerably more complex and may be postponed until you need something CSS1 won't do.

You may define a separate style sheet and link to it from your web documents (that is how this document's style is defined) using a link element in the document's head; or you can include style information for a single page in a style element in that page's head; and finally, an individual element's presentation can be controlled by style information in its style attribute. More-local style has higher priority (thus the 'cascading' in the CSS name).

Validation

The W3C provides an online validation service for web pages and style sheets. Click the icons at the bottom right of this page to validate this page and its style information; you will be taken to URLs where you can also validate your own documents, whether they are accessible by URL or are local copies on your machine. You should take advantage of this service.

Document block structure

An XHTML document consists of nested elements. Each element consists of a start tag, the element's content (if any), and an end tag.

A start tag consists of <, the tag's name, optionally some attributes and values, and >.

An end tag consists of </, the tag's name, and >. The content can be text, elements, a combination of text and elements, or nothing at all.

An element with no content can be written briefly as an empty element tag consisting of <, the tag's name, optionally some attributes and values, and />.

Elements must be nested: you can write <dfn><i>term</i></dfn> but not <dfn><i>term</dfn></i>

Examples: start tag <h1 id='example'>, end tag </h1>, empty element tag <h1 id='example' />.

The older HTML language differs from XHTML primarily at this level: end tags are optional or forbidden for some elements, and empty-element tags are not allowed.

Figure 1. Three successively deeper views of an XHTML document

An HTML document consists of a single html element. The html element contains a head element and a body element (see Figure 1).

Head

The head element contains general information about the document and that controls how the document as a whole is rendered.

Title

The title element contains the document's title. This is typically displayed at the top of the browser window.

Link

link elements specify links to files related to the current document. Example:
<link href='../alspaugh.css' rel='stylesheet' type='text/css'/> specifies a stylesheet for the current document's presentation.

Style

A style element contains style for the document. Example:

  <style type='text/css'>
    p {  margins: 0 0 1ex .5em;  }
  </style>

Body

The body element contains what is rendered in the browser window.

Headings

The headings of sections of an XHTML document are given as the contents of h1, h2, h3, h4, h5, and h6 elements. Top level headings are given in h1 elements; second-level headings within the section headed by an h1 element are given in h2 elements; and so on.

The sections themselves follow their headings; see Figure 1.

Paragraphs

A p element contains the text of a paragraph.

In HTML the end tag of a p element is optional.

Block quote

A blockquote element contains a long quotation of paragraph size. (Compare q.)

Lists

Ordered lists

An ol element contains a list whose items are numbered. Each items consists of an li element.

In HTML the end tag of an li element is optional.

Unordered lists

A ul element contains a list whose items are not numbered. Each items consists of an li element.

In HTML the end tag of an li element is optional.

Definition lists

A dl element contains a list whose items are terms and their definitions. Each items consists of a dt element containing the term, followed by a dd element containing its definition.

In HTML the end tag of a dt or dd element is optional.

Tables

Tables are organized within a table element. Briefly, a table element contains tr elements each of which contains a row of the table, and each tr element contains td elements, one for each data cell of the table, and possibly th elements for each heading cell. Ordinarily each tr element contains the same number of th and td elements.

A td or th element for a cell that is to extend over more than one column is indicated by its colspan attribute, for example colspan='2' for a cell spanning two columns. Similarly, a cell spanning two or more rows is indicated by a rowspan attribute. For example, <td colspan='2' rowspan='3'> is a cell covering two columns and three rows. In such cases, the tr elements for the affected rows must contain correspondingly fewer td and th elements.

table and its subelements have a variety of attributes and other elements for expressing a wide range of tables. See the W3C specification for more details.

Images

An img element is rendered as an image. The image is specified by the element's src attribute, whose value is the URL of the image. It is recommended that a brief summary of the image be given in the element's alt attribute, which is shown if the image can't be displayed for some reason.

In HTML an img element is not allowed to have an end tag.

Text block style and layout

These elements have no meaning in terms of the structure of the document; they merely control its presentation. Where appropriate, use the functional elements above instead.

Preformatted: The contents of a pre element are rendered in the lines and spacing in which it appears there.

Document inline structure

Hypertext links

A link is expressed using an a (anchor) element. The text that if mouse-clicked sends a browser to another location is the contents of the a element, and the destination is given as the href attribute of the element.

The destinations can be entire URLs, or can be an element within an (X)HTML page (including the page containing the link). In order to be a destination, an element must have an id attribute whose value is a name unique within the page. These names must match the regular expression

[A-Za-z][-_.:A-Za-z0-9]*

Links to a named element have an href attribute value consisting of the URL, a pound sign #, and the name. Links to a named element in the same document may omit the URL, and be just # followed by the name. Finally, a link to the head of the current document may simply be the empty string.

URLs may be the Web address of a page, or a local relative pathname beginning at the directory containing the current page.

Example:

  <dl>
    <dt>HTML</dt>
      <dd>The current version is <a href='#HTML4.01'>HTML4.01</a>.</dd>
    <dt id='HTML4.01'>HTML4.01</dt>
      <dd>The <a href='http://www.w3.org/TR/1999/REC-html401-19991224'>HTML 4.01 specification</a>.</dd>
      There is also a <a href='../HTML401.html'>local copy</a>.
  </dl>

Text inline structure

These elements identify the function in the document of specific words or phrases. Browsers generally render them with appropriate formatting.

Code: A code element contains a fragment of program input or programming language code.
Defining instance: A dfn element contains the defining instance of a term or phrase, the one that is part of the term or phrase's definition.
Emphasized: An em element contains a word or phrase that is emphasized.
Quotation: A q element contains a short quotation of less-than-paragraph size. (Compare blockquote.)

Text inline style and layout

These elements have no meaning in terms of the structure of the document; they merely control its presentation. Where appropriate, use the functional elements above instead.

Bold: The contents of a b element are rendered in boldface.
Break: A br empty element (<br/>) causes a line break.
Italicized: The contents of an i element are rendered in italics.
Teletype: The contents of a tt element are rendered in a teletype or monospace font.

Special characters and symbols

(X)HTML provides for a number of special characters and symbols. These are written using character entities consisting of an ampersand, a code, and a semicolon. Each symbol has a mnemonic code and a hex code. For example, the non-breaking space character is written either as   or   and is rendered as a space but unlike a normal space, a line break can't take place there. Some of the most useful character entities are:

Mnemonic	Hex	Character
`&`	`"`	ampersand &
`<`	`<`	less-than sign <
`>`	`>`	greater-than sign >
` `	` `	non-breaking space

Hundreds of character entities are listed in [HTML4.01].

In addition, any UTF8 character can be placed in an (X)HTML document by enclosing its Numeric Character Reference (decimal number) in &# and ;, for example ☄ ☄ and ❧ ❧.

Useful common attributes

class: Classes may be defined in the style section of the head or in separate style files, and may be given for specific formatting. An element's class attribute may name a defined class and inherit its style.
style: Each element may be given a style attribute whose value gives specific CSS style information for that element.
title: Most browsers show an element's title attribute value when the mouse hovers over the element.

Comments

(X)HTML allows comments enclosed in .

Do not put strings of two or more hyphens inside a comment. Unnecessary but interesting technical explanation: Because a comment is syntactically a markup declaration in <! > containing a markup declaration comment within -- --, strings of two or more hyphens are not allowed within a comment (they end it).

Making it XHTML

It's pretty straightforward to make an HTML file be XHTML. The W3C's tidy utility will do it for you, if you like. If you wish to write XHTML in the first place, follow these easy steps:

Begin your file with an appropriate XML DOCTYPE, such as:

<!DOCTYPE html
    PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

Declare the XHTML namespace in the document's html element:

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>

Make every element name lower-case.
Give every non-empty element an end tag. Write every empty element for which HTML forbids an end tag (area base basefont br col frame hr img input link meta param) as an empty-element tag, and give every other empty elements an end tag.
Quote the value of every attribute, and if you use one of the attributes for which HTML assumes a default value, give it the value anyway.
Use the id attribute rather than the name attribute of any element.

References

This document has just touched on the most basic parts of (X)HTML. For much more information, see the references below.

[CSS1]: W3C. Cascading Style Sheets, level 1, 11 Jan. 1999.
[CSS2]: W3C. Cascading Style Sheets, level 2, 25 February 2004.
[HTML4.01]: W3C. HTML 4.01 Specification, 24 Dec. 1999.
[XHTML1.0]: W3C. XHTML 1.0 The Extensible HyperText Markup Language (Second Edition), 26 Jan. 2000, revised 1 Aug. 2002.

Table of contents