anglais
français
arabe
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
Les fondamentaux du HTML
Passer le quiz
De la structure à l’aisance
Vous savez déjà construire une page simple. Découvrons maintenant les éléments que vous utiliserez tous les jours — et comment les employer correctement.
Les éléments les plus courants
| Élément | Rôle | Exemple |
|---|---|---|
<h1>–<h6> | Titres, du plus au moins important | <h1>Titre</h1> |
<p> | Un paragraphe de texte | <p>Bonjour</p> |
<a> | Un lien vers une autre page | <a href="...">Lien</a> |
<img> | Une image | <img src="..." alt="..."> |
<ul>/<li> | Une liste à puces | <li>Élément</li> |
Les attributs : une information supplémentaire
Les attributs se placent dans la balise ouvrante et configurent un élément. Les plus utilisés sont href (la destination d’un lien) et src/alt (une image et sa description textuelle).
<a href="https://devosoft.com">Visiter Devosoft</a>
<img src="logo.png" alt="Logo Devosoft">Toujours renseigner alt
L’attribut alt décrit l’image pour les lecteurs d’écran et s’affiche si l’image ne charge pas. Ne l’omettez jamais.
Le HTML sémantique
Plutôt que d’envelopper tout dans des <div> anonymes, utilisez des balises qui décrivent leur rôle. Le balisage sémantique est plus lisible, meilleur pour le référencement et bien plus accessible.
<header>...en-tete du site...</header>
<nav>...menu...</nav>
<main>
<article>...le contenu principal...</article>
</main>
<footer>...pied de page...</footer>Évitez la « soupe de div »
Une page faite uniquement de <div> ne dit rien au navigateur sur le sens. Préférez <header>, <nav>, <main>, <section> et <footer> dès que possible.
Un premier formulaire
Les formulaires collectent les saisies de l’utilisateur. Chaque champ doit être associé à un <label> pour la clarté et l’accessibilité.
<form>
<label for="email">E-mail</label>
<input id="email" type="email" name="email">
<button type="submit">S'inscrire</button>
</form>Quelle différence entre <section> et <div> ?
<section> regroupe un contenu lié porteur de sens ; <div> est un conteneur neutre surtout utilisé pour le style.Puis-je avoir plusieurs <h1> sur une page ?
<h1> principal par page, puis <h2>–<h6> pour bâtir une hiérarchie claire.