Le langage HTML

Principes de base

Toute page web est en fait un document texte constitué de code informatique écrit en langage HTML (HyperText Markup Language. Pour vous en convaincre, ouvrez une page d'un site quelconque sur votre navigateur et demandez Menu Affichage > Code source de la page (Firefox) ou Menu Présentation > Code Source (Safari). Il apparaît un baratin peu appétissant à lire. Nous allons essayer d'en décoder quelques principes.

Le langage HTML est basé sur l'usage de balises (sortes de commandes informatiques) encadrant du contenu. Le langage HTML possède donc une syntaxe et permet de structurer du contenu (textes, images, etc.) de manière sémantique.

Un paragraphe sera noté par exemple :

<p> ceci est un paragraphe </p>

Le texte "ceci est un paragraphe" est le contenu. Il est encadré (on dira "balisé") par la balise p qui signifie "paragraphe". À part quelques exceptions, les balises s'inscrivent donc en deux parties dans le code, une partie ouvrante et une partie fermante. Elles s'écrivent entre chevrons < et >. La partie fermante est repérée par le fait qu'elle est précédée du signe /.

Seules quelques balises ne suivent pas cette logique. C'est le cas par exemple de la balise br, qui est dite balise vide et qui sert à un saut de ligne, sans changement de paragraphe (br est l'abréviation de breack). Cett balise s'écrit ainsi dans le code : <br />. En quelque sorte elle est à la fois ouvrante et fermante puisqu'elle n'encadre aucun contenu. Vous noterez donc la présence du slash / après le nom de la balise et d'un espace. C'est la cas également de la balise img, servant à insérer une image. Voyons le code ci-dessous représentant l'image située un peu plus bas dans cette page :

<img src="html/html_vide.png" width="797" height="276" />

Cette balise ne contient qu'une partie, à la fois ouvrante et fermante, comme en témoignent l'espace et le slash / à la fin. Elle n'encadre aucun contenu. Pourtant elle fait référence à une image par un attribut situé à l'intérieur de la balise, l'attribut src, abréviation de source, indiquant le chemin de l'image relativement à la page. Ici le fichier image se nomme" html_vide.png" et se trouve dans le dossier "html".

Un attribut est une caractéristique d'une balise, une précision, qui possède une valeur. Le nom de l'attribut est suivi du signe = et sa valeur est entre guillemets. Dans la balise img ci-dessus, il y a deux autres attributs, sa largeur width et sa hauteur height, exprimés en pixels.

Il existe plusieurs versions du HTML. La plus utilisée actuellement est le XHTML 1.0 Il tend à être remplacé par le HTML 5. Ce dernier n'est pas encore très répandu, ni bien interprété par tous les navigateurs, surtout s'ils sont anciens. Cependant, tous les navigateurs récents interprètent corrctement le HTML5. Associé aux CSS3, il est en passe de devenir le nouveau standard du web, notamment dans la concurrence avec Flash.
Nous privilégierons dans ce cours, l'utilisation du HTML5.

 

Structure d'une page

Lorsque l'on crée un page web, elle apparaît vide dans DreamWeaver. Pourtant, si vous affichez la fenêtre du document en mode "Fractionner", vous verrez qu'elle n'est pas vraiment vide.

Toute page comporte a minima trois balises :

1. la balise html englobe tout le contenu de la page et indique dans quel langage est écrite la page. Elle se termine tout à la fin du code et il n'y a rien après.

2. la balise head qui représente l'en-tête (head signifie en-tête) de la page et englobe ce qui ne se voit pas sur une page. C'est le cas du titre de la page (balise title), mais aussi des mots-clés, descriptions, encodage du texte (balise meta), etc.

3. la balise body , le corps de la page, qui englobe tout ce qui se voit sur la page, donc l'ensemble du contenu visible.

Ces trois balises, obligatoires, sont précédées du DOCTYPE qui indique au navigateur quelle version de HTML vous utilisez et les références du comité de contrôle du Web, le W3C. Ne vous en souciez pas, Dreamweaver le fait très bien pour vous.

 

Comparaison XHTML et HTML5

Dans les deux copies d'écran ci-dessous, la première montre le code d'une page vide en XHTML 1.0 et la seconde en HTML5.

La structure est la même (Doctype, balises html, head et body). Mais en HTML5, l'ensemble est plus simple et plus léger. Le Doctype est trèssimple. Les balises html, head et body se présentent de la même manière, mais la balise html ne comporte plus d'attribut.

En fait, la HTML5 n'exige plus que les balises soient fermées, mais il est nécessaire de continuer à le faire, le temps que les navigateurs interprètent tous correctement ce code, ce qui n'arivera pas avant plusieurs années. De fait, laissez faire DreamWeaver, qui code correctement tout nouveau document.

 

D'autres balises fondamentales

Dans une page web, quelques balises reviennent couramment. Elles concernent ce qui a été évoqué dans l'article "faire une page".

Il s'agit de la constitution de la hiérarchie, entre titres et paragraphes :
balises p, h1, h2, h3, h4, h5, h6

la constitution de listes :
balises ul, ol, li

les images :
balise img

les liens :
balises a, a:link, a:visited, a:hover, a:active

Nous verrons plus loin, d'autres balises liées à des contenants pour la mise en page ou autres :
balises div, span, table

Il existe bien entendu de nombreuses autres balises, que nous découvrirons au fur et à mesure, ou pas.

En HTML5, de nouvelles balises ont fait leur apparition, pour structurer une page de manière plus sémantique ou pour insérer du contenu multimédia, entre autres :
balises header, footer, nav, section, article, aside
balises figure, audio, video, canvas

Le sélecteur de balises

Dans la fenêtre Document, en bas à gauche se trouve le sélecteur de balises. Sélectionnez un élément sur une page ou cliquez quelque part. Le sélecteur de balise montre l'imbrication des balises nécessaire à atteindre la sélection.

Il est alors très simple de cliquer sur un niveau pour le sélectionner. C'est très utile lors de la création des règles de CSS.

Revenir sur un exemple

Voici la page que vous avez vue précédemment et le code HTML de cette page. Vous y retrouverez l'essentiel des balises que vous connaissez. Vous noterez que les liens <a> présents sur les items de liste renvoient à des liens absolus, notés #. Cela signifie qu'ils sont définis en tant que lien, mais pas ciblés, c'est-à-dire que leur destination n'est pas précisée.

Le code présenté ci-dessous est donné en version XHTML, mais la seule différence en HTML5 se trouverait au niveau du Doctype et de l'attribut de la balise html. La différence entre les deux n'est donc pas significative, compte tenu de la struture de notre exemple. Nous verrons plus tard, des différences plus importantes.

Aller plus loin

Voir ces pages sur le code HTML :

http://a-pellegrini.developpez.com/tutoriels/xhtml/#L5.3.6

http://www.siteduzero.com/tutoriel-3-13484-votre-premiere-page-xhtml.html

http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.html