2.2.1 Titres

Nom Repère d'ouverture Repère de fermeture
Titre n o 1 <h1> </h1>
Titre n o 2 <h2> </h2>
Titre n o 3 <h3> </h3>
Titre n o 4 <h4> </h4>
Titre n o 5 <h5> </h5>
Titre n o 6 <h6> </h6>

2.2.2 Partie de texte

Nom Repère d'ouverture Repère de fermeture
Passage de texte <span> </span>

Cette balise sert à individualiser une partie de texte (par exemple pour lui donner une couleur différente du reste du texte)

2.2.2 Paragraphe

Nom Repère d'ouverture Repère de fermeture
Paragraphe <p> </p>

2.2.3 Passage à la ligne

Nom Repère d'ouverture Repère de fermeture
Forcer le passage à la ligne <br />
Empêcher le passage à la ligne <nobr> </nobr>

<br /> est une abbréviation pour <br></br>. Un passage à la ligne n'a évidemment pas de domaine de validité! Notez l'espace derrière br dans <br />

2.2.4 Ligne de séparation

Nom Repère d'ouverture Repère de fermeture
Ligne horizontale <hr />

<hr /> est une abbréviation pour <hr></hr>. Une ligne n'a pas de domaine de validité puisque tout est déjà dit! Notez l'espace derrière hr dans <hr />

2.2.5 Marquage logique

Nom Repère d'ouverture Repère de fermeture
intonation emphatique <em> </em>
forte intonation <strong> </strong>
exemple <samp> </samp>
citation <cite> </cite>
définition <dfn> </dfn>

Les navigateurs interprètent ces marquages et produisent une mise en forme sur l'écran qui peut être fort différente d'un navigateur à l'autre. Nous verrons plus tard que nous pouvons nous-même imposer la mise en forme au navigateur.

2.2.6 Marquage physique

Nom Repère d'ouverture Repère de fermeture
gras <b> </b>
en italique <i> </i>
cursif <tt> </tt>
souligné <u> </u>
barré <s> </s>
plus gros que le texte normal <big> </big>
plus petit que le texte normal <small> </small>
en exposant <sup> </sup>
en indice <sub> </sub>

Les navigateurs mettent en forme ces marquages d'après leur nature.(Chaque navigateur écrit par exemple le domaine de validité de la balise <sub> en indice). Une séparation entre nature et mise en forme n'est pas donnée. Nous verrons plus tard que nous pouvons cependant surimposer notre propre mise en forme à celle du navigateur. L'utilisation conséquente des attributs (voir chapitres suivants) permet de réaliser cette séparation importante et d'éviter les marques physiques.

2.2.7 Exemple

Le code:

<h5>Ligne de séparation</h5> Voici <br /> <strong>une ligne de séparation</strong> normale: <hr />

produit l'image suivante dans le navigateur que vous utilisez actuellement:

Ligne de séparation
Voici
une ligne de séparation normale:

Ouvrez la présente page dans un autre navigateur et voyez la différence!

2.2.8 Exercices

Dans les exercices suivants, on vous demande de trouver le code qui produit sur l'écran le résultat demandé. Si vous introduisez un texte entre plusieurs balises, imbriquez-les de manière logique, comme vous faites par exemple pour les accolades, crochets et parenthèses en mathématiques.
(Par exemple pour produire sur l'écran Hell o , écrivez le code Hell<big><u>o</u></big> et non Hell<big><u>o</big></u>

Copiez (Sélection, CTRL C, éditeur, ouvrir page vierge, CTRL V) le texte suivant dans votre éditeur et introduisez votre code entre les balises <body> et </body>, puis essayez-le dans Firefox et I.E.. N'oubliez pas d'enregistrer votre code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.74em; color:#555555; background-color:#FFFFFF; text-align:left; line-height:20px; text-align:left; }
</style>
</head>
<body>



</body>
</html>

Trouvez le code pour produire exactement ce résultat (espaces respectés, sans les lettres a, b etc..):


  1. Ce texte est souligné

  2. Ce
    texte
     est à moitié
    souligné

  3. 2H2+O2 -> 2H2O

  4. (am)n = amn

  5. nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr nobrnobr