From: Antonio Ospite Date: Thu, 16 Jul 2009 14:56:38 +0000 (+0200) Subject: Initial version of XHTML 1.1 Quick Reference X-Git-Url: https://git.ao2.it/xhtml11_quickref.git/commitdiff_plain/4ecba9b15f40ec5872db7be7e3fa400dfe2d0130?ds=sidebyside Initial version of XHTML 1.1 Quick Reference --- 4ecba9b15f40ec5872db7be7e3fa400dfe2d0130 diff --git a/xhtml11_quick_reference_by_examples.html b/xhtml11_quick_reference_by_examples.html new file mode 100644 index 0000000..d8d1855 --- /dev/null +++ b/xhtml11_quick_reference_by_examples.html @@ -0,0 +1,903 @@ + + + + + + XHTML 1.1 Quick Reference by examples + + + + + + + + + + + + + + + +

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. +
  2. + Cereals +
    3. +
  3. + Some juice +
    4. +
+ +
+
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)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
MonthSavingsVoidVoid
January$10000
$20000
February$8000
Sum$2800
+ +
+
+ +

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 +
+
+ + +