HTML4 : des balises méconnues

J'évoque dans ce chapitre des balises qui existaient dans la version 4 de HTML mais qui sont peu connues et qui sont toujours valides dans la norme HTML 5.

La balise DFN

Balise double de type inline pour définir un mot.

Exemple

Le texte correspondant à la définition apparait par défaut en italique.

Le code HTML correspondant

<ul>Il y a trois formes d'hermaphrodisme chez les poissons : <li>protandre : <dfn>individu nait mâle puis devient femelle</dfn> <li>protogyne : <dfn>individu nait femelle puis devient mâle</dfn> <li>synchrone : <dfn>individu dispose durant toute son existence des organes mâle et femelle</dfn> </ul>

La balise double ADDRESS

Il s'agit d'une balise de type block pour afficher les coordonnées d'un individu / un organisme.

Exemple

Je vous prie de trouver ci-joint mes coordonnées :

Charles Dupont
55 rue des poilus
62100 Calais
dupont_charles@gmail.com

Le texte apparait par défaut en italique comme si il était à l'intérieur du conteneur I mais la balise ADDRESS a en plus une valeur sémantique importante.

Le code HTML correspondant

<address> Charles Dupont <br>55 rue des poilus <br>62100 Calais <br>dupont_charles@gmail.com </address>

La balise double PRE

Il s'agit d'un balise de type block qui est très pratique pour afficher du code.
Cette balise permet d'afficher le texte dans la page tel qu'il a été saisi via l'éditeur. Les espaces, les tabulations, les retours chariot sont pris en compte.

Exemple

Le code JS sera donc :

	var cible = document.querySelector("#joueurs");
	cible.ondrop = deposer; 
	cible.ondragenter = setdrop; 
	cible.ondragover = setdrop ; 
	cible.ondragstart = glisser ; 

Le code HTML correspondant

<p>Le code JS sera donc : <pre> var cible = document.querySelector("#joueurs"); cible.ondrop = deposer; cible.ondragenter = setdrop; cible.ondragover = setdrop ; cible.ondragstart = glisser ; </pre>

Les sauts de ligne saisis sont pris en compte par le navigateur !
Le texte balisé apparait par défaut avec la police à pas fixe telle courier.

La balise double BLOCKQUOTE

"Bloc entre quotes". Balise utilisée pour des citations longues.
Balise de type "block".

Exemple

Extrait de l'appel du 18 juin 1940 par le général de Gaulle :

Moi, général de Gaulle, actuellement à Londres, j'invite les officiers et les soldats français qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, avec leurs armes ou sans leurs armes, j'invite les ingénieurs et les ouvriers spécialisés des industries d'armement qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, à se mettre en rapport avec moi.

Le code HTML correspondant

<blockquote> Moi, général de Gaulle, actuellement à Londres, j'invite les officiers et les soldats français qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, avec leurs armes ou sans leurs armes, j'invite les ingénieurs et les ouvriers spécialisés des industries d'armement qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, à se mettre en rapport avec moi. </blockquote>

La balise double Q

A utiliser pour des citations courtes. Balise de type "inline".

Exemple

Le grand philosophe Descartes a écrit : Tout ce qui se conçoit bien s'énonce clairement et les mots viennent à la bouche aisément.

Il s'agit d'une balise inline.Le texte balisé est encadré de guillemets.

Le code HTML correspondant

<p>Le grand philosophe Descartes a écrit : <q>Tout ce qui se conçoit bien s'énonce clairement et les mots viennent à la bouche aisément.</q>

La balise CITE

Cette balise double peut être utilisée pour indiquer un titre, un auteur, une URL, etc.
Par défaut le texte balisé est en italique. Balise de type "inline".

Exemple

Au bonheur des dames est une oeuvre de Emile Zola.

Le code HTML correspondant

<p><cite>Au bonheur des dames</cite> est une oeuvre de <cite>Emile Zola</cite>.

La balise ABBR

ABBR (comme abréviation). A utiliser pour donner le sens d'un sigle, d'un acronyme.
La définition apparait lorsque le visiteur survole le sigle sous forme d'une infobulle.

Exemple

Le code HTML correspondant

<ul>Quelques sigles célèbres : <li><abbr title ="Société Nationale des Chemins de Fer">SNCF</abbr> <li><abbr title ="Ecole Nationale d'Administration">ENA</abbr> <li><abbr title ="Président Directeur Général">PDG</abbr> </ul>

L'attribut TITLE est obligatoire.

Balise orpheline WBR

En principe aucun mot n'est coupé par le navigateur sauf si des césures sont forcées avec la balise orpheline WBR (Word BReak).

Exemple

Le mot le plus long de la langue française : anticonstitutionnellement

Le mot anticonstitutionnellement est coupé ; ce qui évite qu'il ne déborde de la boîte.

Le code HTML

