Dans cet article, nous revenons sur les bases du HTML pour vous accompagner dans vos premiers pas. Nous définissons les éléments, les attributs, et tous les autres termes importants que vous avez pu entendre, et nous vous expliquons comment les employer dans le langage. Nous vous montrons également la structure d'un élément HTML et d'une page HTML typique, et nous vous expliquons le fonctionnement d'autres fonctionnalités de base importantes du langage. Au fur et à mesure de l'article, vous pourrez vous amuser avec le HTML en mettant la main à la pâte.

Prérequis : Savoir utiliser les fonctionnalités de base d'un ordinateur, avoir installé les logiciels de base, connaître les bases de l'utilisation des fichiers.
Objectifs : Se familiariser avec le langage HTML et s'entraîner à l'utiliser en écrivant quelques éléments HTML.

Qu'est ce que le HTML ?

HTML (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage qui sert à dire à votre navigateur comment structurer les pages web que vous visitez. C'est le développeur web qui peut le rendre simple ou compliqué. Le HTML se compose d'une série d'éléments avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour le faire apparaître ou agir d'une certaine manière. Les balises fermantes permettent de transformer une petite partie de contenu en lien vers une autre page sur le Web, de mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :

Mon chat est très grincheux

Pour que cette phrase constitue un paragraphe, vous pouvez utiliser la balise paragraphe (<p>) pour en faire un élément paragraphe :

<p>Mon chat est très grincheux</p>

Anatomie d'un élément HTML

Regardons notre élément paragraphe d'un peu plus près :

Les principales parties de notre élément sont :

  1. La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence, ou bien où l'élément commence à prendre effet. En l'occurrence, elle indique l'endroit où commence le paragraphe .
  2. La balise fermante : c'est la même chose que la balise ouvrante, sauf qu'elle comprend un slash (/) avant le nom de l'élément. Elle indique la fin de l'élément, à savoir la fin du paragraphe, en l'occurrence. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut conduire à des résultats étranges.
  3. Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte.
  4. L'élément : la balise ouvrante, la balise fermante et le contenu pris ensemble constituent l'élément.

Apprentissage actif : créer votre premier élément HTML

Modifiez la ligne ci-dessous dans la zone de saisie en la mettant entre les balises <em> et </em> (<em> précède l'élément pour l'ouvrir, </em> suit l'élément pour le fermer). Le texte de votre ligne devrait apparaître en italique. Votre texte sera automatiquement mis à jour pour inclure vos modifications danss la zone de rendu.

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Afficher la solution pour voir la réponse.

Eléments imbriqués

L'imbrication consiste à mettre des éléments à l'intérieur d'autres éléments. Si vous voulez dire que votre chat est TRÈS grincheux, vous pouvez mettre le mot « très » dans la balise <strong> pour le mettre en gras :

<p>Mon chat est <strong>très</strong> grincheux.</p>

Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément p en premier, puis l'élément fort, donc nous devons fermer l'élément strong d'abord, puis l'élément p. Ce qui suit est incorrect :

<p>Mon chat est <strong>très grincheux.</p></strong>

Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !

Éléments bloc ou en ligne

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc (block) et les éléments en ligne (inline).

  • Les éléments de niveau bloc forment un bloc visible sur une page. Ils apparaîtront sur une nouvelle ligne à partir du contenu qui les a précédés, et tout le contenu qui les suivra apparaîtra également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément inline, mais il peut être imbriqué dans un autre élément de niveau bloc.
    • Les éléments en ligne sont ceux qui sont contenus dans des éléments de niveau bloc. Ils entourent seulement des petites parties du contenu du document, pas des paragraphes entiers ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) <a> ou des éléments d'accentuation tels que <em> ou <strong>.

Prenez l'exemple suivant :

<em>premier</em><em>deuxième</em><em>troisième</em>

<p>quatrième</p><p>cinquième</p><p>sixième</p>

<em> est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, <p> est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au style CSS par défaut du navigateur qui s'applique aux paragraphes).

Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'élément. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « bloc » et « en ligne ». Nous nous en tiendrons donc à cela tout au long de ce sujet.

Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.

Éléments vides
 

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont inclus. Par exemple, l'élément <img> insère une image dans une page à l'endroit où il est inclus :

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Cela affichera l'élément suivant sur votre page :

Attributs

Les éléments peuvent aussi avoir des attributs, qui comme suit:

<p class="editor-note">My cat is very grumpy</p>

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

Pour créer un attribut, il faut :

  1. insérer une espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;
  2. donner un nom à l'attribut, puis ajouter un signe égal ;
  3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.

Apprentissage actif : ajouter des attributs à un élément

Un autre exemple d'un élément est <a>. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

  • href : cet attribut spécifie l'adresse web à laquelle vers vous souhaitez que le lien pointe, c'est à dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, href="https://www.mozilla.org/".
  • title : l'attribut title apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, title="Page d'Accueil Mozilla", qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien.

Modifiez la ligne ci-dessous dans la zone de saisie pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut href, puis l'attribut title. Vous pourrez voir la mise à jour de vos modifications en direct dans la zone de rendu. Vous devriez voir un lien qui, lorsque vous le survolez avec votre curseur, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, vous accédez à l'adresse web dans l'élément href. N'oubliez pas d'inclure une espace entre le nom de l'élément et chacun des attributs.

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Afficher la solution pour voir la réponse.

Les attributs booléens

Vous verrez parfois des attributs écrits sans valeurs ; cela ne pose aucun problème. Ils sont appelés attributs booléens, et ils ne peuvent avoir qu'une seule valeur, qui est généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut disabled, que vous pouvez affecter aux éléments input (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.

<input type="text" disabled="disabled">

Pour aller plus vite, il est parfaitement possible d'écrire ceci comme suit (nous avons également inclus un élément input non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :

<input type="text" disabled>

<input type="text">

Ces deux exemples vous donneront le résultat suivant :

Omettre des guillemets autour des valeurs d'attribut

Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut href, comme ceci :

<a href=https://www.mozilla.org/>favourite website</a>

Cependant, dès que nous ajouterons l'attribut title, cela deviendra faux :

<a href=https://www.mozilla.org/ title=Page Accueil Mozilla >mon site web favorite</a>

À ce niveau, le navigateur interprètera mal votre balise car il considèrera que l'attribut title est en fait trois attributs : un attribut de titre avec la valeur « Page », et deux attributs booléens, « Accueil » et « Mozilla ». Ce n'est évidemment pas ce qui était prévu, et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte du titre donne.

Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

Guillemets simples ou doubles ?

Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir ceux que vous préférez. Les deux lignes suivantes sont équivalentes :

<a href="http://www.exemple.com">Le lien vers une page exemple.</a>

<a href='http://www.example.com'>Le lien vers une page exemple</a>

Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas exact :

<a href="http://www.exemple.com'>Le lien vers une page exemple.</a>

Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :

<a href="http://www.exemple.com" title="N'est ce pas drole?">Le lien vers une page exemple.</a>

Si vous souhaitez imbriquer le même type de guillemets, vous devrez utiliser une entité HTML pour représenter ce caractère spécial.

Anatomie d'un document HTML

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>Voici ma page web</p>
  </body>
</html>

Ici, nous avons :

  1. <!DOCTYPE html>: Le doctype. quand HTML était jeune (vers 1991/2), les doctypes  étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considéré comme un bon HTML, ce qui pourrait signifier la vérification automatique des erreurs et d'autres choses utiles. Ils avaient l'habitude de ressembler à ceci: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont vraiment juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui compte comme un doctype valide; C'est tout ce que vous avez vraiment besoin de savoir.
  2. <html></html>: L'élément <html>. cet élément est le contenant de tous le code de la page, et est parfois connu comme l'élément racine.
  3. <head></head>: L'élément <head>. Cet élément agit comme un conteneur pour toutes les choses que vous souhaitez inclure sur la page HTML qui n'est pas le contenu que vous affichez aux visiteurs de votre page. Cela inclut des choses comme des mots clés et une description de page que vous souhaitez voir apparaître dans les résultats de recherche, le style CSS, les déclarations de jeu de caractères, et plus encore. Vous en apprendrez plus à ce sujet dans l'article suivant de la série.
  4. <meta charset="utf-8">: Cet élément définit le jeu de caractères que votre document doit utiliser pour utf-8, qui inclut la plupart des caractères de toutes les langues humaines connues. Essentiellement, il peut maintenant gérer tout contenu textuel que vous pourriez mettre dessus. Il n'y a aucune raison de ne pas définir cela, et il peut aider à éviter certains problèmes plus tard. 
  5. <title></title>: Cet élément définit le titre de votre page, qui est le titre qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. 
  6. <body></body>: L'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.

Apprentissage actif: Ajout de certaines fonctionnalités à un document HTML

Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez:

  1. Copiez l'exemple de page HTML ci-dessus.
  2. Créez un nouveau fichier dans votre éditeur de texte.
  3. Collez le code dans le nouveau fichier texte.
  4. Enregistrez le fichier sous index.html.

Note: Vous pouvez également trouver ce modèle HTML sur  MDN Learning Area Github repo.

Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:

A simple HTML page that says This is my pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le faites en suivant les étapes suivantes:

  • Juste après la balise d'ouverture  du <body>, ajoutez un titre principal pour le document. Cela devrait être entre la balise d'ouverture <h1> et la balise de fermeture </ h1>.
  • Modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse.
  • Mettez les mots important en gras en les mettant entre une balise d'ouverture <strong> et une balise de fermeture </ strong>
  • Ajoutez un lien à votre paragraphe, comme expliqué plus haut dans cet article.
  • Ajoutez une image dans votre document, en dessous du paragrahe, comme expliqué plus haut dans cet article. Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web).

