Structure d'une page HTML

Dans ce module, nous allons étudier la structure d'une page HTML.

La balise html et son attribut lang

Méthode

  • La balise html est la première balise à renseigner,

  • Elle arrive après le Doctype,

  • Elle spécifie la langue utilisée dans le contenu de la page,

  • Le contenu doit rester encadré entre la balise html ouvrante et la balise html fermante.

1
<!DOCTYPE html>
2
<html lang="fr">
3
4
</html>
La balise head
Méthode
  • La balise head est ouvrante et fermante,
  • Elle contient les informations essentielles à la description du document,
  • Les contenus de la balise head sont non-visibles depuis le navigateur,
  • Elle contient le titre de la page, des méta-descriptions et les liens vers les fichiers CSS de la page.
1
<!DOCTYPE html>
2
<html lang="fr">
3
   <head>
4
5
   </head>
6
</html>
La balise meta : charset
Méthode
  • Permet de spécifier des méta-informations,
  • Avec charset, elle permet de spécifier l'encodage de la page,
  • L'encodage utf-8 permet d'afficher les accents et caractères spéciaux.
1
<!DOCTYPE html>
2
<html lang="fr">
3
   <head>
4
      <meta charset="utf-8">
5
   </head>
6
</html>
Pour changer d'encodage sur Sublime Text : → File → Save with Encoding
La balise meta : noindex nofollow
Méthode
La meta name robot peut recevoir 2 valeurs : noindex ou nofollow.
  • noindex : indique s'il faut référencer la page,
  • nofollow : indique si les liens présents sur la page doivent être suivis.
Il existe 4 combinaisons possibles :
1
<!DOCTYPE html>
2
<html lang="fr">
3
   <head>
4
      <meta charset="utf-8">
5
6
      <meta name="robots" content="noindex, follow">
7
8
      <meta name="robots" content="noindex, nofollow">
9
10
      <meta name="robots" content="index, nofollow">
11
12
      <meta name="robots" content="index, follow">
13
   </head>
14
</html>
  • noindex + follow : la page n'est pas indexée, les liens sont pris en compte,
  • noindex + nofollow : la page n'est pas référencée, les liens ne sont pas suivis,
  • index + nofollow : la page est référencée, les liens ne sont pas suivis,
  • index + follow : combinaison par défaut.
La meta name robot permet de maîtriser son référencement naturel.
Remarque
Par défaut, les pages sont référencées et les liens sont suivis.
La balise body
Méthode
  • La deuxième balise structurante dans le HTML,
  • À la suite de la balise head,
  • Elle spécifie le contenu de la page à afficher sur la page web aux internautes.
1
<!DOCTYPE html>
2
<html lang="fr">
3
   <head>
4
      <meta charset="utf-8">
5
   </head>
6
   <body>
7
   </body>
8
</html>
L'indentation et l'imbrication
Méthode
Quand on saisit du code HTML, il est indispensable de respecter l'indentation des balises et leur imbrication les unes dans les autres.
  • Ici, la boîte meta est un enfant de la boîte head,
  • La boîte html est le parent de la boîte head et body.
1
<!DOCTYPE html>
2
<html lang="fr"><head><meta charset="utf-8"></head><body>
3
</body>
4
</html>
Exemple
Ici les balises se suivent côte à côte, le code est illisible.
  • Il s'agit d'un format de code dit minifié,
  • Il permet au site d'être plus rapide une fois le fichier finalisé,
  • Il n'est pas du tout adapté au moment de la production.
Remarque
Utilisez la tabulation pour indenter vos différentes balises.
La balise title
Méthode
  • Se trouve dans le bloc head,
  • Elle est obligatoire,
  • Permet de donner un titre à une page,
  • Est prise en compte par le navigateur,
  • Sert au référencement de la page.
  • Doit refléter le contenu de la page,
  • Doit être compréhensible et informative,
  • Doit contenir des mots clés,
  • Doit faire moins de 56 caractères,
  • Chaque page HTML doit avoir un titre unique.
1
<!DOCTYPE html>
2
<html lang="fr">
3
   <head>
4
   <meta charset="utf-8">
5
   <title>Titre de ma première page en HTML</title>
6
   </head>
7
   <body>
8
   </body>
9
</html>
La balise meta name
Méthode
  • Sert au référencement de la page web,
  • Limitée à 200 caractères,
  • Elle doit décrire le contenu de la page,
  • Elle est prise en compte par les moteurs de recherche,
  • Elle est affichée dans les résultats de recherche.
1
<!DOCTYPE html>
2
<html lang="fr">
3
   <head>
4
   <meta charset="utf-8">
5
   <title>Titre de ma première page en HTML</title>
6
   <meta name="description" content="Ici nous écrirons le contenu de la description de la page">
7
   </head>
8
   <body>
9
   </body>
10
</html>