Document HTML valide avec un DOCTYPE HTML 4.01 strict

Sommaire

Introduction

http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/

Ce document est un modèle de document HTML 4.01, valide, qui me sert de bac à sable pour HTML 4.01. C’est également un bon outil pour tester le support de HTML 4.01 et de CSS dans différents Agents Utilisateurs, ainsi que certains aspects connexes, comme le support Unicode (ISO10646).

Il contient de nombreux éléments HTML mais ne couvre pas l’ensemble des possibilités de HTML 4.01 (combinaisons éléments/attributs, entre autres). Ce n’est pas une référence, bien que je m’efforce d’y appliquer certaines bonnes pratiques.

DOCTYPE de ce document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Le W3C publie une liste de DTD recommandées.

Titres

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

Langues

Direction du texte (LTR ou RTL)

Direction de droite à gauche spécifiée avec l’attribut dir

פוקח עיניך

וכאשר אתה פוקח את עיניך,
הבוקר הופך לאחר הצהריים מאוחרים
והנה כבר יורד הערב

(הבוקר הופך לאחר הצהריים
הערב נופל -
לילה עוטף, עוטף את השמיים...)

Direction de droite à gauche spécifiée avec l’attribut dir de l’élément bdo dans un paragraphe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Exemples de texte en différentes langues

Exemples tirés de Using language information in XHTML, HTML and CSS

Langues cibles

Sur le web on trouve des infos sur tous les grands auteurs comme Johann Wolfgang von Goethe, William Shakespeare, Molière, Federico García Lorca, José de Alencar, etc.

blockquote et q

Extrait de L’Étranger, d’Albert Camus

Vous comprenez, monsieur Meursault, m’a-t-il dit, c’est pas que je suis méchant, mais je suis vif. L’autre, il m’a dit : Descends du tram si tu es un homme. Je lui ai dit : Allez, reste tranquille. Il m’a dit que je n’étais pas un homme. Alors je suis descendu et je lui ai dit : Assez, ça vaut mieux, ou je vais te mûrir. Il m’a répondu : De quoi ? Alors je lui en ai donné un. Il est tombé. Moi, j’allais le relever. Mais il m’a donné des coups de pied de par terre. Alors je lui ai donné un coup de genou et deux taquets. Il avait la figure en sang. Je lui ai demandé s’il avait son compte. Il m’a dit : Oui.

Extrait de Sending XHTML as text/html Considered Harmful, de Ian Hickson

If you use XHTML, you should deliver it with the application/xhtml+xml MIME type. If you do not do so, you should use HTML4 instead of XHTML. The alternative, using XHTML but delivering it as text/html, causes numerous problems that are outlined below.

Traduction française de cet extrait

Si vous utilisez du XHTML, vous devriez le servir avec le type MIME application/xhtml+xml. Dans le cas contraire vous devriez utiliser du HTML4 plutôt que du XHTML. Faire le contraire, utiliser du XHTML en le servant en tant que text/html, entraîne de nombreux problèmes, décrits ci-dessous.

Pre

<?php
function encode_ampersands($str)
{
	$str = preg_replace("/&(?!#?[xX]?(?:[0-9a-fA-F]+|\w{1,8});)/i","&", $str);
	return $str;
}
?>

Éléments de phrase

Source : HTML 4.01, 9.2.1 Phrase elements.

Repris de la traduction française :

Les éléments de phrase ajoutent une information structurelle à des portions du texte. L’interprétation habituelle de ces éléments de phrase est la suivante :

em
Indique une mise en exergue.
strong
Indique une mise en exergue plus forte.
cite
Contient un extrait ou une référence vers une autre source.
dfn
Indique qu’il s’agit de l’instance définissante du terme englobé.
code
Désigne un fragment de code informatique.
samp
Désigne un exemple des sorties d’un programme, d’un script, etc.
kbd
Indique un texte que doit saisir l’utilisateur.
var
Indique l’instance d’une variable ou le paramètre d’un programme.
abbr
Indique une forme abrégée (par exemple : WWW, HTTP, i.e.,etc.).
acronym
Indique un acronyme (par exemple : radar, LAN,etc.).

Exemples

i, b, em, strong i.e., radar, H2O, E = mc2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. H2O, E = mc2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Éléments de style de police

