Phase 1 — Les fondamentaux HTML

#1 Introduction au HTML

balises, attributs, structure du document

Qu'est-ce que le HTML ?

HTML (HyperText Markup Language) est le langage standard pour créer des pages web. Il définit la structure et le contenu d'une page à l'aide de balises (aussi appelées éléments).

Chaque site web que vous visitez repose sur du HTML. C'est le socle que le CSS met en forme et que JavaScript rend interactif.

Votre premier document HTML

Un document HTML commence par une déclaration <!DOCTYPE html>, suivie de l'élément <html> contenant <head> et <body> :

index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bonjour, monde !</h1>
    <p>Ceci est ma première page web.</p>
  </body>
</html>

Balises et attributs

Les éléments HTML s'écrivent avec des balises ouvrantes et fermantes. Les balises peuvent avoir des attributs :

Balises et attributs

<!-- Balise ouvrante avec attribut -->
<a href="https://example.com">Cliquez ici</a>
<!--  ^       ^                  ^             ^ -->
<!-- balise  attribut          contenu   balise fermante -->

<!-- Balise auto-fermante -->
<img src="photo.jpg" alt="Une photo">

Structure sémantique

Le HTML moderne utilise des éléments sémantiques qui décrivent le sens du contenu :

Éléments sémantiques

<header>Navigation et marque du site</header>
<nav>Liens de navigation</nav>
<main>Contenu principal de la page</main>
<article>Contenu autonome</article>
<section>Regroupement thématique</section>
<aside>Contenu latéral</aside>
<footer>Pied de page</footer>

À vous de jouer

Essayez les commandes ci-dessous pour explorer la structure HTML :

terminal — browser

Leçon 2Éléments texte