Mes premiers pas en HTML

Bienvenue les cadettes et les cadets ! Ça y est on commence enfin le code avec le HTML !

Live server

Avant d'écrire du code, je vous conseille d'installer un plugin pour VSCode : Live server.

Ce plugin vous permettra d'avoir un "live reload" ce qui veut dire que dès que vous enregistrerez un fichier, automatiquement le serveur mettra à jour la page web qui correspond. Pour lancer ce dernier, il vous suffit de cliquer sur "Go Live" en bas à droite de votre IDE.

Live Server va alors vous ouvrir un nouvel onglet dans votre navigateur. Si ce n'est pas le cas vous pouvez vous rendre sur http://127.0.0.1:5500.

Généralités HTML

index.html

Pour commencer, il faut créer un premier fichier : index.html. Le nom de ce fichier doit obligatoirement être "index". Tant que l'on n'a pas de routeur dans notre site ou application web, il est nécessaire d'avoir, à la racine de notre projet, ce fichier avec ce nom qui servira alors de point d'entrée à notre projet.

Langage de sens

Le HTML est un langage de "sens" ! C'est la notion la plus importante à retenir de tout le cour ! Contrairement à des langages plus "classiques" qui se basent sur de l'algorithmie pour arriver à un résultat en passant par tout un processus logique, le HTML, quant à lui, est là pour représenter quelque chose et lui donner du sens. Il indiquera qu'ici, c'est un titre principal ; ça, c'est le pied de page ; ça, c'est un lien ; ici, on insère une image... Chaque représentation a une balise qui lui est associée. Mais alors que sont ces balises ?

La balise HTML

Un balise s'écrit sous la forme :

<balise attribut="valeur_attribut">Valeur_interne</balise>

Nom de la balise

À la place de "balise" on inscrit le nom de la balise qu'on souhaite utiliser. Une image sera représentée par...

<img src="url" alt="text"/>

...un champ de formulaire pour écrire du texte...

<input type="text" id="username" name="username" required/>

...un paragraphe par...

<p>Texte dans mon paragraphe</p>

...un titre principal par...

<h1>Mon super titre</h1>

La valeur interne

La valeur interne est ce qui sera affiché à l'écran. Les balises et les attributs internes sont interprétés par le navigateur pour donner du sens à la valeur interne mais n'apparaîtront pas à l'écran.

Dans les quatre exemples ci-dessus, on voit tout de suite qu'on peut différencier deux types de balises :

• les doubles: celles qui ont une valeur interne comme <p> ou <h1>. Elles se composent d'une paire de balises <p> qui ouvre le paragraphe et </p> qui le ferme. Attention à l'ordre de fermeture des balises ! Les dernières ouvertes doivent être les premières fermées ;
• les simples, orphelines, vides ou auto-fermantes : comme <img/> ou <input/>. Elles n'ont pas de valeur interne à afficher.

Les attributs et les valeurs d'attribut

