Introduction à HTML

Lorsque vous regardez une page web dans un navigateur internet, vous voyez, au niveau le plus basique, des mots. Ces mots ont parfois des caractéristiques formelles différentes, à savoir les caractères, leurs tailles et leurs couleurs. La plupart du temps, une page web affiche aussi des images voire des vidéos. Certaines fois, il y a un formulaire où vous pouvez saisir (où rechercher) une information, ou modifier l'affichage selon vos désirs. Souvent, une page contient des données qui varient alors que le reste de la page demeure inchangé.

Plusieurs technologies (telles que CSS, JavaScript, Flash, AJAX, JSON) peuvent être utilisées pour définir les éléments d'une page web. Cependant, dans sa forme minimale, une page web est construite en HTML (HyperText Markup Language). Sans HTML, il n'y a pas de page web. HTML est la structure de base qui permet de faire tenir tout l'ensemble: une norme internationale dont les spécifications sont établies par le  World Wide Web Consortium (W3C) et le Web Hypertext Application Technology Working Group (WHATWG). WHATWG estime que le HTML est "une norme vivante" qui est sans cesse en évolution, alors que le W3C travaille à la fois sur des aspects ponctuels du HTML, le plus récent étant le  HTML5, et sur les évolutions générales du HTML (HTML 5.1).

L'HyperText Markup Language (HTML) (littéralement Langage HyperTexte à balises) est un langage à balises utilisé pour la création de contenu et la structuration sémantique des pages web. Une page web est comprise de nombreux éléments HTML, chacun de ces éléments a un sens particulier dans le contexte de la page. Certains éléments se suffisent à eux-même, tandis que d'autres doivent être imbriqués pour créer une structure de plus en plus complexe afin d'accueillir votre contenu. Les navigateurs Web interprètent le HTML pour construire le contenu de la page, et ils interprètent le code HTML en relation avec le code CSS pour l'apparence du contenu.

Cet article sert d'introduction à HTML, et vous aidera à apprendre comment il fonctionne et comment structurer une page web basique. Si vous vous êtes déjà demandé comment faire pour que lorsqu'on clique sur une partie d'une page web on arrive sur une autre, ou comment faire des listes à puces, cet article est l'endroit pour commencer votre apprentissage d'HTML.

Les éléments - la base d'une page web

La brique d'information de base en HTML est communiqué par les éléments HTML. Les éléments répondent à la question "De quelle information s'agit-il ?" et définit le sens sémantique de leur contenu. Certains éléments ont un sens très précis, comme "ceci est une image", "ceci est un titre", ou "ceci est une liste ordonnée", tandis que d'autres sont beaucoup moins précis comme "ceci est une partie de la page" ou "ceci est un morceau de texte", et enfin certains ont juste une utilité technique. Mais d'une façon ou d'une autre, ils apportent tous une valeur sémantique.

La plupart des éléments peuvent contenir d'autres éléments, formant une hiérarchie de structure, un arbre, appelé le DOM, le Document Object Model (littéralement le Modèle d'objet document). Il y a un peu plus de 100 éléments définis en HTML.

Les balises

HTML utilise du simple texte comme fondation et porte une attention particulière à tout ce qui commence par le signe inférieur à (<) et ce qui fini par le signe supérieur à (>). Ce formatage particulier est appelé une balise HTML (ou parfois aussi un tag). Voici un exemple :

<p>Ce texte est dans un paragraphe.</p>

Dans cet exemple, il y a une balise ouvrante et une balise fermante. Les balises fermantes portent le même nom que les balises ouvrantes, mais contiennent aussi un slash (/) immédiatement après le signe "inférieur à". La plupart des éléments HTML sont écrits avec un couple de balises ouvrantes et fermantes. Les balises ouvrantes et fermantes doivent toujours être correctement imbriquées, c'est à dire que les balises fermantes doivent êtres écrites dans l'ordre inverse des balises d'ouverture. Une bonne imbrication des balises est une des règles à respecter afin d'avoir un code valide.

Voici un exemple de code valide :

<em>Ceci est <strong>très</strong> important</em>.

Voici un exemple de code non-valide :

Non-valide: <em>Ceci est <strong>très</em> important</strong>.

Avant l'arrivée des règles d'interprétation d'HTML5, les navigateurs n’interprétaient pas le code non-valide de la même façon et produisaient des résultats très différents quand ils étaient confrontés à un bout de code mal formaté. Les navigateurs étaient permissifs avec les créateurs de pages web, mais malheureusement pas tous de la même façon, amenant à des résultats quasiment imprévisibles. De nos jours, avec les dernières évolutions des navigateurs, comme Internet Explorer 10, Firefox 15, Opera 12, Chrome 21 ou Safari 6, et leur règles d'interprétation standard du code non-valide, le résultat produit le même arbre DOM.

