XHTML 1.1 Quick Reference by examples

This page offers a quick reference by examples of all the elements specified by the XHTML 1.1 W3C standard.

This version of XHTML groups the elements by module, and this is how they are presented here, with a very brief description and a section of examples of use.

There are already other quick reference pages, like the one on xhtml.com, or this one or this other one with examples. But this page wants to be a single-page brief reference; here it is not explained which attributes an element supports, but that can be seen reading the source code of the examples provided for each element. This page could be used as a summary about XHTML or as a precious tool to design complete (wrt. XHTML elements) CSS stylesheets for your XHTML pages, giving a quick glance at the results.

Modules

The XHTML 1.1 document type is made up of the XHTML modules shown below. The elements, attributes, and minimal content models associated with these modules are defined in the XHTML Modularization document [XHTMLMOD]). The elements are listed here for information purposes, but the definitions in [XHTMLMOD] should be considered definitive. In this document, the module names in the list below link into the definitions of the modules within the current version of [XHTMLMOD].

Structure Module*
body, head, html, title
Text Module*
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var

The minimal content model for this module defines some content sets:
Heading
h1 | h2 | h3 | h4 | h5 | h6
Block
address | blockquote | div | p | pre
Inline
abbr | acronym | br | cite | code | dfn | em | kbd | q | samp | code | strong | var
Flow
Heading | Block | Inline
Hypertext Module*
a
This module adds the a element to the Inline content set of the Text Module
List Module*
dl, dt, dd, ol, ul, li
This module also defines the content set List with the minimal content model (dl | ol | ul)+ and adds this set to the Flow content set of the Text Module.
Object Module
object, param
When this module is used, it adds the object element to the Inline content set of the Text Module.
Presentation Module
b, big, hr, i, small, sub, sup, tt
When this module is used, the hr element is added to the Block content set of the Text Module. In addition, the b, big, i, small, sub, sup, and tt elements are added to the Inline content set of the Text Module.
Edit Module
del, ins
When this module is used, the del and ins elements are added to the Inline content set of the Text Module.
Bidirectional Text Module
bdo
When this module is used, the bdo element is added to the Inline content set of the Text Module.
Forms Module
button, fieldset, form, input, label, legend, select, optgroup, option, textarea
This module defines two content sets:
Form
form | fieldset
Formctrl
input | select | textarea | label | button
When this module is used, it adds the Form content set to the Block content set and it adds the Formctrl content set to the Inline content set as these are defined in the Text Module.
Table Module
caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr
When this module is used, it adds the table element to the Block content set of the Text Module.
Image Module
img
When this module is used, it adds the img element to the Inline content set of the Text Module.
Client-side Image Map Module
area, map When this module is used, the map element is added to the Inline content set of the Text Module.
Server-side Image Map Module
Attribute ismap on img
Intrinsic Events Module
Events attributes
Metainformation Module
meta
Scripting Module
noscript, script
Stylesheet Module
style element
Style Attribute Module Deprecated
style attribute
Link Module
link
Base Module
base

XHTML also uses the Ruby Annotation module as defined in [RUBY]:

Examples

Structure Module

We don't show explicit examples for elements in the Structure module because they are Singleton elements, already used for the structure of this very page. Although you can style the body and html elements.

Text module

The Text module elements can be used inside a text to enrich it semantically. They are all style-able.
abbr
We all know what XHTML means, don't we?
acronym
On the contrary someone doesn't know RADAR is an acronym.
address
Antonio is from
Naples, Italy
a strange, still beautiful, city.
blockquote
I usually say:
Better looser than poser!
Not very widespread these days.
br
Break the line here
this is new line
cite
Even if you are not Buddhist follow the Dalai Lama suggestions.
code
Format source code using the <code></code> element.
dfn
I wonder how much my silly definition of happiness: Happiness is the limit of our mood function when “how I currently feel” approaches to “how I want to feel” is flawed...
div
DIVs are used to
divide
block elements.
em
This em is not really a typographical measure.
h1
This could be for

Book

titles.
h2
This could be for

Chapter

titles.
h3
This could be for

Section

titles.
h4
This could be for

Sub-Section

titles.
h5
This could be for
Sub-Sub-Section
titles.
h6
This could be for
Sub-Sub-Sub-Section
titles.
kbd
Do not press Ctrl-Q, really!
p
Is this before a paragraph?

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea.

After a paragraph, definitely!
pre
How to use this element? 
         (__) 
         (oo) 
   /------\/ 
  / |    ||   
 *  /\---/\ 
    ~~   ~~   
...."Have you mooed today?"...
Aaah, this is c^Hhow.
q
British say about driving: If you go left you go right, if you go right you go wrong.
samp
Let's clean up this file: tidy -xml -access 3 -utf-8 -i -m $THIS_FILE
span
Because style matters?
strong
Be strong rather than bold!
var
This file name is in $THIS_FILE... this is just an example, you know.

Hypertext module

a
Is this xhtml: GOTO 0;?
Is this more accessible: IF KEY == 'g'; THEN GOTO 0; ENDIF;? (Psst, use Alt-Shift-g to test it in FireFox)
It is XHTML indeed.

List module

For the list modules we show grouped examples, a dd or a li element alone does not have much sense.
dl, dt, dd
Recursion
To understand recursion you must have understood what recursion means.
ol, li
  1. Milk
  2. Cereals
  3. Some juice
ul, li

Object module

object, param

Presentation module

b
This is the bold style.
big
This is bigger than the rest.
hr
i
This is the italic style.
small
Can you still read it?
sub
Remember, (10)10 in binary is 1010.
sup
This is the 1st example that came to my kind.
tt
This is the teletype style.

Edit module

del, ins
Are you a deletionistinclusionist on Wikipedia?

Bidirectional Text module

bdo
Should I add an example in Arabian?

Forms module

For the Forms module a grouped example is provided:
button, fieldset, form, input, label, legend, select, optgroup, option, textarea
Example Form


Table module

For the Table module a grouped example is provided:
caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr
This is an example
Month Savings Void Void
January $100 0 0
$200 0 0
February $80 0 0
Sum $280 0

Image module

img
This is an image: No image centered on the line.

Client-side Image Map module

map, area
Vesuvio Napoli Moon Napoli

Server-side Image Map module

Attribute ismap on img
TBD

Intrinsic Events module

Events attributes
TBD

Metainformation module

meta
TBD

Scripting module

script, noscript
TBD

Stylesheet module

style
TBD

Link module

link
TBD

Base module

base
TBD