Si vous faites une erreur, vous pouvez toujours reinitialiser en utilisant le bouton Reinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Afficher la solution pour voir la réponse.

Espace vide en HTML

Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code - ce n'est pas nécessaire du tout; Les deux extraits de code suivants sont équivalents:

<p>Les chiens sont idiots.</p>

<p>Les chiens        sont 
           idiots.</p>

Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.

Références d'entités: inclure les caractères spéciaux en HTML

En HTML, les caractères <, >,",' et & sont des caractères spéciaux. Ils sont des parties de la syntaxe HTML elle-même, alors comment incluez-vous un de ces caractères dans votre texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<) et ne pas l'interpréter comme code comme les navigateurs devraient le faire?

Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).

Le caractère Réference équivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

Dans l'exemple ci-dessous, vous pouvez voir deux paragraphes, qui parlent de technologies Web:

<p>En HTML, Vous définissez un paragraphe en utilisant l'élément <p>.</p>

<p>En HTML, ous définissez un paragraphe en utilisant l'élément &lt;p&gt;.</p>

Dans la zone de rendu de l'editeur ci-déssous, vous pouvez voir que le prémier paragraphe n'est pas correctement affiché, parce que le navigateur pense que le second <p> est le début d'un nouveau paragraphe ! Le deuxième paragraphe lui est bien affiché, parce que nous avons remplacé les  signes inférieur(<)  et supérieur(>) par les références de leurs caractères.

