Introduction au HTML

Introduction au HTML

Qu’est-ce que le HTML ?

Le HTML est le langage de balisage standard utilisé pour créer et structurer le contenu sur le World Wide Web.

• HTML signifie HyperText Markup Language.
• Ce n’est pas un langage de programmation ; c’est un langage de balisage utilisé pour décrire la structure et la sémantique (signification) du contenu web.
• HTML utilise des balises pour définir des éléments comme les titres, les paragraphes, les images, les liens, et plus encore.
• Les navigateurs web interprètent les balises HTML pour afficher la présentation visuelle du contenu.

Exemple HTML de base

Voici un document HTML5 simple mais complet :

<!DOCTYPE html>
<html lang="en">  <!-- 'lang' spécifie la langue du document -->
<head>
  <meta charset="UTF-8"> <!-- Déclare l'encodage des caractères -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Configure la fenêtre d'affichage pour la réactivité -->
  <title>Page Title</title> <!-- Apparaît dans l'onglet du navigateur -->
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

Explication de l’exemple

• <!DOCTYPE html> : Déclare le type de document comme HTML5 (essentiel pour les navigateurs modernes).
• <html> : L’élément racine, enveloppant tout autre contenu.
• <head> : Contient des méta-informations sur le document (non affichées sur la page).
• <meta charset="UTF-8"> : Spécifie l’encodage des caractères, permettant un affichage correct des caractères de texte.
• <meta name="viewport" ...> : Configure la façon dont la page doit être affichée sur différents appareils, crucial pour le design réactif.
• <title> : Définit le titre affiché dans l’onglet ou la barre de titre de la fenêtre du navigateur.
• <body> : Contient le contenu réel visible par l’utilisateur (texte, images, liens, etc.).
• <h1> : Définit un titre de niveau supérieur.
• <p> : Définit un paragraphe.

Un navigateur web lit ce HTML, comprend les balises et affiche visuellement le titre et le paragraphe.

Balises HTML

Les balises HTML sont des noms d’éléments enfermés entre des chevrons (< et >).

`<tagname>content goes here...</tagname>`

• La plupart des balises HTML vont par paires : une balise d’ouverture (par exemple, <p>) et une balise de fermeture (par exemple, </p>).
• La balise de fermeture est identique à la balise d’ouverture mais inclut une barre oblique (/) avant le nom de la balise.
• Le contenu est placé entre les balises d’ouverture et de fermeture.
• Certaines balises, appelées éléments vides ou autoférmantes (comme <img>, <br>, <hr>, <input>), n’encadrent pas de contenu et ne nécessitent pas de balise de fermeture en HTML5. Elles peuvent être auto-fermées (<hr />) pour la compatibilité XHTML, mais la barre oblique est facultative en HTML5.

Navigateurs web

Les navigateurs web (tels que Chrome, Firefox, Safari, Edge) sont des applications logicielles qui récupèrent, traitent et affichent les pages web.

Le rôle principal du navigateur concernant le HTML est de :

• Lire le document HTML.
• Analyser les balises pour comprendre la structure et le contenu.
• Combiner la structure HTML avec le style CSS et le comportement JavaScript.
• Afficher la représentation visuelle finale à l’écran.

Les navigateurs n’affichent pas les balises HTML elles-mêmes ; ils utilisent les balises pour déterminer comment afficher le contenu.

Visualisation de la structure d’une page HTML

Imaginez une structure imbriquée :

+------------------------------------+
| <html>                             |
| +--------------------------------+ |
| | <head>                         | |
| |   (Métadonnées : titre, charset) | |
| +--------------------------------+ |
| +--------------------------------+ |
| | <body>                         | |
| |   <h1>Titre</h1>             | |
| |   <p>Paragraphe.</p>            | |
| |   (Zone de contenu visible)       | |
| +--------------------------------+ |
+------------------------------------+

Généralement, seul le contenu à l’intérieur de l’élément <body> est directement visible dans la fenêtre principale du navigateur.

La déclaration <!DOCTYPE>

La déclaration <!DOCTYPE html> est cruciale. Elle doit être la toute première chose dans votre document HTML.

Elle indique au navigateur de rendre la page en “mode standard”, garantissant qu’il interprète le HTML et le CSS conformément aux dernières normes web (HTML5). Sans elle, les navigateurs pourraient revenir au “mode quirks”, ce qui entraînerait un rendu incohérent.

Alors que les versions HTML plus anciennes (comme HTML 4.01 ou XHTML 1.0) avaient des déclarations DOCTYPE différentes et plus complexes, pour le développement web moderne, vous n’avez besoin d’utiliser que <!DOCTYPE html>.

Historique des versions HTML

Le HTML a considérablement évolué depuis sa création :

Version	Année
HTML	~1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014 (Standardisé)
Standard vivant HTML	En cours

HTML5 est la version majeure actuelle et le fondement du développement web moderne. Il est continuellement mis à jour en tant que « Standard vivant » par le WHATWG.