Le langage HTML/Structure de base d'un document HTML

Les documents HTML doivent tous avoir une structure minimale. C'est-à-dire des balises qui sont toujours présentes et au milieu desquelles vous allez ajouter votre propre contenu. Ce chapitre présente cette structure en donnant quelques explications sur les mots-clefs principaux (aussi appelés balises).

Introduction

Bien commencer le HTML

Voici un exemple de page minimale :

<!DOCTYPE html>
 
<html>
 
   <head>
     <title>Titre affiché dans la barre de titre du navigateur</title>
   </head>
 
   <body>
     <!-- C'est ici que vous mettrez votre contenu -->
   </body>
 
</html>

Les balises

Comme vous le savez, le HTML utilise ce que l'on nomme des balises afin de structurer les informations et pour transformer votre code source en document correct affiché à l'écran. Connaître toutes les balises par cœur n'est heureusement pas nécessaire mais il faut en avoir bien compris le principe pour pratiquer le HTML. On a de plus tendance à utiliser un nombre de balises plus restreint qu'il n'y paraît.

Pour rappel une balise est composée du nom de l'élément entouré des symboles « < » et « > ». Par exemple <html> est une balise.

Les balises viennent en général par deux.

Une ouvrante dont la syntaxe est décrite juste au dessus.
Une fermante qui s'écrit comme l'ouvrante sauf que l'on fait précéder le mot clef par le caractère « / ».

Certaines balises sont dites vides, c'est-à-dire qu'elles ne contiennent pas d'autres éléments. Ces balises ne possèdent donc pas de balises de fermeture.

Lorsqu'une balise n'est pas vide, vous pouvez mettre différentes choses entre la balise d'ouverture et la balise de fermeture comme du texte ou d'autres balises.

Il est interdit de « croiser les balises » c'est-à-dire qu'il n'est pas permis de fermer une balise alors qu'une autre, ouverte après elle, n'est pas encore fermée. Il faut toujours faire attention à bien les emboîter.

Un grand nombre de balises prennent des attributs. Ils servent à paramétrer finement la sémantique d'une balise (par exemple en indiquant la cible d'un lien). Après le mot-clef, il suffit de mettre le nom de l'attribut suivi du symbole = et d'une valeur à donner à l'attribut, placée entre guillemets.

Ainsi dans la balise <a href="https://fr.wikipedia.org">Lien vers wikipedia</a> :

le mot-clef est « a »
elle contient un attribut nommé « href » qui a pour valeur « https://fr.wikipedia.org ».

Les attributs sont toujours de la forme nom_de_l'attribut="valeur".

Chaque balise peut posséder plusieurs attributs différents. Bien sûr, comme pour les balises, il est inutile de connaître par cœur tous les attributs et toutes les valeurs.

Si ce qui précède n'est pas clair, retournez lire l'introduction.

La page minimale

Voici une page minimale dont nous allons expliquer tous les éléments :

<!DOCTYPE html>

<html>

   <head>
     <title>Titre affiché dans la barre de titre du navigateur</title>
   </head>

   <body>
     <!-- C'est ici que vous mettrez votre contenu -->
   </body>

</html>

La définition de type de document

Vous le savez, on en a parlé en long en large et travers dans l'introduction, il existe plusieurs versions du HTML et avec ça plusieurs variantes. On a aussi dit qu'une fois la version (et le cas échéant la variante) choisie, il fallait s'y tenir. Mais pour savoir si vous respectez bien les règles d'une certaines version, il faut dire la version que vous utilisez ! C'est à ça que sert la première ligne. Elle paraît barbare mais ne vous inquiétez pas, vous n'aurez pas à l'apprendre par cœur (franchement je me demande si quelqu'un la connaît). Cette première balise donc est la déclaration de type document (appelée couramment doctype). Dans le cas présent, c'est du HTML5.

Vous avez ci-dessous une liste des Doctype les plus utilisés que vous pouvez directement copier / coller.

Importance du DOCTYPE

Sans un DOCTYPE, vous ne pourrez pas faire passer votre page par un validateur.

Vous avez sûrement remarqué qu'il n'y a pas de / final. En effet, le DOCTYPE n'est pas une balise, en fait, mais a un statut bien particulier.

Les trois variantes du HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">      

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

Les trois variantes du XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Le XHTML 1.1 (qui n'a pas de variantes)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Le HTML 5

<!DOCTYPE html>

Les Balises

Nous retrouvons ici notre exemple du haut de page, pour en expliquer les principales balises. En HTML, pour le nom des balises, il n'y a pas de distinction entre majuscules et minuscules. Cependant, par le passé la tendance était de mettre le nom tout en majuscules, tandis que la tendance actuelle est de mettre le nom tout en minuscules.

<!DOCTYPE html>
 
<html>
 
   <head>
     <title>Titre affiché dans la barre de titre du navigateur</title>
   </head>
 
   <body>
     <!-- C'est ici que vous mettrez votre contenu -->
   </body>
 
</html>

La balise `<html>`

Là, on entre dans le vif du sujet, les balises.

Un document HTML est entièrement compris dans une balise html. Même si le navigateur s'y attend, vous êtes poli et vous lui dites que vous commencez votre document HTML, puis que vous le terminez. Ainsi la balise <html> sera toujours la toute première après le doctype, et la balise </html> la toute dernière.

À l'intérieur on trouve deux parties principales : un en-tête et un corps, placé respectivement dans les balises head et body. L'en-tête est constitué de déclarations générales concernant la page HTML, destinées au navigateur, aux moteurs de recherche etc. Le corps contient le document lui-même : ce qui sera affiché par le navigateur dans la fenêtre de rendu. Cette partie ne contient aucun élément obligatoire.

La balise `<head>`

La balise <head> délimite l'en-tête de la page dont on vient de parler. On y trouve des informations qui ne seront pas affichées directement dans la zone de rendu du navigateur. Par exemple le titre de la page, le lien vers la feuille de style, une description et des mots clés, etc... L'en-tête des documents HTML est l'objet du chapitre L'en-tête.

La balise `<title>`

L'en-tête contient un élément obligatoire : title qui indique le titre de la page. C'est le titre qui s'affiche ensuite en haut de la fenêtre du navigateur.

Essayez de mettre un titre pertinent et différent pour chaque page, qui permette d'identifier le site et la page en elle-même. Par exemple, "Sommaire" est un très mauvais choix. Quand votre page se retrouvera dans les favoris de quelqu'un, cette personne sera incapable de savoir de quelle page il s'agit rien qu'en regardant le nom. Préférez des choses du style "Accueil - www.ladressedemonsite.com".

La balise `<body>`

Tout le corps de notre document est dans la partie body. Elle comprend donc le texte, les liens, la référence des images et tout ce qu'un auteur peut vouloir mettre dans un document HTML.

Les commentaires

Les commentaires sont du texte écrit dans le code HTML qui n'est pas visible dans le rendu de la page. Les commentaires jouent habituellement le rôle de notes pour expliquer ce qui a été fait dans la page, ou bien tout simplement pour indiquer des modifications à faire ultérieurement. Ils sont biens sûr facultatifs, mais ils peuvent vous être utiles !

Un commentaire commence par les caractères .

Pratiquement n'importe quelle chaîne de caractères peut être placée à l'intérieur d'un commentaire : du texte, des balises, mais pas une suite de deux traits d'union adjacents (--).

Conclusion

Dans cette partie vous avez appris vos premières vraies balises. Elles sont importantes car elles doivent toujours être présentes (en dehors des balises de commentaires, qui sont uniquement là à titre de... commentaires).

<< Introduction / Bien_commencer_le_HTML >>