Rappel des balises en html

Html

Le html est un language de balisage qui permet de structurer les contenu d’une page web. Les balises peuvent s’imbriquer les unes dans les autres, mais elle ne doivent pas s’entrecroiser (cf exemple ✅ ❌ plus bas)

Syntaxe d’une balise

Une balise html est composé de

  • deux chevrons: ouvert (<) et fermé (>)
  • du nom de la balise (p,a) <p>
  • d’une balise de fermeture qui reprend le nom de la balise avec un slash au début 
    <p>Contenu paragraphe</p>
    Exception: Certaines balises sont auto-fermantes elles n’ont pas de balise de fermeture
  • souvent, les balises sont complétées avec un ou plusieurs attributs (id, class, href). Les attributs sont composés d’un nom et d’une valeur, séparés par un signe égal
    par exemple l’attribut href précise l’url vers lequel l’utilisateur sera redirigé au click
<balise attribut="valeur">Contenu de la balise</balise>

Exemple de balise

Un paragraphe :

<p>Contenu du paragraphe</p>

Un lien :

<a href="https://mi-ca.ch">Lien vers mi-ca.ch</a>

Exemple de balises enfants juste et faux

✅ Imbrication correcte

<!-- code html correct -->
<p>Ceci est le contenu
   d'un paragraphe avec
   du <strong>texte en bold</strong> 
   et <a href="https://web.cpmd.ch">un lien</a> et même
   de l'<em>italique</em>
</p>

❌ Imbrication incorrecte

<!-- code html incorrect -->
<p>Ceci est le contenu
   d'un paragraphe avec
   du <strong>texte en bold 
   et <a href="https://web.cpmd.ch">un</strong> lien<em></a> et même
   de l'italique</em>
</p>

regardez la balise de fermeture de </strong> et celle d’ouverture de <em>

Certaines balises sont obligatoires pour construire une page web. Il s’agit d’une sorte de déclaration tout en haut du code de la page web qui se présente ainsi :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre du document - très important pour le référencement google</title>
  <link rel="stylesheet" href="assets/style.css">
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> Le doctype est une déclaration qui indique au navigateur le type de document HTML que vous utilisez. Il est toujours la première ligne de votre code HTML.

<html lang="fr"> encadre toute la page html, comme les autres balises, elle doit être fermée. Elle comporte dans sa balise d’ouverture un attribut lang pour préciser que le contenu du site sera en français.

La balise <head> contient des informations sur votre document, mais qui ne sont pas visibles par l’utilisateur. Elle est située juste après l’ouverture de la balise <html>

Les éléments les plus courants que vous pouvez trouver dans la balise <head> sont les suivants :

  • <title> : le titre de votre document, qui apparaît dans la barre de titre du navigateur.
  • <meta> : des métadonnées sur votre document, telles que le langage utilisé, les mots-clés, etc.
  • <link> : des liens vers des ressources externes, telles que des feuilles de style CSS ou la petite icône du site appelée favicon.