Organiser le contenu

Un document XHTML est destiné à recevoir principalement du contenu texte, on va maintenant voir comment insérer ce contenu.

Pour organiser le document, on dispose de deux types de balises : en ligne et bloc

Balises en ligne et balises bloc : la différence

Balises en ligne
Leur contenu est affiché au fil du texte, sans séparation avec le texte qui l'entoure.
Elles ne peuvent contenir que des éléments en ligne
On ne peut pas leur spécifier de hauteur ni de largeur (sauf <img />, <input />, <textarea></textarea>, <select> </select>, <object />)

Exemple de balise en ligne :

Ceci est <strong>un texte</strong> important Ceci est un texte important
Balises bloc
Le contenu de la balise forme un bloc qui se détache du contenu environnant.
Elles peuvent contenir des éléments en ligne ou bloc
On peut leur spécifier une hauteur ou une largeur

Exemple de balise en bloc :

Ce texte <p>est dans un bloc</p>, celui ci non. Ce texte

est dans un bloc,

celui ci non.

Principales balises

Voyons les principales balises à utiliser dans un document XHTML.

Balises bloc indispensables

Ne pas oublier que pour chacune de ces balises on pourra assigner une hauteur, largeur, un positionnement, une bordure ... en CSS. Pour ceux qui connaissent déjà : nul besoin de mettre de la balise div de partout.

Titres
<h1> </h1> à <h6></h6>
La balise h1 représente un titre de niveau 1 : le titre de la page par exemple. On dispose de 5 autres balises pour désigner les niveaux de sous titres.
A utiliser absolument : organisent le contenu de la page de manière logique.
Paragraphes
<p></p>
On a déjà recontré cette balise qui désigne un paragraphe. Ne pas oublier que l'espacement des paragraphes est réglable via les CSS : pas besoin d'utiliser <br />
Bloc neutre
<div></div>
Ce bloc n'a pas de sémantique particulière. On l'utilise pour désigner les grandes parties du document. Souvent accompagné de l'argument id ou class
A utilser à bon escient : ne pas abuser sous peine d'alourdir le code sans raison

Balises en ligne indispensables

Très utiles pour mettre en relief certaines parties de texte, ou renseigner sur le contenu

Images
<img src="" alt="" />
Insère une image dans le fil du texte.
L'attribut src désigne l'adresse URI de l'image à afficher (obligatoire)
L'attribut alt désigne le texte de remplacement (obligatoire, doit être vide pour les images sans utilité). Le texte de remplacement est utilisé par les personnes navigant sous lynx ou les aveugles (comme google)
Forte accentuation
<strong> </strong>
Par défaut met le texte en gras. Signifie : texte fortement accentué. Pour mettre l'accent sur certaines portions de textes, expressions
Oubliez la balise <b> qui ne donne aucun sens au texte.
Accentuation
<em> </em>
Par défaut met le texte en italique. Siginifie : texte accentué. Pour mettre l'accent sur certaines portions de textes, expressions
Oubliez la balise <i> qui ne donne aucun sens au texte.
Balise neutre
<span></span>
Elle est aux balises en ligne ce que div est aux balises en bloc. Elle sert à identifier certaines parties de texte qui n'on pas de sens particulier.
A utiliser à bon escient.

Les autres balises

Pour toutes les autres balises : Balises

Exercice

Créer un document XHTML 1.1 valide contenant :