Note: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia: List of XML and HTML character entity references.

Les commentaires en HTML

En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code — Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur et leur but est de vous permettre d'inclure des commentaires dans le code. Le code fonctionne, ce que font les différentes parties du code, etc. Cela peut s'avérer très utile si vous revenez à une base de code que vous n'avez pas travaillé pendant 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donner votre code à quelqu'un d'autre pour travailler.

Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <!-- et-->, par exemple:

<p>Je ne suis pas dans un commentaire</p>

<!-- <p>Je suis dans un commmentaire!</p> -->

Comme vous pouvez le voir ci-déssous, le prémier paragraphe  apparait dans le rendu de l'éditeur en ligne, mais le second n'apparait pas.

Résumé

Vous avez atteint la fin de l'article — espérons que vous avez apprécié votre visite sur les basiques du HTML. À ce stade, vous devez comprendre ce quoi cet langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et des attributs. C'est un endroit parfait pour être en ce moment, comme dans les articles suivants du module, nous allons entrer plus en détail dans certaines des choses que vous avez déjà vu, et d'introduire de nouvelles fonctionnalités du langage. Restez à l'écoute!

Note: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage que vous utilisez pour le style de vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page.) HTML et CSS vont très bien ensemble, comme vous allez bientôt découvrir.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Lizie, KhalilSnaake
 Dernière mise à jour par : Lizie,