tt
restitué sous la forme d’un texte de téléimprimeur ou à chasse fixe.
i
restitué sous la forme d’un texte en italique.
b
restitué sous la forme d’un texte en caractères gras.
big
restitue le texte dans une « grande » taille de police.
small
restitue le texte dans une « petite » taille de police.
strike et s
Déconseillé. Restituent un texte barré.
u
Déconseillé. Restitue un texte souligné.

Exemples

Listes

Plus de listes

Liste non ordonnée et listes imbriquées

Liste de définition

Terme A
Définition du terme A
Terme B
Définition du terme B
Autre définition du terme B
Terme C
Terme D
Définition des termes C et D (Merci à Anne van Kesteren pour ce rappel)

Image

Sébastien Guillon Sébastien Guillon

Image Map

Exemple d’image map Rectangle bleu Disque vert Hexagone marron

Tableaux

Plus d’exemples de tableaux

Tableaux des éléments HTML 4.01

Support des éléments HTML 4.01 en fonction des DOCTYPEs
Élément DOCTYPE
frameset transitional strict
aaa
a
abbr
acronym
address
applet
area
b
base
basefont
bdo
big
blockquote
body
br
button
caption
center
cite
code
col
colgroup
dd
del
dfn
dir
div
dl
dt
em
fieldset
font
form
frame
frameset
h1
h2
h3
h4
h5
h6
head
hr
html
i
iframe
img
input
ins
isindex
kbd
label
legend
li
link
map
menu
meta
noframes
noscript
object
ol
optgroup
option
p
param
pre
q
s
samp
script
select
small
span
strike
strong
style
sub
sup
table
tbody
td
textarea
tfoot
th
thead
title
tr
tt
u
ul
var

Éléments de formulaires

Note : ce formulaire n’a aucune action définie. Le soumettre n’a aucun effet.

Texte






Liste déroulante ou à choix multiple (select)

Liste de pays telle que définie dans ISO 3166





Boutons radio

Boutons checkbox

Boutons checkbox

Les éléments label ici enveloppent les éléments input et ne comportent pas d’attribut for.

Boutons (élément button)

Boutons (élément input)

Adresse

Sébastien Guillon, <sebastienguillon@gmail.com>

Support Unicode / ISO10646

Espaces

NO-BREAK SPACE (U+00A0 | &x#00A0; | &#160;)

aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb

« aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa »

« guillemets français »

NARROW NO-BREAK SPACE (U+202f | &#x202f; | &#8239;)

aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb

FOUR-PER-EM SPACE (U+2005 | &x#2005; | &#8197;)

aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb

THIN SPACE (U+2009 | &#x2009; | &#8201;)

aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb

ZERO WIDTH SPACE (U+200b | &#x200b; | &#8203;)

aaaaaaaaaaaaaaaaaaaa​bbbbbbbbbbbbbbbbbbbbbbb

ZERO WIDTH NO-BREAK SPACE (U+FEFF | &#xFEFF; | &#65279;)

aaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbb

aaaaaaaaaaaaaaaaaaaaapplication/xhtml+xml

Tirets

HYPHEN (U+2010 | &#x2010; | &#8208;)

aaaaaaaaaaaaaaaaaaaa‐bbbbbbbbbbbbbbbbbbbbbbb

NON-BREAKING HYPHEN (U+2011 | &#x2011; | &#8209;)

aaaaaaaaaaaaaaaaaaaa‑bbbbbbbbbbbbbbbbbbbbbbb

FIGURE DASH (U+2012 | &#x2012; | &#8210;)

2005‒2006

EN DASH (U+2013 | &#x2013; | &#8211;)

aaaaaaaaaaaaaaaaaaaa–bbbbbbbbbbbbbbbbbbbbbbb

EM DASH (U+2014 | &#x2014; | &#8212;)

aaaaaaaaaaaaaaaaaaaa—bbbbbbbbbbbbbbbbbbbbbbb

HORIZONTAL BAR (U+2015 | &#x2015; | &#8213;)

aaaaaaaaaaaaaaaaaaaa―bbbbbbbbbbbbbbbbbbbbbbb

Autres

LINE SEPARATOR (U+2028 | &#x2028; | &#8232;)

aaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbb

PARAGRAPH SEPARATOR (U+2029 | &#x2029; | &#8233;)

aaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbb

WORD JOINER (U+2060 | &#x2060; | &#8288;)

aaaaaaaaaaaaaaaaaaaa⁠bbbbbbbbbbbbbbbbbbbbbbb


copyright © 2005‑2006 Sébastien Guillon – HTMLCSS