php

C’est quoi le HTML ?

HTML est un acronyme de Hypertext Markup Language. À vos souhaits. Le HTML sert à structurer tous les éléments textuels d’une page web. Une page HTML est un peu le squelette de toute page web. C’est elle qui va définir le contenu et le hiérarchiser. Un titre, un passage important, une citation, une image : tout ça, c’est grâce au HTML.

Le HTML est accompagné du CSS. Si le HTML nous sert à structurer le contenu, c’est grâce au CSS que l’on va le styliser (organiser le contenu visuellement, apporter de la couleur, modifier la police d’écriture, etc.). C’est le duo qui va servir à créer le contenu d’une page et à la styliser.

En général, on commence l’apprentissage des technologies web par le HTML qui est le langage le plus abordable pour un débutant. Si le HTML permet de structurer une page web, il ne permet pas de styliser une page, d’ajouter de l’interactivité complexe ou encore du dynamisme. En ce sens, on ne considère pas le HTML comme un langage de programmation mais plutôt comme un langage de balisage, permettant de décrire de l’information.

Comment ça marche le html ?

En-tête de page

Une page web HTML est toujours constituée d’une balise ouvrante html située au début de la page et d’une balise fermante html située en fin de page. Ainsi on pourra écrire notre contenu à l’intérieur de ces balises. Cela fonctionnera de la même manière pour la plupart des balises : une balise ouvrante couplée à une balise fermante.

Vient ensuite la balise head qui est le début de la zone d’en-tête, dans laquelle on va inscrire nos métadonnées. Cela permet de donner un titre à notre page avec la balise title, qui apparaîtra plus précisément dans l’onglet de la page web.

Voici un exemple :

1
2
3
<head>
  <title>Titre de l'onglet de la page web</title>
</head>

Onglet de la page

Corps de la page

Après la balise head (en-tête de la page) vient le duo de balise bodybody qui sera le corps de notre page. Cette balise va contenir tous les éléments de contenus d’une page web, comme des titres, des paragraphes, des articles, des listes…

Voici un exemple de structure de page web :

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <title>Titre de l'onglet de la page web</title>
  </head>
  <body>
    <header>
      <h1>Titre de la page</h1>
    </header>
    <div>Contenu de la page, articles, sections…</div>
    <footer>Bas de page</footer>
  </body>
</html>

Titre de la page

Contenu de la page, articles, sections…

On remarquera qu’il faut respecter une indentation. C’est à dire un système de poupées russes. Il y a toujours une hiérarchie dans les balises. La balise h1 appartient à la balise header, qui elle-même appartient à la balise body et ainsi de suite. L’indentation n’est pas utile pour que les navigateurs comprennent le code HTML, mais elle est indispensable pour préserver la lisibilité pour nous, humains.

On peut dire que h1 est l’enfant de header et header est l’enfant de body. De ce fait, les balises header, div et footer sont “frères et soeurs” car elles sont toutes deux les enfants de body.

On passe aux leçons !

Vous savez maintenant à quoi sert le html et à quoi ça ressemble

Il ne reste plus qu’à démarrer le parcours !

Commencer le parcours html