iFrame

Il y a en réalité peu de chose à dire sur les éléments destinés à gérer des morceaux de texte. En effet, certains sont trop spécialisés pour être utilisés souvent (code, kbd, samp, etc), d'autres sont carrément exotiques (bdi, bdo, ruby, rt, etc) et enfin certains ne sont gardés (b, i, u, etc) que pour la rétro-compatibilité car la mise en forme est faite désormais avec des propriétés de style CSS.

Nous ne verrons donc ici en détail que quelques éléments texte parmi ceux dont l'utilisation perdure encore un peu.
Remarque : l'élément a qui fait partie des éléments texte est par ailleurs dans la partie sur les liens.

: important

On utilise l'élément strong pour marquer une partie de texte comme importante. Généralement les navigateurs affiche le texte ainsi marqué en gras.

L'exemple utilise aussi l'élément code, particulièrement adapté ici. Comme on le voit, le texte marqué par cet élément est rendu par défaut avec une police à espacement fixe, comme celle utilisée dans les éditeurs de code informatique.

: emphase

On utilise l'élément em pour marquer une partie de texte sur laquelle on veut donner de l'emphase : le mettre en relief, insister ou exagérer. Généralement les navigateurs affiche le texte ainsi marqué en italique.

: saut de ligne

On utilise l'élément br pour forcer un saut de ligne dans du texte.

Il ne faut jamais chercher à formatter un texte entier en forçant des sauts de ligne pour le faire tenir dans l'espace réservé à son affichage. Il suffirait que la largeur de cet espace change (lors du redimensionnement de la fenêtre du navigateur par exemple) pour que la mise en forme soit incohérente. Il se pourrait aussi que la police de caractères définie par l'auteur de la page ne soit pas disponible sur l'ordinateur client. Dans ce cas, le navigateur fera une substitution avec la police de la famille la plus proche qu'il trouvera, mais les tailles des caractères pourront varier de quelques pixels, rendant les sauts de ligne forcés mal placés.

Exemple : saut de ligne

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Saut de ligne</title>
		<style>
			p {width: 400px; border: 1px solid}
			.arial {font: 13px arial}
			.verdana {font: 13px verdana}
		</style>
	</head>
	<body>
		Ce texte est affiché dans des blocs de 400 pixels de large. Les blocs sont entourés pour être bien visible. La police utilisée dans le 1er bloc est Arial, Verdana dans le second. Ce sont des polices de la même famille (sans-serif), souvent utilisées sur le web. On voit que le texte "découpé" avec des br est correctement affiché avec Arial, mais avec Verdana les sauts de ligne sont très mal placés.
		
		Ce texte est affiché dans des blocs de 400 pixels de large. Les blocs sont entourés pour être bien visible. La police utilisée dans le 1er bloc est Arial, Verdana dans le second. Ce sont des polices de la même famille (sans-serif), souvent utilisées sur le web. On voit que le texte "découpé" avec des br est correctement affiché avec Arial, mais avec Verdana les sauts de ligne sont très mal placés.
		
	</body>
</html>

avec précaution utiliser il faut.

: affecter un style

L'élément span est utilisé pour affecter un style CSS à une partie de texte. On utilisera l'attribut class ou l'attribut id pour faire la liaison entre le texte et la mise en forme qu'on lui donne.

Rendu des éléments texte

Complétez le code HTML pour obtenir le résultat ci-dessous.

Code à compléter

Une solution possible

Exercice : liens vers un iframe

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Rendu des éléments texte</title>
	</head>
	<body>
		Exemple de <abbr title="abrévation">l'élément
			abbr</abbr> dans du texte.
		Exemple de l'élément b dans du texte.
		Exemple de <cite>l'élément cite</cite> dans du texte.
		Exemple de <code>l'élément code</code> dans du texte.
		Exemple de <del>l'élément del</del> dans du texte.
		Exemple de <dfn>l'élément dfn</dfn> dans du texte.
		Exemple de l'élément em dans du texte.
		Exemple de l'élément i dans du texte.
		Exemple de <ins>l'élément ins</ins> dans du texte.
		Exemple de <kbd>l'élément kbd</kbd> dans du texte.
		Exemple de l'élément mark dans du texte.
		Exemple de <q>l'élément q</q> dans du texte.
		Exemple des éléments ruby, rp et rt 
		<ruby>家辺 勝文<rp>(</rp><rt>liaison</rt><rp>)</rp>
			</ruby>
		Exemple de <s>l'élément s</s> dans du texte.
		Exemple de <samp>l'élément samp</samp> dans du texte.
		Exemple de l'élément small dans du texte.
		Exemple de l'élément span dans du texte.
		Exemple de l'élément strong dans du texte.
		Exemple de l'élément sub dans du texte.
		Exemple de l'élément sup dans du texte.
		Exemple de <time>l'élément time</time> dans du texte.
		Exemple de <var>l'élément var</var> dans du texte.
	</body>
</html>

<strong> : important

<em> : emphase

<br> : saut de ligne

<span> : affecter un style

Rendu des éléments texte