Accès rapide :
Définir un tag HTML
Définitions d'attributs sur un tag HTML
Les entités HTML prédéfinies
Le langage HTML utilise des marqueurs (nous parlerons à partir de maintenant de tags) pour structurer vos documents. Historiquement parlant, le langage HTML avait défini deux types de tags : les tags ouvrants et les tags fermants. Par la suite XML avait rajouté la notion de tags ouvrants et fermants (donc sans contenu). HTML 5 hérite de ces trois possibilités. Reprenons chaque type un à un :
Un tag ouvrant : un tel tag commence par un caractère < et se termine par un caractère >. Entre ces deux caractères nous retrouvons le nom du tag (souvent en abrégé) ainsi
que d'éventuels attributs. Par exemple, pour introduire un tableau HTML, nous utiliserons le tag ouvrant <table>
.
Un tag fermant : ce type de tag ressemble à un tag ouvrant à deux différences près. Premièrement, il commence par </
. Et second point, il ne peut pas contenir
d'attribut. Par exemple, pour refermer un tableau HTML, nous utiliserons le tag fermant </table>
.
Un tag ouvrant et fermant : ce type de tags est utile dès lors que vos tags ne contiennent pas de contenu. Dans ce cas, plutôt que d'écrire <br></br>
,
pour définir un retour à la ligne, vous pouvez opter pour <br/>
. Il est vrai que le langage HTML n'impose pas de fermer un tag sans contenu (il est possible de
mettre simplement <br>
). Pour autant, indiquer qu'il se ferme sera une information bien utile quand on cherche à relire un page Web écrite par une autre personne.
Voici un petit exemple d'utilisation d'utilisation de tags. Quelques explications suivront.
1 2 3 4 5 6 7 |
<h1>Ceci est un titre de niveau 1</h1> <p>Et ceci est un paragraphe</p> <hr/> <p>Un autre paragraphe</p> |
Un tag ouvrant peut posséder des attributs. Un attribut HTML est défini par son nom et sa valeur : ces deux parties sont séparées par un caractère =. De plus la valeur d'un attribut et comprise soit entre deux appostrophes, soit entre deux doubles guillemets (c'est comme vous voulez).
L'exemple suivant définit un tag <link>
. Ce tag peut, notamment, charger une feuille de style CSS au sein d'une page HTML.
Dans ce cas, trois attributs sont nécessaires. Ils servent à spécifier :
1 |
<link rel='stylesheet' type="text/css" href="file.css" /> |
Il est aussi possible d'utiliser des entités HTML prédéfinies. Ces entités permettent d'injecter dans votre document soit des caractères inaccessibles par votre clavier, soit
des caractères ayant un sens du point de vue de la syntaxe HTML. Par exemple <
(lesser than en anglais) utilisé pour introduire un caractère <
(normalement utilisé pour débuter un tag). Voici quelques premières entités HTML à connaître par coeur.
Entités prédéfinies | Commentaire | Caractère équivalent |
---|---|---|
< | lesser than | < |
> | greater than | > |
& | ampersand | & |
" | quote - surtout utile dans les valeurs d'attributs | " |
' | apostrophe - surtout utile dans les valeurs d'attributs | ' |
| non breaking space - utile pour forcer des espaces insécables (qui ne peuvent être supprimés) |
Voici un exemple d'utilisation d'entités prédéfinies : on souhaite afficher un code JavaScript dans la page HTML. Pour ce faire, nous utilisons le tag <pre> qui permet de conserver les séparateurs et les retours à la ligne ("pre" pour preserve). Le code javaScript proposé vérifie si une valeur est comprise en un intervalle : il faut donc utiliser les entités <, > et &.
1 2 3 |
<pre>if ( value > 50 && value < 100 ) { console.log( "Yes" ); }</pre> |
Le résultat affiché dans la page Web sera le suivant :
if ( value > 50 && value < 100 ) { console.log( "Yes" ); }
"
autour du mot Yes
.
C'est normal, dans un tag, le caractère "
ne pose aucun problème. Par contre, dans une valeur d'attribut de tag, nous aurions dû utiliser
cette entité.
Vous pouvez consulter une liste d'entités plus complète en activant le lien suivant : Liste des entités HTML prédéfinies.
Améliorations / Corrections
Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.
Emplacement :
Description des améliorations :