Cours de (X)HTML / CSS

Les éléments bloc structurant du texte

<p>

Sert à définir un paragraphe. Un saut de ligne est effectué avant la première ligne du paragraphe.
Ne peut contenir que des élements de type en ligne.

Exemple :

<p>
	La guerre du Péloponnèse désigne le conflit qui dura de 431 à 404, opposant Athènes et Sparte.
</p>

Rendu à l'affichage :

La guerre du Péloponnèse désigne le conflit qui dura de 431 à 404, opposant Athènes et Sparte.

Haut de page

<h1> ... <h6>

Sert à définir des titres en indiquant leur niveau.
Ne peut contenir que des élements de type en ligne.

Exemple :

<h1>Titre niveau 1</h1>
<h2>Titre niveau 2</h2>
<h3>Titre niveau 3</h3>
<h4>Titre niveau 4</h4>
<h5>Titre niveau 5</h5>
<h6>Titre niveau 6</h6>

Rendu à l'affichage :

Titre niveau 1

Titre niveau 2

Titre niveau 3

Titre niveau 4

Titre niveau 5
Titre niveau 6
Haut de page

<blockquote>

Sert à insérer un bloc d'une ou plusieurs citations.
Peut contenir des élements de type bloc et en ligne.

Attributs Strict/Transitional : cite (la valeur est une URL)

Exemple :

<blockquote cite="http://www.evene.fr/citations/index.php">
	<p>Être ou ne pas être, là est la question.</p>
	<p>La vie est une fable pleine de rage et de fureur, racontée par un idiot et qui ne signifie rien.</p>
</blockquote>

Rendu à l'affichage :

Être ou ne pas être, là est la question.

La vie est une fable pleine de rage et de fureur, racontée par un idiot et qui ne signifie rien.

Rendu à l'affichage :

Être ou ne pas être, là est la question.

La vie est une fable pleine de rage et de fureur, racontée par un idiot et qui ne signifie rien.

Haut de page

<address>

Sert à indiquer l'auteur, son contact et d'evéntuelles autres informations sur la page.(attention à l'othographe ; deux « d »)
En DTD Strict, ne peut contenir que des élements de type en ligne.

Exemple :

<address>
	Père Noël, <a href="mailto:pere.noel@laponie.com">envoyer un message au Père Noël</a>
	<br />
	Page publiée le 20/10/2006.
</address>

Rendu à l'affichage :

Père Noël, envoyer un message au Père Noël
Page publiée le 20/10/2006.
Haut de page

<hr /> (XHTML) ; <hr> (HTML)

Sert à insérer un trait horizontal jouant le rôle de séparateur.
Balise auto-fermante ne pouvant contenir aucun autre élement.

Exemple :

<hr />

Rendu à l'affichage :

Haut de page

<pre>

Sert à afficher le texte tel qu'il a été tapé, les espaces, les tabulations et les retours chariot sont respectés avec une police à pas fixe.
Ne peut contenir que des élements de type en ligne.

Exemple :

<pre>
	Accablé de paresse et de mélancolie,
	Je rêve dans un lit où je suis fagoté,
	Comme un lièvre sans os qui dort dans un pâté,
	Ou comme un Don Quichotte en sa morne folie.
	[...]
		 Marc-Antoine Girard de SAINT-AMANT, <em>Le paresseux</em>.
</pre>

Rendu à l'affichage :

		Accablé de paresse et de mélancolie,
		Je rêve dans un lit où je suis fagoté,
		Comme un lièvre sans os qui dort dans un pâté,
		Ou comme un Don Quichotte en sa morne folie.
		[...]
			 Marc-Antoine Girard de SAINT-AMANT, Le paresseux.

Rendu à l'affichage sans l'élément parent <pre> :

Accablé de paresse et de mélancolie, Je rêve dans un lit où je suis fagoté, Comme un lièvre sans os qui dort dans un pâté, Ou comme un Don Quichotte en sa morne folie. [...] Marc-Antoine Girard de SAINT-AMANT, Le paresseux.
Haut de page