Se rendre au contenu

Explorateur HTML

Explorateur HTML Visuel

Balises classiques HTML5

Les balises HTML classiques constituent les fondations du langage HTML. Elles permettent d'afficher du texte, des images, des liens, des listes, des tableaux ou encore des formulaires. Bien qu'elles ne soient pas “sémantiques” au sens strict, elles jouent un rôle essentiel dans la mise en page et l'interaction des contenus web.

h1 à h6

Balise de titre de niveau 1. Elle représente le titre principal d'une page.
📖 Documentation MDN

Balises de titres hiérarchiques.


<h1>Titre h1</h1>
<h2>Titre h2</h2>
<h3>Titre h3</h3>
<h4>Titre h4</h4>
<h5>Titre h5</h5>
<h6>Titre h6</h6>

Titre h1

Titre h2

Titre h3

Titre h4

Titre h5
Titre h6

img

Balise d'image. Permet d'afficher une image dans la page.
📖 Documentation MDN

Affiche une image.

<img alt="Exemple d'image" src="https://en.meming.world/images/en/3/3f/This_Is_Fine.jpg" width="150"/>
Exemple d'image

p, br, hr

Texte de paragraphe, saut de ligne, ligne horizontale.


<p>Ceci est un paragraphe.<br/>Avec un saut de ligne.</p>
<hr/>
<p>Un autre paragraphe après une ligne horizontale.</p>

Ceci est un paragraphe.
Avec un saut de ligne.


Un autre paragraphe après une ligne horizontale.

a

Balise de lien hypertexte. Permet de naviguer vers une autre page ou ressource.
📖 Documentation MDN

Balise de lien hypertexte.

<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/a" target="_blank">Voir la documentation MDN</a>

ul, ol, li

Listes non ordonnées et ordonnées.


<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>

<ol>
  <li>Premier</li>
  <li>Deuxième</li>
</ol>
  • Élément 1
  • Élément 2
  1. Premier
  2. Deuxième

form, input, textarea, button, select, option, label>

Balises pour la création de formulaires interactifs.


<form onsubmit="alert('Formulaire envoyé'); return false;">
  <label>Nom : 
    <input name="nom" type="text"/>
  </label> 
  <label>Message : 
    <textarea></textarea>
  </label> 
  <label>Choix :
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </label>
  <button type="submit">Envoyer</button>
</form>






div et span

Balise de division. Utilisée pour regrouper d'autres éléments HTML.
📖 Documentation MDN

Conteneurs génériques pour mise en page (bloc et inline).

<div style="background:#ddd; padding:10px;">Une div</div>
<p>Texte avec un <span style="color:red;">span rouge</span> intégré.</p>
Une div

Texte avec un span rouge intégré.

table, thead, tbody, tfoot, tr, th, td, caption

Tableaux de données avec titres, pieds et légendes.


<table border="1">
  <caption>Exemple de tableau</caption>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Âge</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Fin du tableau</td>
    </tr>
  </tfoot>
</table>
Exemple de tableau
Nom Âge
Alice 24
Bob 30
Fin du tableau

Balises HTML obsolètes (dépréciées)

⚠️ Ces balises ne sont plus recommandées. Utilisées uniquement à titre pédagogique.


<center>Texte centré avec <center></center>
<font color="blue">Texte bleu avec <font></font><br/>
<marquee>Texte défilant avec <marquee></marquee>
Texte centré avec <center>
Texte bleu avec <font>
Texte défilant avec <marquee>

Balises Sémantiques HTML5

Les balises sémantiques améliorent la lisibilité du code HTML en indiquant clairement le rôle des éléments dans la structure de la page. Voici des exemples concrets de leur usage stylisé et responsive.

header

Représente l'en-tête d'une page ou d'une section. Généralement utilisé pour les logos, menus de navigation ou titres principaux.


<header>
  <img alt="Logo Starbucks" src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/800px-Starbucks_Corporation_Logo_2011.svg.png"/>
  <nav>
    <a href="#">Menu</a>
    <a href="#">Commander</a>
    <a href="#">Connexion</a>
  </nav>
<header>
Logo Starbucks

aside

Contenu secondaire comme une barre latérale. Utilisé pour les menus, infos contextuelles, etc.


<aside>
  <button onclick="alert('Accueil')">🏠 Accueil</button>
  <button onclick="alert('Profil')">👤 Profil</button>
  <button onclick="alert('Paramètres')">⚙️ Paramètres</button>
</aside>
<main>
  <h3>Contenu principal</h3>
  <p>Cette section contient le contenu principal de la page.</p>
</main>

Contenu principal

Cette section contient le contenu principal de la page.

main

Contient le contenu principal de la page, sans les éléments répétés (comme les en-têtes ou les pieds de page).


<main>
  <h3>Bienvenue</h3>
  <p>Ceci est le contenu central affiché sur une page.</p>
</main>

Bienvenue

Ceci est le contenu central affiché sur une page.

section

Regroupe des contenus logiquement liés dans une page. Peut contenir un titre.

Nos services

  • Développement web
  • Design UX/UI
  • Formation

article

Représente un contenu indépendant (article de blog, commentaire, actu…)


<article>
  <h3>Pourquoi apprendre le HTML ?</h3>
  <p>Le HTML est la base de toute page web. Il permet de structurer l'information de manière claire.</p>
</article>

Pourquoi apprendre le HTML ?

Le HTML est la base de toute page web. Il permet de structurer l'information de manière claire.

figure et figcaption

Encadre un média (image, schéma, graphique) et sa légende.


<figure style="text-align:center;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png" width="80"/>
  <figcaption>Logo de React</figcaption>
</figure>
Logo de React

header et nav — Exemple de barre de navigation


<header style="background:#0a0a0a; color:white; padding:10px 20px;">
  <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap;">
    <div style="font-size:1.5em; font-weight:bold;">LOGO</div>
      <nav class="nav-menu" style="gap:20px; flex-wrap:wrap;">
        <a href="#" style="color:white; text-decoration:none;">Accueil</a>
        <a href="#" style="color:white; text-decoration:none;">Produits</a>
        <a href="#" style="color:white; text-decoration:none;">Contact</a>
        <a href="#" style="color:white; text-decoration:none;">À propos</a>
      </nav>
      <button class="burger" onclick="toggleMenu()" style="font-size:1.2em; background:none; border:none; color:white;">☰</button>
  </div>
</header>

footer

Représente le pied de page d'un document ou d'une section, incluant des infos légales, liens, copyright…


<footer>
  <p>© 2025 MonSite.com | <a href="#" style="color: #ddd;">Mentions légales</a></p>
</footer>