Il est l'élément de base de tout site ou application web, et correspond à un standard, destiné à être lu et affiché de manière universelle par les navigateurs web. Techniquement, il consiste en un fichier texte, structuré à l'aide de balises. Le rôle de celles-ci est de donner du sens, pour un programme (notamment le navigateur), et dans une certaine mesure pour un lecteur humain, à l'organisation de l'information présentée dans le document.
Lorsque l'on parle de HTML (HyperText Markup Language), il s'agit du langage permettant la mise en place - et la compréhension par le navigateur - de ces balises structurantes dans le contenu du document. En lui-même, le langage reste limité en termes de possibilités de mise en page et d'interactivité ; pour cela il sera le plus souvent agrémenté de règles de stylisation (CSS) et le cas échéant de scripts (JavaScript) gérant l'évolution du document après affichage ou encore les réponses aux actions de l'utilisateur. C'est la combinaison de ces technologies qui permet, en partant de simples fichiers texte, d'obtenir des mises en page et interfaces plus ou moins complexes.
Pour qu'un fichier (texte) puisse être compris comme du HTML, il doit :
• Porter le suffixe ".html"
• Contenir la structure suivante :
<html>
<head></head>
<body> Contenu </body>
</html>
Ce sont les balises primordiales de tout document HTML, le premier niveau de son arborescence. La balise html représente le document lui-même, composé d'un en-tête (balise head) destiné à contenir des informations sur la structure du document (métadonnées), et d'un corps (balise body) dans lequel se placeront les contenus à afficher.
Pour rendre le document HTML pleinement valide, on pourra ajouter :
• En tout début de document, avant d'ouvrir la balise html, une déclaration DOCTYPE destinée à spécifier clairement au navigateur le type du document et donc quelles règles appliquer pour sa lecture. Dans notre cas, le type à préciser sera simplement "html".
• Dans l'en-tête, une balise meta spécifiant l'encodage (charset, ou jeu de caractères) utilisé pour le contenu textuel. Cela évitera un mauvais affichage des caractères spéciaux (accents, ponctuation spécifique, etc). L'encodage le plus universellement utilisé est "utf-8".
• Également dans l'en-tête, une balise title. Elle permettra de renseigner le titre global de la page (affiché dans la barre de titre du navigateur, dans les résultats des moteurs de recherche, jouant d'ailleurs un rôle dans le référencement naturel de la page par ces moteurs).
La structure minimale, une fois complétée :
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Titre de la page</title>
</head>
<body>
Contenu
</body>
</html>
Dans la majorité des cas (pour tous les éléments HTML capables d'accueillir du contenu), la balise se construira en deux parties. On parlera en fait, pour un élément, de ses balises ouvrante et fermante.
Exemple :
<p>Contenu englobé dans la balise</p>
Le nom de la balise (type de l'élément) doit se retrouver à l'identique dans l'ouverture et la fermeture, placé systématiquement entre deux chevrons ("<" et ">"). La balise fermante nécessitera un slash ou barre oblique ("/") avant le nom.
Les éléments HTML peuvent être imbriqués, et sont conçus pour fonctionner en arborescence.
<p>Contenu <i>en italique</i> dans un paragraphe</p>
Important : une balise doit toujours se refermer dans l'élément parent où elle a été ouverte. La structure suivante est incorrecte (et ne sera pas affichée correctement) :
<p> [ . . . ] <i> [ . . . ] </p> [ . . . ] </i> [ . . . ]
On constate un "croisement" de balises, cas impossible si l'on respecte un principe d'imbrication des éléments HTML.
Certains éléments ne sont pas destinés à recevoir du contenu mais à être "remplacés" à l'affichage de la page, comme par exemple les images (balise img) ou les retours à la ligne (balise br). Pour ces éléments, la balise à mettre en place sera unique, et dite "auto-fermante". La barre oblique se placera avant le chevron de fin.
Exemples : <br /> et <img />
C'est également le cas pour la plupart des éléments à placer en en-tête du document : <meta /> ou encore <link />.
Les éléments peuvent recevoir des attributs. Ceux-ci se déclarent dans la balise ouvrante, à la suite du type. Exemple avec un lien, pour lequel on renseigne via son attribut href l'url (adresse) à laquelle il doit mener lorsque cliqué :
<a href = "page.html" >Lien vers page.html</a>
Un élément peut cumuler plusieurs attributs. Dans l'exemple suivant, l'attribut target renvoie à la fenêtre-cible, dans laquelle le lien doit s'ouvrir.
<a href = "page.html" target = "_blank" >Lien vers page.html</a>
Ici la valeur "_blank" implique que mapage.html s'ouvrira dans une nouvelle fenêtre.
Certains éléments sont prévus pour fonctionner uniquement avec des attributs, comme par exemple les images, qui nécessitent le chemin d'accès vers le fichier à afficher :
<img src = "dossier-images/mon-image.jpg" />
C'est également le cas de toutes les balises auto-fermantes à placer en en-tête du document.
Structurer un document via HTML permet d'y intégrer des informations d'ordre visuel d'une part : une bonne partie des balises auront un impact direct sur la mise en page du texte lorsqu'affiché par un navigateur. Le vocabulaire visuel disponible par défaut est limité (pour la stylisation il faudra faire appel aux feuilles CSS), mais suffisant pour donner une articulation compréhensible au contenu.
D'autre part, les informations apportées par une arborescence HTML servent à donner du sens au contenu d'un point de vue universel : une machine ou un logiciel devront également comprendre quel segment correspond à un titre, un sous-titre, un paragraphe important, comment sont organisées les différentes sections du document, ou encore les différentes pages de l'ensemble dont celui-ci fait partie. C'est sur cette compréhension que reposent notamment le référencement naturel par les moteurs de recherche et l'accessibilité aux personnes mal- ou non-voyantes, nécessitant un logiciel de lecture.
Certains éléments HTML jouent un rôle autant visuellement que du point de vue sémantique, comme les titres hiérarchisés (h1, h2, h3, h4, h5, h6), la séparation en paragraphes (p) ou les listes (ul, ol pour la variante ordonnée) et leurs items (li).
Certains autres éléments apporteront un sens uniquement visuel, ils sont dits non-sémantiques. C'est le cas du bloc de division (div) ou du conteneur générique en ligne span (aucun comportement visuel par défaut pour ce dernier, il ne sera mis en évidence qu'une fois stylisé via CSS).
Une dernière catégorie d'éléments est à considérer comme purement sémantique (même si stylisable). Ces balises ont été ajoutées aux spécifications HTML plus récemment (depuis HTML5), et visent à apporter des informations précises sur le type de contenu qu'elles renferment. Par exemple nav pour indiquer une zone réservée à la navigation (menu, table des matières), header pour un en-tête (à ne pas confondre avec le head du document), ou encore main indiquant la présence du contenu principal de la page.