Titres et paragraphes

Les titres, les pragraphes et les divisions sont essentiels pour former une certaine hiérarchie ou un certain ordre dans le document. Ces balises sont affichés par défaut sous forme de blocs (ou rectangles) empilés les un sur les autres.

Titres ou entêtes

Les balises <h1>, <h2>, <h3>, <h4>, <h5>, <h6> permettrent d'identifier du texte comme étant des en-têtes de page, de sections et de sous-sections. On parle aussi de titres et de sous-titres. Généralement, les balises h1 à h6 doivent être en ordre d'importance: h1 est l'en-tête le plus important et h6 le moins important.

Les balises h1 et h6 sont aussi utilisées par les moteurs de recherches et peuvent être utilisées par les navigateurs. Plusieurs moteurs de recherche, par exemple, utilisent les en-têtes en donnant plus d'importance aux mots clés qui les composent. Un navigateur pourrait aussi générer automatiquement une table des matières à l'aide de ces balises.

Voici une exemple d'utilisation des en-têtes, l'ensemble forment un plan:

<h1>La pollution atmosphérique</h1>
 <h2>Introduction</h2>
   <h3>Sujet amené</h3>
   <h3>Sujet posé</h3>
   <h3>Sujet divisé</h3>
 <h2>Développement</h2>
   <h3>Les gaz d'échappement des automobiles</h3>
   <h3>La fumée des usines</h3>
   <h3>La fumée résidentielle</h3>
 <h2>Conclusion</h2>

Dans le document final, chaque en-tête sera suivi d'un ou plusieurs paragraphes.

Paragraphes

La balise <p> permet d'indiquer un paragraphe. Un paragraphe est une suite de phrases traitant une seule idée. Le paragraphe suit généralement un en-tête.

<h3>La pollution dans les villes</h3>
<p>Aujourd'hui, la pollution atmosphérique est la cause de nombreux décès dans les grandes villes. 
À Mexico, à Paris, à Tokyo et dans d'autres grandes villes, les citoyens doivent parfois porter des masques 
pour marcher dans les rues des centres-villes. Il existe aussi des mesures préventives pour limiter le nombre 
de voitures qui y circulent.</p>
<p>... deuxième paragraphe ...</p>

Divisions

La balise <div> permet de structurer et de regrouper d'autres balises lorsqu'on ne peut utiliser une autre balise plus précise. Elle permet de regrouper des paragraphes, des en-têtes, des formulaires, des tableaux et la plus majorité des autres balises visibles. On l'utilise souvent avec l'attribut id="" ou l'attribut class="".

<div id="chapitre1" class="chapitre">
 <h2>Chapitre 1: L'histoire de l'automobile</h2>
 <p>C'est en ...</p>

 <div class="souschapitre">
  <h3>...</h3>
  <p>...</p>
 </div>

</div>

Autres

Il existe d'autres balises blocs qui sont utilisés en XHTML. Elles sont par contre moins utilisés puisque leur signification est plus pointue.

<address>

La balise address permet d'inscrire une adresse pour contacter une personne ou une organisation reliée au document. On l'utilise souvent au bas de page.

<address>
 <a href="http://yansanmo.no-ip.org:8080/">Yan Morin</a> - <a href="mailto:yansanmo@iquebec.com">yansanmo@iquebec.com</a>
</address>

<blockquote>

La balise permet d'insérer une citation longue (plusieurs paragraphes, une liste, etc.) dans le document. L'attribut "cite" permet d'ajouter un lien vers le texte complet d'origine. Voici un exemple avec un paragraphe:

<blockquote cite="http://www.livre.com/tolkien/lesdeuxtours.xhtml">
<p>Ils allaient en file indienne, courant comme des limiers après un puissant fumet,
une lueur de convoitise dans leurs yeux. L'immense traînée des Orques en marche
traçait son vilain sillon presque droit vers l'ouest ; l'herbe douce du Rohan avait
été écrasée et noircie sur leur passage.</p>
</blockquote>

<pre>

La balise <pre> permet d'ajouter du texte préformatté au document. Du texte préformatté maintient les espaces, les tabulations et les changements de lignes (retour de chariot).

<pre>
Ceci est un texte dans une balise pre
Deuxième ligne
Troisième ligne
	Tabulation
  Espace double  ==  ==  ==  ==
</pre>