Front-end

Introduction au HTML

3 min de lecture

HTML est un langage de balisage utilisé pour structurer le contenu des pages web.
Bien qu'il ne s'agisse pas d'un langage de programmation à proprement parler, il reste fondamental pour créer des sites web.

Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de ce qu'est le HTML et pourquoi il est si important.

🤔 Qu'est-ce que le HTML ?

HTML, ou HyperText Markup Language, est le langage standard utilisé pour créer des pages web. Il s'agit d'un langage de balisage qui utilise des balises pour structurer le contenu.
Il s'agit du squelette d'une page web, qui définit la structure et le contenu de celle-ci.

Pourquoi HTML n'est pas un langage de programmation ?

Avant de répondre à cette question, il est important de connaître la définition d'un langage de programmation.

Langage de programmation

Un langage de programmation est un ensemble de règles et de conventions qui permettent d'écrire des instructions que l'ordinateur peut comprendre et exécuter.
Ces instructions peuvent inclure des calculs, des conditions, des boucles, etc.

Si on regarde la définition d'un langage de programmation, on peut voir que le HTML ne correspond pas à cette définition.
Tout simplement parce que le HTML ne permet pas d'écrire des instructions que l'ordinateur peut exécuter !

Mais bon... savoir ça c'est bien : mais ça ne va pas nous aider à créer des pages web.

🏗️ La structure d'une page HTML

Une page HTML est composée de plusieurs éléments, chacun ayant un rôle spécifique.

Par exemple, une page HTML typique contient les éléments suivants :

<!DOCTYPE html> : Indique au navigateur que le document est un fichier HTML.
<html> : L'élément racine qui englobe tout le contenu de la page.
<head> : Contient des informations sur la page, comme le titre, les liens vers les fichiers CSS et JavaScript, etc.
<body> : Contient le contenu visible de la page, comme le texte, les images, les liens, etc.

Il s'agit des balises de base qui composent une page HTML.
Voici un exemple de code HTML simple :

<!-- On indique au navigateur que le document est en HTML -->
<!DOCTYPE html>

<!-- On indique la langue du document (ici, en français) -->
<html lang="fr">

<!-- On indique les paramètres de la page... -->
<head>
  <!-- ... comme le jeu de caractères utilisé (UTF-8)... -->
  <meta charset="UTF-8">

  <!-- ... la compatibilité avec les navigateurs... -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ... le titre de la page... -->
  <title>Mon super site</title>

  <!-- ... et la description de la page... -->
  <meta name="description" content="Ceci est un exemple de page HTML.">
</head>

<!-- On indique le début du corps de la page -->
<!-- Le corps de la page contient le contenu visible par l'utilisateur -->
<body>
  <!-- On indique le début d'un en-tête -->
  <header>
    <!-- On indique le titre principal de la page -->
    <h1>Bienvenue sur ma page HTML</h1>
  </header>

  <!-- On indique le début du contenu principal -->
  <main>
    <!-- On indique un sous-titre -->
    <h2>Voici un exemple de contenu principal</h2>

    <!-- On indique un paragraphe -->
    <p>Ceci est un exemple de paragraphe dans le contenu principal.</p>
  </main>

  <!-- On indique le début d'un pied de page -->
  <footer>
    <!-- On indique un texte de copyright -->
    <p>&copy; 2023 Mon Site Web</p>
  </footer>
</body>
</html>

C'est quoi la balise `` ?

La balise  est utilisée pour ajouter des commentaires dans le code HTML.
Ces commentaires ne sont pas affichés dans le navigateur et sont uniquement visibles dans le code source de la page.

On les utilise pour ajouter des notes ou des explications dans le code, ce qui peut être utile pour les développeurs qui lisent le code plus tard.

La balise <head>

Dans l'exemple ci-dessus, on peut voir que la balise <head> contient plusieurs éléments importants :

<meta charset="UTF-8"> : Indique l'encodage des caractères utilisé dans le document. UTF-8 est l'encodage le plus courant et prend en charge la plupart des langues.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Indique au navigateur comment afficher la page sur les appareils mobiles. Cela permet de rendre la page responsive.
<title> : Définit le titre de la page, qui s'affiche dans l'onglet du navigateur.
<meta name="description" content="..."> : Fournit une description de la page, qui peut être utilisée par les moteurs de recherche pour afficher un extrait de la page dans les résultats de recherche.

Ces balises ne s'affichent pas sur la page elle-même, mais elles sont essentielles pour le bon fonctionnement de la page et son référencement dans les moteurs de recherche.

On peut également ajouter des liens vers des fichiers CSS et JavaScript dans la balise <head>, ce qui permet de styliser la page et d'ajouter des fonctionnalités interactives.

En résumé, la balise <head> permet de définir toutes les informations importantes sur la page et de préparer le terrain pour le contenu qui sera affiché dans la balise <body>.

La balise <body>

La balise <body> contient tout le contenu visible de la page, comme le texte, les images, les liens, etc.
C'est ici que l'on va pouvoir définir la structure de notre page.

Chaque balise HTML a un rôle spécifique et permet de structurer le contenu de la page. Certaines donnent du sens au contenu, tandis que d'autres permettent de tout simplement de regrouper des groupes de balises.

Dans l'exemple donné plus tôt, on peut voir plusieurs balises courantes utilisées dans la balise <body> :

<h1> : Définit un titre de premier niveau. Il est généralement utilisé pour le titre principal de la page.
<h2> : Définit un titre de deuxième niveau. Il est généralement utilisé pour les sous-titres.
<p> : Définit un paragraphe de texte.
<header> : Définit l'en-tête de la page. Il est généralement utilisé pour le titre et la navigation.
<main> : Définit le contenu principal de la page. Il est généralement utilisé pour le contenu principal de la page.
<footer> : Définit le pied de page de la page. Il est généralement utilisé pour les informations de copyright et les liens vers les mentions légales.

Il y en a bien évidemment beaucoup d'autres, mais on se garde ça pour un prochain article 😉

📜 Les attributs HTML

Les balises HTML peuvent également avoir des attributs, qui fournissent des informations supplémentaires sur l'élément.
Les attributs sont toujours définis dans la balise d'ouverture de l'élément et sont généralement constitués d'un nom et d'une valeur.

Dans l'exemple donné plus tôt, on a eu l'occasion d'en voir dans les balises <meta>.
Mais on peut aussi en trouver dans d'autres balises présents dans le corps de la page.

Voici quelques exemples d'attributs courants :

<!-- On indique un lien hypertexte -->
<!-- `href` est l'attribut qui indique la destination du lien -->
<a href="https://www.example.com">Visitez notre site</a>

<!-- On indique une image -->
<!-- `src` est l'attribut qui indique l'URL de l'image -->
<!-- `alt` est l'attribut qui fournit une description de l'image -->
<img src="https://www.example.com/image.jpg" alt="Description de l'image">

On s'arrête là pour le moment !

Pas la peine de se précipiter, on a encore plein de choses à voir sur le HTML.
Bien que ce langage soit extrêmement simple, il nécessite d'être bien compris pour pouvoir créer des pages web de qualité.

Pour le moment, nous savons à quoi ressemble une page HTML et comment elle est structurée.. on verra comment créer des pages web plus représentatives dans les prochains articles !