Traduction
Tutoriel HTML - sommaire
Tutoriel HTML - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
J'évoque dans ce chapitre des balises déjà présentes dans la version 4 de HTML et qui sont toujours valides dans la norme HTML5.
mais qui souffrent d'une méconnaissance regrettable.
Beaucoup de ces éléments sont des balises doubles c'est à dire que la balise fermante est obligatoire.
Mais avant, je vous indique les éléments que vous ne devez plus utiliser puis je vous montre
les cas où HTML gère encore le style (balises de style toujours valide).
Pour barrer, souligner une partie du texte il ne faut plus utiliser les balises S et U mais le CSS ou utiliser les éléments INS & DEL.
Pour des raisons pratiques certaines mises en forme sont toujours réalisées par le HTML (et pas le CSS).
Les développeurs web sont tellement habitués aux balises b,i, sub, sup que celles-ci sont toujours reconnues par le W3C.
Par contre les éléments U & S sont déclassés au profilt de INS & DEL.
Texte en gras ; Texte en italique ; Texte souligne ; Texte barré
Texte en position normale ; Texte en exposant ; Texte en indice
Texte très important ; Texte avec emphase
Attention ne considérez pas que les balise B et STRONG sont équivalentes.
L'élément STRONG a un sens sémantique : texte très important alors que le rôle de B est purement visuel : mettre en gras.
De même les balises I et EM ont des valeurs différentes.
L'élément EM (EM comme emphase) a une valeur sémantique. ça signifie "mettre l'accent sur ..."
Alors que le rôle de I est de mettre en italique uniquement.
Les textes balisés par STRONG & EM sont pris en compte par les moteurs de recherche mais pas les éléments B et I.
L'élément HTML CODE représente un court fragment de code machine.
Par défaut, le navigateur utilise une police à chasse fixe (monospace) afin d'afficher le texte balisé.
Il s'agit d'une balise double (ou paire) de type "inline".
Dans le cadre d'un formulaire HTML vous devez utiliser les balises :
form, input, output, label, select.
Toutes ces balises sont doubles sauf input.
Il s'agit d'une double de type inline pour définir un mot (dfn comme "définition").
Le texte correspondant à la définition apparait par défaut en italique.
dt{text-decoration : underline; }
dd{margin-left : 10px; }
div.bordure,dl {margin : 10px auto ; width : 80% ; border : 1px solid black; }
Les balises div & dl ont le même style.
Il s'agit d'une balise double de type block pour afficher les coordonnées d'un individu / un organisme.
Je vous prie de trouver ci-joint mes coordonnées :
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.
Il s'agit d'une balise double de type block qui est très pratique pour afficher beaucoup de code machine.
Cette balise permet d'afficher le texte tel qu'il a été saisi :
les espaces, les tabulations, les retours chariot sont pris en compte par le navigateur.
Le code JavaScript sera donc :
var cible = document.querySelector("#joueurs");
cible.ondrop = deposer;
cible.ondragenter = setdrop;
cible.ondragover = setdrop ;
cible.ondragstart = glisser ;
Les sauts de ligne saisis sont pris en compte.
Le texte balisé apparait par défaut avec une police à pas fixe.
Extrait de la feuille de style : pre {... ; background : lavender; ...}
Attention, même contenu dans la balise PRE, le code HTML sera quand même exécuté ...
À la fin de ce chapitre vous trouverez la solution pour qu'il soit simplement affiché.
Il s'agit d'une balise double de type "inline". Le texte balisé est encadré de guillemets.
Le philosophe Boileau a écrit :
Tout ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément.
Retenez "Bloc entre quotes" ; balise utilisée pour des citations longues.
Il s'agit d'un balise double de type "block".
Cette balise dispose de l'attribut cite dont la valeur indique la source de la citation.
Cette balise a davantage une valeur sémantique (utile pour le référencement naturel) et à la différente de Q, elle ne
propose nativement aucune mise en forme ...
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."
Cette balise double peut être utilisée pour indiquer un titre, un auteur, une URL, etc.
Par défaut le texte balisé est affiché en italique mais avec une valeur sémantique importante.
Il s'agit d'une balise de type "inline".
Au bonheur des dames est une oeuvre de Emile Zola.
ABBR (comme abréviation) ; à utiliser pour donner le sens d'un sigle, d'un acronyme.
Le sens du sigle apparait sous forme d'une infobulle lorsque vous survolez l'élément.
Cet élément remplace la balise acronym qui est obsolète.
L'attribut TITLE est obligatoire.
En principe aucun mot n'est coupé par le navigateur sauf si des césures sont forcées via la balise WBR (Word BReak). Il s'agit cette fois d'une balise orpheline ou simple.
Le mot le plus long de la langue française : anticonstitutionnellement
Le mot déborde de la boite ; ce qui n'est pas joli.
Le mot le plus long de la langue française : anticonstitu
Le mot anticonstitutionnellement est coupé ; ce qui évite qu'il ne déborde de la boîte.
Notez l'emploi de la balise WBR inséré au milieu d'un mot.
Pour provoquer une césure au sein d'un mot il existe une solution CSS : appliquer à un élément bloc
la propriété word-break : break-all (césure n'importe où dans le mot) Ou hyphens : auto (coupure entre deux syllabes).
Pour en savoir plus
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 intéressantes pour produire un glossaire.
Chaque conteneur DL (Definition List) contient les balises DT (Definition Term) et DD (Definition Data).
Ces éléments ne sont assortis d'aucun style par défaut.
Notez le soulignement et les : pour les termes définis.
dl{margin : 10px auto ; width : 80% ; border : 1px solid black; padding : 10px;}
dt{text-decoration : underline; }
dt::after { content: ": ";}
dd{margin-left : 10px; }
Il est conseillé de fermer les balises DT et DD.
La balise iframe permet d'insérer un document HTML dans un document HTML. Il s'agit d'une balise double.
Bien que visible à l'écran, cette page imbriquée bénéficie de son propre contexte d'exécution.
Ainsi, les styles et scripts de la page web "mère" n'ont aucun effet sur la page web "fille" et vice versa.
Dans mon site j'utilise très souvent un iframe pour afficher le rendu d'un document HTML tenant lieu d'exemple.
Lorque vous visitez le site googleMaps ce dernier vous propose le code HTML à insérer dans votre page pour faire apparaitre une carte
Notre établissement est situé place Jean Bart à Dunkerque.
Voir carte ci-dessous.
La valeur de l'attribut src de la balise IFRAME est une chaine très très longue ; je n'ai indiqué qu'un extrait.
Attention l'élément 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 : 10px auto ; }
Lorsque vous imbriquez une image dans un élément A, l'image pointe un seul lien.
Ce que nous voulons c'est que selon l'emplacement cliqué dans l'image le lien activé est différent.
Il faut alors utiliser les balises AREA dans le conteneur MAP en lien avec un élément IMG.
Notez que l'élémént IMG fait 300 par 175 et dispose de l'attribut usemap ;
par ailleurs la balise MAP a un seul attribut : name dont la valeur doit correspondre à celle utilisée pour l'attribut usemap de IMG.
Ici je fixe la valeur de ces deux attributs à "logo".
Dans l'exemple on découpe l'image en trois zones cliquables donc l'élément MAP contient trois fois la balise AREA.
Comme ces zones cliquables sont des rectangles, l'attribut shape de AREA vaut "rect" ; il faut aussi préciser dans l'attribut coords
les coordonnées X & Y des coins haut gauche et bas droit du rectangle ; dans href la cible et dans alt le texte alternatif à l'image.
Voici une problématique intéressante lorsque vous voulez réaliser un tuto HTML ou SVG ou JS avec des extraits de code qui doivent simplement s'afficher (mais surtout ne pas être interprétés par le navigateur).
Pour afficher du code CSS ou du code JS sans qu'il soit pris en compte, c'est très simple. Il suffit que le code
CSS soit en dehors du conteneur STYLE et le code JS en dehors du conteneur SCRIPT.
Personnellement j'inclus les extraits de code CSS ou JS dans le conteneur PRE afin que les retraits, espaces et
sauts de ligne soient pris en compte.
Mais pour que le code HTML ne soit pas interprété c'est un peu plus délicat.
Voyons ci-dessous les différents solutions pour simplement afficher du code HTML.
On peut lire dans certains tutos qu'il faut utiliser la balise PRE. C'est faux ou plutôt ce n'est pas suffisant.
Pour éviter que le code HTML soit exécuté, il faut remplacer dans le code HTML à afficher, les chevrons par leur entité de caractère :
Le code HTML modifié (chevrons remplacés par leur entité) peut alors être contenu dans la balise PRE.
Une entité de caractère (ou entité HTML) commence toujours par le caractère & et se termine toujours par ;
Entre les deux un mot qui est souvent un acronyme. Ainsi ici "lt" signifie "less than" et "gt" signifie "greater than".
Le code HTML contenu dans cette balise est affiché sans être exécuté.
Cette balise est considérée comme obsolète par le W3C ; c'est quand même regrettable compte tenu de son côté très pratique.
Maintenant elle est encore comprise des navigateurs même récents mais forcément une page contenant l'élément XMP ne sera pas valide ...
Je vous déconseille cette solution car il est possible que dans le futur les navigateurs n'interprètent plus la balise XMP.
Comme vous savez cette balise sert dans le cadre d'un formulaire, à saisir un long texte. Mais si on lui ajoute l'attribut readonly elle permet d'afficher fidèlemenent du code.
<textarea readonly> Syntaxe de la balise IMG est : <img src ="chemin relatif image" alt ="texte alternatif" /> </textarea>
C'est la solution que j'ai retenu dans mon site.
La norme HTML5 introduit de nouveaux éléments donc beaucoup ont un intérêt sémantique évident.
Il peut donc être utile de les utiliser dans le cadre du SEO (Search Engine Optimization) ou référencement naturel.
Les nouvelles balises sémantiques