La syntaxe HTML

Introduction au langage HTML Une première page HTML

Accès rapide :
Définir un tag HTML
Définitions d'attributs sur un tag HTML
Les entités HTML prédéfinies

Définir un tag HTML

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>

• La ligne 1 définit un titre de niveau 1 (h1 -> heading 1).
• La ligne 3 définit un paragraphe (p -> paragraph). De même pour la ligne 7.
• La ligne 5 définit un trait de séparation horizontal (hr -> horizontal rule)

Définitions d'attributs sur un tag HTML

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 :

• rel : indique la nature de la relation. Dans notre cas, "stylesheet".
• type : indique le langage de feuille de style utilisé. Pour l'heure, il n'y a qu'une seule possibilité : "type/css".
• href : la référence hypertexte (l'adresse du lien) vers le fichier CSS à utiliser.

 1 

<link rel='stylesheet' type="text/css" href="file.css" />

Les entités HTML prédéfinies

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.

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 &lt;, &gt; et &amp;.

 1 
 2 
 3 

<pre>if ( value &gt; 50 &amp;&amp; value &lt; 100 ) {
    console.log( "Yes" );
}</pre>

Le résultat affiché dans la page Web sera le suivant :

if ( value > 50 && value < 100 ) {
    console.log( "Yes" );
}

Vous pouvez consulter une liste d'entités plus complète en activant le lien suivant : Liste des entités HTML prédéfinies.

Introduction au langage HTML Une première page HTML