Sample XHTML Documents Illustrating XHTML Elements and Attributes

This page contains a sequence of files illustrating XHTML markup. Study the files in sequence, and look at both the display and source of each file. In addition to seeing how many different XHTML tags and some of their attributes are actually used, you should be aware that you will be seeing the following things as well:

• Each file contains these basic XHTML elements, all of which are required if the file is to validate as strict XHTML: html head title body
• Each file also contains these additional items that are needed for validating the markup as strict XHTML:
  • a DOCTYPE declaration (which should always be the first thing in the file)
  • an xmlns attribute for the html tag
  • a meta element within the head element to indicate the character encoding being used (prefer utf-8 or iso-8859-1)
• Each file has an XHTML comment containing the name of the file. XHTML comments, which have the form <!-- text of comment --> and can be single-line, end of line, or multi-line.
• Some elements have content, other elements are "empty" (have no content).
• Some elements are block-level elements, which during page rendering are displayed top to bottom, with vertical whitespace separating them, and the amount of that whitespace determined, by default, by the browser. Other elements are inline elements, which are displayed left to right, with no additional horizontal whitespace separating them. The bottoms of inline elements also line up along the bottom of the line on which they appear. You should also remember that XHTML nesting rules say that, in general, block-level elements may contain other block-level elements or inline elements, but inline elements can only contain other inline elements.

Headings, Paragraphs and Line Breaks, Preformatted Text and Horizontal Lines, and Blockquotes

Tags introduced in this section: h1 h2 h3 h4 h5 h6 p br pre hr blockquote

1. Headings.html Illustrates the six XHTML headings (or headers) with their varying font sizes.
2. ParagraphsAndLineBreaks.html Illustrates XHTML paragraphs and line breaks within them.
3. PreformattedAndHRule.html Illustrates pre-formatted text and a horizontal line (rule) as divider.
4. Blockquote.html Illustrates a blockquote element.

Lists

Tags introduced in this section: ul li ol dl dt dd

List item markers other than the defaults, whether ordered or unordered, should be specified by CSS, not by (deprecated) attributes.

1. UnorderedLists.html Illustrates the unordered list with the default list item marker.
2. OrderedLists.html Illustrates the ordered list with the default list item marker.
3. DefinitionLists.html Illustrates the definition list.
4. NestedLists.html Illustrates the nesting of various unordered and ordered lists. Notice how the markers in a nested unordered list change (by default) with the nesting level, but that this does not happen with a nested ordered list.

Tables

Tags introduced in this section: table tr th td caption

Attributes introduced in this section: border cellpadding cellspacing rowspan colspan

1. PlainTables.html Shows three tables without any borders or captions and without any addtional spacing between them. Look carefully to see what is centered by default and what is left-justified by default, as well as what is bold by default.
2. BordersAndCaptions.html Shows the same tables as in the previous example, but this time with borders of various thicknesses and captions.
3. CellpaddingAndCellspacing.html Shows two tables both with cellpadding of 10 pixels and cellspacing of 5 pixels, one with a border of 10 pixels and one without. Note how the caption text "wraps" in each case.
4. RowspanAndColspan.html Shows a table illustrating both the rowspan and colspan attributes (one of each, and one combination).

Images

Tags introduced in this section: img

Attributes introduced in this section: src alt width height

Image borders and non-default alignment should be specified with CSS.

1. Images.html Illustrates the display of an image without any specification of width and height, then the same image with correct width and height specified, and finally the same image with width and height that cause the image to be "scaled" by the browser (not a good practice).

Links and Anchors

Tags introduced in this section: a

Attributes introduced in this section: href id

The hash tag # is also introduced and used with the id attribute to access a "bookmarked" location on a web page.

Hyperlinks are blue and underlined by default. Any other desired appearance or behavior should be specified with CSS.

1. LinksAndAnchors.html Illustrates the use of hyperlinks and anchors to move from one page to another (LinksAndAnchorsSecondPage.html), and from one place to another within a given page. By default, when we click on a (hyper)link to go to another page, we go to the beginning of that page, but we can use the hash symbol (#) and either an id or the "anchor" ("bookmark") form of the a element to mark a specific place in the document to which we wish to go. These pages also illustrate the "Lorem ipsum ... " text, which often shows up as a "filler" on web pages.

Entities

1. Entities.html Illustrates XHTML entities (also called meta characters, or just "special characters"). It also uses some "emphasis elements" that are more "formally" introduced in the next section.

Logical Emphasis vs. Physical Emphasis

Elements introduced in this section:
b i em strong small big sub sup abbr q code kbd samp cite dfn var

Attributes introduced in this section: title

1. PhysicalEmphasis.html Illustrates XHTML physical markup elements.
2. LogicalEmphasis.html Illustrates XHTML logical markup elements, which are preferred to the physical markup elements..

The Grouping Elements div and span

Elements introduced in this section: div span

These elements are not used by themselves, but are very useful for grouping parts of a document to apply styling (via CSS) or behavior (via JavaScript).

1. Grouping.html Illustrates the default effect of the div element and the span element.

Forms and Form Controls (also called "widgets")

Elements introduced in this section:
input textarea select option optgroup button fieldset legend label

Attributes introduced in this section:
type size maxlength checked value rows cols for label

Note that there is both a label element and a label attribute. Do not confuse the two. The label element is used to help provide acessibility, while the label attribute provides a textual label for the contents of an optgroup element.

1. FormControls.html Illustrates the form element, and many of the most frequently used form controls.