Les attributs permettent d'apporter un complément d'information à la balise. Par exemple, la balise <img> a un attribut obligatoire src qui est l'URL source de l'image, le chemin pour trouver la ressource, et un attribut TRÈS fortement conseillé alt qui sera un texte alternatif si l'image ne s'affiche pas (problème de chargement, ressource qui a changé d'URL...). Cet attribut sert aussi aux personnes malvoyantes pour qui elle servira de description de l'image afin de leur permettre de se l'imaginer (raison pour laquelle elle est indispensable).

Les attributs sont très souvent associés à une valeur. Parfois, il est facultatif, comme pour l'attribut required, associé aux champs de texte dans les formulaires, qui peut ne pas avoir de "=" et ni de valeur associée.

Il existe deux attributs génériques qui sont très utilisés :

id/class

id est l'identifiant d'une balise HTML, class est une sorte de groupe où l'on peut placer la balise.

Ils sont utilisés pour sélectionner une ou des balises pour les utiliser dans le CSS et/ou dans le Javascript. Ils ont quelques différences :

• id : un élément ne peut avoir qu'un id et un id doit être unique sur une même page (deux éléments ne peuvent avoir le même identifiant) ;
• class : un élément peut avoir autant de class que vous souhaitez, une class peut être utilisée autant de fois que vous souhaitez.

Type de balises

Inline

Ce sont des balises qui s'insèrent dans une autre. Elles vont permettre de signifier un contenu au fil de l'eau d'un autre :

<p>Pour voir le contenu de cet article <a href="url">cliquez ici</a>.</p>

Résultat : Pour voir le contenu de cet article cliquez ici.

On voit qu'il n'y a pas de rupture au sein du paragraphe, le lien est inséré à l'intérieur.

• Éléments en-ligne

Block

Ce sont des balises qui vont casser la continuité avec la balise précédente, il y aura donc un retour à la ligne :

<div>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
</div>

La balise div est une balise générique pour indiquer une division = un ensemble logique de la page. Les deux paragraphes entrainent des retours à la ligne entre les deux. Résultats :
Paragraphe 1
Paragraphe 2

De plus, ces balises vont prendre toute la largeur qu'elles peuvent, contrairement aux balises de type inline qui, elles, s'adapteront à la largeur du contenu.

• Éléments de bloc

Imbrication des balises

Attention à toujours fermer les balises HTML dans l'ordre ! Si vous insérez une balise dans une autre, celle qui se trouve à l'intérieur doit toujours être fermée avant cette qui englobe ! Exemple de code valide :

<section>
    <p></p>
</section>

Exemple de code non valide :

<section>
    <p>
</section>
</p>

Dans le second exemple, les balises sont à cheval ! La balise <p> doit être fermée au sein de <section> comme dans le premier exemple.

Pour aller plus loin sur les balises

• Les balises HTML et leur rôle [fr]
• HTML Introduction [en]
• HTML Elements [en]

La page HTML

Emmet

Emmet est un plugin est par défaut dans VSCode. Il permet d'écriture bien plus vite le HTML et le CSS, avec un auto-complétion très puissante. En HTML, pour bien l'utiliser, le mieux est d'écrire le nom des balises sans les chevrons. Puis, quand on appuie sur entrée, il vous mettra directement la balise d'ouverture et la balise de fermeture.

Exemple, si vous êtes sur un fichier en ".html" vierge et que vous mettez juste "html:5" quand vous appuyez sur entrée, il vous proposera une structure similaire à celle proposée en-dessous.

La structure

La structure minimale d'une page HTML ressemble à ça :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8"/>
  <title>Titre de la page</title>
  <link rel="icon" href="/favicon.ico"/>
</head>
<body>
  <!-- contenu de la page -->
</body>
</html>

Ledoctype

Cette balise un peu spéciale est la seule dans son genre. Elle se met tout en haut des fichiers HTML pour indiquer au navigateur que le texte en-dessous sera du HTML.

"Mais pourquoi indiquer que le code utilisé est du HTML étant donné qu'on est dans un fichier *.html ?" me direz vous ! 🤔

C'est parce que le HTML n'est pas le seul langage de balise qui existe. Il a un cousin, qui est encore très utilisé : le XML. Ce dernier sera plus utilisé pour transmettre des données entre deux serveurs avec un formatage personnalisé, là où le HTML est utilisé pour qu'une page puisse être affichée par un navigateur.

La balise <html>

C'est la balise qui englobe tout ! Seul le Doctype doit se trouver à l'extérieur, tout le reste doit impérativement se trouver à l'intérieur. Elle servira de délimitation.

Pour l'accessibilité et le SEO, dans la balise HTML vous devez indiquer l'attribut "lang" et mettre la langue principale de votre page. Côté accessibilité, cet attribut permettra aux lecteurs d'écran de savoir quelle voix choisir pour lire votre page. Côté SEO, il permettra aux robots des moteurs de recherche  de savoir dans quel langue vous classifier.

La balise <head>

Elle permet de donner des informations contextuelles sur la page :

• le titre = texte qui se trouve dans l'onglet du navigateur [obligatoire] ;
• l'encodage = la balise <meta charset="UTF-8">, permet de définir l'encodage utilisé pour votre code. Pour écrire des textes avec des caractères accentués, il est nécessaire d'utiliser l'UTF-8 qui est l'encodage le plus performant englobant ces caractères [obligatoire] ;
• les informations de référencement : thème de la page, auteur, texte quand on partage dans les réseaux sociaux... ;
• les fichiers liés : CSS, Javascript...
• ...

Les informations contenues dans cette balise ne seront pas directement affichées dans la page. Elles apportent un contexte.

Les balises de type <meta> feront l'objet d'un cours complet lié au référencement.

La balise <body>

TOUT le contenu de votre page doit se trouver dans cette balise.

Pour aller plus loin sur le HTML

• Validateur HTML du W3C [en]