DOCTYPE de ce documentCe document est un modèle de document HTML 4.01, valide, qui me sert de bac à sable pour HTML 4.01 et de plateforme de test pour ma feuille de styles universelle. Il contient une feuille de style alternative vide permetant de tester le rendu par défaut d’un agent utilisateur. 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.
La feuille de style s’appuie au maximum sur le mécanisme d’héritage et sur les pseudo-classes, ce qui réduit le nombre de classes nécessaires à la mise en forme dans l’optique d’une meilleure séparation entre structure et présentation.
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.
dir
וכאשר אתה פוקח את עיניך,
הבוקר הופך לאחר הצהריים מאוחרים
והנה כבר יורד הערב
(הבוקר הופך לאחר הצהריים
הערב נופל -
לילה עוטף, עוטף את השמיים...)
dir de l’élément bdo dans un paragrapheLorem 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 tirés de Using language information in XHTML, HTML and CSS
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
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.
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.
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.
<?php
function encode_ampersands($str)
{
$str = preg_replace("/&(?!#?[xX]?(?:[0-9a-fA-F]+|\w{1,8});)/i","&", $str);
return $str;
}
?>
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 :
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.
code
| É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 | ✓ | ✓ | ✓ |
Note : ce formulaire n’a aucune action définie. Le soumettre n’a aucun effet.
aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb
« aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa »
« guillemets français »
aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaaapplication/xhtml+xml
aaaaaaaaaaaaaaaaaaaa‐bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa‑bbbbbbbbbbbbbbbbbbbbbbb
2005‒2006
aaaaaaaaaaaaaaaaaaaa–bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa—bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa―bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbb