Les bases du HTML 5

I. INTRODUCTION

HTML – Définition

Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l’écriture d’un document avec des balises de formatage. Les balises permettent d’indiquer la façon dont doit être présenté le document et les liens qu’il établit avec d’autres documents.

Langage HTML

Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP, permettant d’accèder via le réseau à des documents repérés par une adresse unique, appelée URL.

Rappel des principes du Web

Le web est composé de pages web stockées sur des serveurs web, c’est-à-dire des machines connectées à Internet en permanence et chargées de fournir les pages web demandées. Chacune des pages web, et plus généralement toute ressource en ligne (image, vidéo, musique, animation, etc.), est repérée par une adresse unique appelée URL.

L’élément clé pour la navigation au sein des pages web est le navigateur (en anglais browser, parfois également appelé fureteur, fouineur, feuilleteur ou butineur au Québec), c’est-à-dire le logiciel client capable d’interroger les serveurs web, d’exploiter leurs résultats et de mettre en page les informations grâce aux instructions contenues dans la page HTML.

Parmi les principaux navigateurs utilisés sur Internet, citons notamment les suivants :

  • Mozilla Firefox
  • Microsoft Internet Explorer
  • Google Chrome
  • Apple Safari

II. LES BASES DE HTML5

1. Les balises et leurs attributs

Les pages HTML sont remplies de ce qu’on appelle des balises. Celles-ci sont invisibles à l’écran pour vos visiteurs, mais elles permettent à l’ordinateur de comprendre ce qu’il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci : <balise>

À quoi est-ce qu’elles servent ? Elles indiquent la nature du texte qu’elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.

On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en paires

Elles s’ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :

<titre>Ceci est un titre</titre>

On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signifie pour l’ordinateur que tout ce qui n’est pas entre ces deux balises… n’est pas un titre.

Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un titre

Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n’est pas nécessaire de délimiter le début et la fin de l’image, on veut juste dire à l’ordinateur « Insère une image ici ».

<image />

Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L’attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :

<balise attribut="valeur">

À quoi cela sert-il ? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l’image à afficher :

<image nom="photo.jpg" />

Le navigateur comprend alors qu’il doit afficher l’image contenue dans le fichier photo.jpg.
Dans le cas d’une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante.

Par exemple, ce code indique que la citation est de Neil Armstrong et qu’elle date du 21 Juillet 1969 :

<citation auteur="Neil Armstrong" date="21/07/1969">
 C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité. </citation>

/!\ Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais, nous allons les découvrir dans la suite de ce cours.

2. Structure de base d’une page HTML5

Ce code correspond à la base d’une page web en HTML5 :

<!DOCTYPE html> <html>
<head>
 <meta charset="utf-8" />
<title>Titre</title> </head>
<body>
</body> </html>

Les retrait ne sont pas obligatoire et cela n’a aucun impact sur l’affichage de la page, mais cela rend le code source plus lisible. On appelle cela l’indentation. Dans votre éditeur, il suffit d’appuyer sur la touche Tab pour avoir le même résultat.

Vous noterez que les balises s’ouvrent et se ferment dans un ordre précis.
Par exemple, la balise <html> est la première que l’on ouvre et c’est aussi la dernière que l’on ferme (tout à la fin du code, avec </html>).
Les balises doivent être fermées dans le sens inverse de leur ouverture.
Un exemple :
•<html><body></body></html> : correct. Une balise qui est ouverte à l’intérieur

d’une autre doit aussi être fermée à l’intérieur.
• <html><body></html></body> : incorrect, les balises s’entremêlent.

Le doctype

<!DOCTYPE html>

La toute première ligne s’appelle le doctype. Elle est indispensable car c’est elle qui indique qu’il s’agit bien d’une page web HTML.
Ce n’est pas vraiment une balise comme les autres (elle commence par un point d’exclamation), vous pouvez considérer que c’est un peu l’exception qui confirme la règle.