Introduction

La langage HTML (HyperText Markup Language) est utilisé pour décrire la structure d'une page Web. C'est un langage descriptif à base de marqueurs (de tags, en anglais). Parfois, le terme de balise est aussi utilisé en lieu et place de marqueur.

Le langage HTML est utilisé conjointement avec les langages CSS et Javascript. Le langage CSS permet d'appliquer un style visuel (une charte graphique) à vos pages, tandis que Javascript permet d'y adjoindre des effets dynamiques.

La syntaxe 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.

Définitions d'attributs sur un tag HTML

Un tag ouvrant peut de plus 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. Par exemple voici un tag définissant trois attributs (rel, type et href ): <link rel='stylesheet' type="text/css" href="file.css" />

Les entités HTML prédéfinies

Enfin, notez qu'il est 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 &lt; (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
&lt; lesser than <
&gt; greater than >
&amp; ampersand &
&quot; quote - surtout utile dans les valeurs d'attributs "
&apos; apostrophe - surtout utile dans les valeurs d'attributs '
&nbsp; non breaking space - utile pour forcer des espaces insécables (qui ne peuvent être supprimés)

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

Exemple de code

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
<!DOCTYPE html>
<html>
    <head>
        <title>A little HTML page</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="file.css" />
    </head>
    <body>
        <header>
            <h1>A little HTML page</h1>
        </header>
        
        <h2>Another title of level 2</h2>
        
        <p>
           A small paragraph.
        </p>
    
        <footer>
            <hr/>
            <p>
                This is the page footer.
            </p>
        </footer>
        
    </body>
</html>
Une page HTML simple