<div style ="background : orange ; width : 150px;"> <p>Le mot le plus long de la langue française : <b>anticonstitu<wbr>tionnellement</b> </div>

Notez la balise orpheline WBR que j'ai insérée au milieu du mot pour provoquer une césure.

Les listes de définitions

Tout le monde connait les listes ordonnées (OL : ordered list) et les listes à puces (UL : unordered list).
Beaucoup moins connues les listes de définitions ; elles peuvent être utiles pour produire un glossaire.

Le conteneur DL (Definition List) contient des balises doubles DT (Definition Term ou terme à définir) et des balises doubles DD (Definition Data).

Exemple : extrait d'un glossaire

Antenne :
Appendice sensoriel mobile, long et filiforme que certains invertébrés (Annélides, Crustacés, etc.) portent sur la tête.
Antennule :
Petite antenne courte chez les crustacés.
Anthropique :
Caractérise, en écologie la transformation d'un écosystème naturel, par l'effet de l'action humaine. L'effet anthropique peut être volontaire ou non.

Le code correspondant

CSS :

	dl{border : 1px solid black; margin : 20px;padding : 10px;}
	dt{text-decoration : underline; }
	dd{margin-left : 10px; }

Code HTML :

<dl> <dt>Antenne : <dd>Appendice sensoriel mobile, long et filiforme que certains invertébrés (Annélides, Crustacés, etc.) portent sur la tête. <dt>Antennule : <dd>Petite antenne courte chez les crustacés. <dt>Anthropique : <dd>Caractérise, en écologie la transformation d'un écosystème naturel, par l'effet de l'action humaine. L'effet anthropique peut être volontaire ou non. </dl>

Il n'est pas obligatoire (mais conseillé) de fermer les balises DT et DD.

La balise iframe

La balise iframe permet d'insérer une page HTML dans une autre page web.

Lorque vous visitez le site googleMaps ce dernier vous propose le code HTML pour insérer la carte dans votre site.

Exemple

Notre établissement est situé place Jean Bart à Dunkerque.
Voir carte ci-dessous.

Le code correspondant

<p>Notre établissement est situé place Jean Bart à Dunkerque. <br>Voir carte ci-dessous. <iframe src="https://www.google.com/maps/embed?pb=... width="600" height="450" frameborder="0" style="border:0" allowfullscreen> </iframe>

Attention la balise iframe est nativement de type inline. Donc pour que la carte soit bien centrée dans la page il faut ajouter dans la feuille de style la règle ci-dessous :

iframe {display : block ; margin :auto ; }

Comment afficher du code HTML (sans qu'il soit interprété) ?

Voici une problématique intéressante lorsque vous voulez réaliser un tuto HTML !

Utiliser le conteneur PRE

On peut lire dans certains tutos qu'il faut utiliser la balise PRE. C'est faux ou plutôt c'est pas suffisant. En fait la balise PRE se contente d'afficher le texte avec une police à chasse fixe et les sauts de ligne dans le texte sont respectés.
Prenons un exemple !

	

La syntaxe de la balise IMG (pour insérer une image) est : texte alternatif

Le code correspondant

<pre> <p>La syntaxe de la balise image est : <img src ="chemin relatif image" alt ="texte alternatif" /> </pre>

Le code HTML est exécuté quand même et comme le navigateur ne trouve pas l'image il affiche le contenu de l'attribut alt.

Solution

Pour éviter que le code HTML soit interprété, il faut remplacer dans le code les chevrons par leur entité de caractère !

Le code HTLM correspondant :

<pre> <p>Syntaxe de la balise image : &lt;img src ="chemin relatif image" alt ="texte alternatif" /&gt; </pre>

Le rendu :

	

Syntaxe de la balise image : <img src ="chemin relatif image" alt ="texte alternatif" />

Le saut de ligne est appliqué ; l'instruction est simplement affichée.

Autre solution

Utiliser la balise XMP !
Le code HTML & CSS & JavaScript contenu dans cette balise est affiché mais pas exécuté.

J'utilise beaucoup le conteneur XMP mais il y a un problème. Cette balise est considérée comme obsolète par le W3C.
C'est quand même étonnant compte tenu de son côté très pratique ...
Maintenant elle est encore comprise des navigateurs même récents.

Solution ter

Utiliser la balise TEXTAREA

La syntaxe de la balise IMG est :

Code correspondant:

<textarea readonly style =" display : block ; width :80%;margin :auto;"> <img src ="chemin relatif image" alt ="texte alternatif" /> </textarea>

Attention par défaut la zone de texte multi-lignes est un éditable. Il faut donc rajouter l'attribut readonly.

Il faut aussi rajouter une règle de style pour un affichage correct :
textarea est un élément "inline" qu'il faut transformer en boite (display :block) pour pouvoir appliquer margin :auto.
Retour menu