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.
His website is at ao2.it

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 -utf8 -i -m $THIS_FILE

No warnings or errors were found.

span

Because style matters?

strong

Be strong rather than bold!

var

Save this file to xhtml11_quickref.html... this is just an example value, you can choose the name you like more.

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

Milk
Cereals
Some juice

ul, li

Third
First
Second

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)₁₀ in binary is 1010.
sup: This is the 1^st example that came to my kind.
tt: This is the teletype style.

Edit module

del, ins: Are you a ~~deletionist~~inclusionist 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
Username:

Password:

Auto Login:

Male:

Female:

Submit:

Reset:

PGP Key:

logo:
User Coutry:
User Info:
Some info like favourite dishes and so on...

I have read and understood the code

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
Sum	$280
January	$100	0
January	$200	0
February	$80	0

Image module

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

Client-side Image Map module

map, area

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

Short link: https://ao2.it/10

ao2.it
Antonio Ospite, theorist attacks

Interface language

XHTML 1.1 Quick Reference by Examples

Modules