Aller au contenu

Syntaxe élémentaire HTML

Ce mémo présente une dizaine de balises essentielles pour écrire un document HTML. Ces balises constituent les bases de la structure et du contenu d'une page web.

Structure de base d'un document HTML⚓︎

HTML
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu principal ici -->
</body>
</html>

Les balises essentielles⚓︎

1. <html>⚓︎

  • DĂ©finit le dĂ©but et la fin d'un document HTML.
  • Exemple :
HTML
1
2
3
<html>
    <!-- Contenu HTML -->
</html>

2. <head>⚓︎

  • Contient des mĂ©tadonnĂ©es et des liens vers des ressources externes comme des styles ou des scripts.
  • Exemple :
HTML
1
2
3
4
<head>
    <meta charset="UTF-8">
    <title>Exemple</title>
</head>

3. <body>⚓︎

  • Contient tout le contenu visible de la page.
  • Exemple :
HTML
1
2
3
<body>
    <p>Bienvenue sur ma page !</p>
</body>

4. <h1> à <h6>⚓︎

  • DĂ©finissent les titres, du plus important <h1> au moins important <h6>.
  • Exemple :
HTML
1
2
<h1>Titre principal</h1>
<h2>Sous-titre</h2>

5. <p>⚓︎

  • DĂ©finit un paragraphe de texte.
  • Exemple :
HTML
1
<p>Ceci est un paragraphe de texte.</p>

6. <a>⚓︎

  • CrĂ©e un lien hypertexte.
  • Exemple :
HTML
1
<a href="https://www.example.com">Visitez Example</a>

7. <img>⚓︎

  • Affiche une image.
  • Attributs courants : src (source de l'image) et alt (texte alternatif).
  • Exemple :
HTML
1
<img src="image.jpg" alt="Description de l'image">

8. <ul>, <ol> et <li>⚓︎

  • CrĂ©ent des listes. <ul> pour les listes non ordonnĂ©es, <ol> pour les listes ordonnĂ©es, et <li> pour chaque Ă©lĂ©ment.
  • Exemple :
HTML
1
2
3
4
5
6
7
8
9
<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

<ol>
    <li>Première étape</li>
    <li>Deuxième étape</li>
</ol>

9. <div>⚓︎

  • Sert Ă  regrouper des Ă©lĂ©ments pour des mises en page ou styles spĂ©cifiques.
  • Exemple :
HTML
1
2
3
<div>
    <p>Bloc de contenu</p>
</div>

10. <span>⚓︎

  • Sert Ă  styliser une portion spĂ©cifique de texte en ligne.
  • Exemple :
HTML
1
<p>Texte avec un <span style="color: red;">mot rouge</span>.</p>

Ressources supplémentaires⚓︎