Inventé pour permettre de rédiger des documents web reliés les uns aux autres grâce aux liens hypertexte, le langage HTML est lui-même basé sur le langage SGML. HTML est donc ce que l'on nomme un langage de balisage (ou langage descriptif).
Après une évolution difficile, vient la version stable : HTML4.0 publiée par le W3C. Et puis, courant 2000, revirement de situation. Le langage HTML est abandonné pour le XHTML, extension du langage XML.
En 2007, alors qu'une deuxième version de XHTML est en cours (définitivement enterrée en 2009, mais la version XTML1.1 est restée -pour l'instant-), apparaît HTML5.
La vie des langages web n'est pas un long fleuve tranquille.
Le HTML pour quoi faire ?
Comme dit dans l'introduction, le langage HTML va permettre de rédiger un document web pour qu'il soit interprété par un navigateur. Comme pour tout langage, nous aurons besoin d'un éditeur de texte pour écrire du code HTML.
Le fonctionnement du HTML repose sur un système de balisage, autrement dit sur des balises renfermant des éléments. Pour exemple :
<html> est une balise et html un élement.
<p> est une balise réprésentant un paragraphe et p un élément.
💡 Il ne faut donc pas confondre balise et élément.
Justement, nous allons voir ces balises, éléments et autres attributs qui vont permettre de structurer un document HTML.
Structure d'un document HTML
Pour afficher une page HTML dans un navigateur, il faut renseigner certaines informations essentielles.
Le doctype :
C'est la première chose à déclarer. On indique ainsi au navigateur de quel type de document il s'agit et comment il doit analyser la syntaxe.
💡 Pensez bien à déclarer le point d'exclamation devant l'élément.
/*ancien doctype HTML4 - il en existe d'autres*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
/*nouveau doctype HTML5 beaucoup plus simple*/
<!doctype html>
Ci-dessous, le minimum requis pour un document HTML valide (pour savoir si votre document respecte les standards, rendez-vous sur le validateur W3C) :
<!doctype html>
<html>
<head>
</head>
<body>
<p>Voici une structure HTML valide. Finalement c'est assez simple, non ?</p>
</body>
</html>
On ne peut pas imbriquer, autrement dit placer des éléments à l'intérieur d'autres éléments de n'importe quelle manière. Il faut suivre certaines règles.
Par exemple, cette imbrication n'est pas valide, l'élément div n'étant pas autorisé en tant qu'enfant direct de l'élément ul :
<ul>
<li>
<div></div>
</li>
</ul>
En effet, il existe une hiérarchie des balises à respecter. De même que le chevauchement n'est pas permis, sauf cas exceptionnel. Un exemple d'erreur de chevauchement de balises ci-dessous :
<p>
début du paragraphe
<span>
/*on met du texte dans une nouvelle balise pour le styler par exemple*/
</p>
<p>
/*On commence un nouveau paragraphe*/
</span>
</p>
Nous avons refermé la balise <span> dans le second paragraphe. Or, il aurait fallu le faire dans le premier, produisant ainsi une erreur.
💡 Soyez vigilants dans l'ouverture et la fermeture des balises ainsi qu'à l'imbrication, ne serait-ce par souci de clarté. Si dans la plupart des cas, le navigateur est capable d'interpréter un code mal écrit, il peut parfois y avoir des résultats inattendus.
Les titres :
Les titres sont très importants dans le langage HTML puisqu'ils permettent de structurer et de hériarchiser du contenu dans un document. Ils sont au nombre de six. L'élément h1 étant par définition celui qui a le plus d'importance. Par défaut, le navigateur l'affichera en gros et en gras. Plus nous irons vers l'élément h6, plus la taille et l'épaisseur diminueront.
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Il est nécessaire, tant au niveau de l'accessibilité que de la structure, de ne pas sauter de niveau de titre. On commence par le titre générique avec l'élément h1, généralement placé dans l'élément header (entête) du document, puis h2, h3 et ainsi de suite.
Hiérarchie des titres et sections
Désormais, avec la révision de HTML5 (HTML5.1), il est possible d'imbriquer les éléments header et footer ainsi que les titres s'ils font partie d'une section (éléments section, article, aside ou nav), ce qui donne un exemple comme ceci :
Les commentaires se présentent sous forme de ligne et peuvent s'insérer partout dans le document :
<!-- Un commentaire monoligne en HTML -->
<!-- Un commentaire
multilignes en HTML -->
💡 Attention à la syntaxe. Pensez bien au point d'exclamation au début. Il n'y en a pas à la fin.
Invisibles de l'utilisateur, les commentaires servent surtout d'indication pour le développeur (et éventuellement à d'autres dans un projet participatif). Ils servent également (mais beaucoup moins aujourd'hui) à insérer du code pour les anciennes versions d'Internet Explorer (jusqu'à la version 9 incluse).
Ainsi, en inspectant le code HTML d'un site, ne vous sera t-il pas rare de voir ce type de commentaires :
<!--[if IE]> instruction pour les navigateurs Internet Explorer -->
💡 Sachant qu'il est possible à l'utilisateur de voir ces commentaires, faites attention aux informations contenues à l'intérieur.
Les hyperliens
Les hyperliens sont l'essence même d'un document HTML. Ils servent à relier les documents les uns aux autres via l'élément a et ses attributs. Il existe plusieurs types de liens.
Cette nouvelle mouture, qui n'est plus basée sur le langage SGML, définit deux syntaxes (HTML5 et XHTML5) et comprend une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme.
Simplifié par rapport au HTML4, ce nouveau langage est de plus en plus utilisé par les développeurs. Il est la norme actuelle à adopter pour réaliser un site web.
Les nouveautés :
Qui dit HTML5 dit nouvelles balises (ou éléments). En effet, on voit apparaître des balises telles que <header> pour désigner l'entête d'un site web ou <footer> pour le pied d'une page web, ceci afin de permettre une "standarisation" des sites sur le web.
Une nouvelle version HTML5.1 a vu le jour et apporte également son lot de nouveautés. Une deuxième révision (HTML5.2) est d'ores et déjà actée.
Parmi les nouvelles balises, on peut notamment distinguer :
<!DOCTYPE html> : permet de déclarer le document comme étant en HTML5.
<header> : cette balise indique l'entête du document.
<main> : cette balise indique la partie principale du document.
<nav> : cette balise indique le menu du document.
<section> : cette balise sert à définir les grandes parties du document.
<article> : cette balise permet de délimiter les différentes sous-parties du document.
<footer> : cette balise indique le pied de page (c'est la partie en bas) du document.
NB : plus permissif, le langage HTML5 permet d'omettre la fermeture des balises dans certains cas.