Certains éléments n'ont cependant pas de contenu textuel ou ne peuvent contenir d'autres éléments. Il s'agit des éléments vides. Ils ne nécessitent pas de balise de fermeture. Voici un exemple :

<meta charset="utf-8">

Certains auteurs préfèrent ajouter un slash (/) à la fin de l'élément vide, ce qui est obligatoire en XHTML. En HTML, ce slash n'a aucune utilité technique et n'est qu'une préférence stylistique.

<meta charset="utf-8" />

Les attributs

Une balise ouvrante peut contenir des informations additionnelles, comme sur l'exemple précédent. Cette information est appelé un attribut. Les attributs consistent en deux parties :

1. Un nom d'attribut
2. Une valeur d'attribut

Certains attributs peuvent n'avoir qu'une valeur. Il s'agit des attributs booléens et ils peuvent n'être réduit qu'à leur nom d'attribut ou n'avoir aucune valeur d'attribut. Ainsi les 3 exemples suivant ont le même sens :

<input required="required">

<input required="">

<input required>

Les valeurs d'attribut consistant en un seul mot ou nombre, peuvent être écrits tel quel, mais dès qu'il y a deux ou plusieurs chaînes de caractères comme valeur, il doivent être écrits avec des guillemets ("). Les guillemets simples (') ou les guillemets doubles (") peuvent être utilisés. De nombreux auteurs de pages web préfèrent toujours utiliser des guillemets afin de rendre le code moins ambigu, plus facile à lire et éviter les erreurs. Le code suivant est une erreur :

<p class=foo bar> (Attention, ceci ne veut sûrement pas dire ce que vous pensez.)

Dans cet exemple la valeur est censée être "foo bar", mais puisqu'il n'y a pas de guillemets, elle est interprétée comme si elle avait été écrite :

<p class="foo" bar="">

Références de caractère nommée

Étant donné que les signes inférieur ou égal et supérieur ou égal ont un sens spécifique, on doit (habituellement) utiliser une référence de caractère nommée, souvent appelée entité, pour marquer ces signes en texte brut. Les entités peuvent être écrites avec des noms, des nombres décimaux ou des nombres hexadécimaux. Il y a quatre entités de base que chacun doit connaître :

• > correspond au signe supérieur à " > ".
• < correspond au signe inférieur à " < ".
• & correspond au signe esperluette " & ".
• " correspond au signe double guillemets ' " '.

Il y a beaucoup plus d'entités dans la dernière version du standard mais ces quatre là sont absolument fondamentales étant donné qu'elles représentes des caractères ayant un sens particulieur en HTML. D'autres permettent de représenter des caractères qui ne font pas partie de l'ensemble des caractères d'un document Web.

Doctype et commentaires

En plus des balises, du contenu textuel et des entités, un document doit toujours contenir un doctype à son début. Une page HTML doit commencer par :

<!DOCTYPE html>

Le doctype a une histoire longue et compliquée. Mais pour l'instant, vous avez besoin de retenir que le doctype dit au navigateur comment interpréter le code HTML et CSS. C'est à dire, lorsqu'il est présent, selon les standards et non comme s'il était une ancienne version d'Internet Explorer datant des années 90. (voir le mode quirks)

Pour aider à vous souvenir de ce que vous faisiez pendant que vous développiez, ou pour communiquer avec d'autres développeurs, votre code peut aussi contenir des commentaires. Les commentaires en HTML démarre avec le signe "inférieur à", suivi d'un point d'exclamation et deux signes moins (<!--). Il se termine par deux signes moins suivis d'un signe "supérieur à". (-->)

<!-- Ceci est un commentaire -->

Un document petit mais complet

Regroupons tout ceci en un tout petit exemple de document HTML. La structure du document et les éléments seront expliqués dans un article ultérieur. Allez-y, écrivez ce code dans un éditeur de texte, enregistrez-le avec le nom monpremierdoc.html et ouvrez-le dans un navigateur web. Faites bien attention à l'enregistrer avec l'encodage de caractères UTF-8. Ce document n'utilise aucun style de présentation, il sera donc un peu ennuyeux, mais ce n'est qu'un début !

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Un document minuscule</title>
</head>
<body>
  <h1>Titre principal de mon document</h1>
  <!-- Notez qu'il s'agit de "h" + "un", pas de "h" + la lettre "l" -->
  <p>Regarde maman, je suis en train de coder en <abbr title="Hyper Text Markup Language" lang="en">HTML</abbr> !</p>
</body>
</html>