Telechargement de base vide
Télécharger le projet en ZIP ⚖️ Structure de base
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre</title>
</head>
<body>
Contenu ici
</body>
</html>
📄 Balises principales
- Titres
<h1> à <h6> – <h1>Bonjour</h1> - Paragraphe
<p> – <p>Ceci est un paragraphe.</p> - Lien
<a href=""> – <a href="https://exemple.com">Voir le site</a> - Image
<img src="" alt=""> – <img src="chat.jpg" alt="Un chat mignon"> - Listes
<ul>/<ol>/<li> – <ul><li>Item</li></ul> - Tableau
<table> – <table><tr><td>Cellule</td></tr></table> - Conteneurs
<div> <span> – <div class="box">Contenu</div>
🎨 Attributs essentiels
class – <div class="menu"> id – <p id="intro">href – <a href="page.html"> src – <img src="photo.jpg"> alt – <img alt="description">title – <a title="Aller au site"> target – <a target="_blank"> rel – <a rel="noopener">type – <input type="email"> value – <input value="Jean"> placeholder – <input placeholder="Votre nom">
🔢 Formulaires
<form action="#" method="post">
<input type="text" name="nom" />
<input type="submit" value="Envoyer" />
</form>
<input> <textarea> <select> – <textarea name="message"></textarea>
Types text emailcheckbox radio password – <input type="checkbox" name="ok">
🗃️ Tableaux
<table>
<thead><tr><th>Nom</th></tr></thead>
<tbody><tr><td>Alice</td></tr></tbody>
</table>
📊 Sémantique
<header> <footer> <main><article> <section><aside> <nav> – <nav><a href="index.html">Accueil</a></nav>
⏩ Meta & SEO
<meta name="description" content="Mon site">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
🚀 Accessibilité
alt sur les images – <img src="chien.jpg" alt="Chien qui court">- Structure claire des titres – <h1> puis <h2> <h3> etc.
- Utilisation d'ARIA si nécessaire – <button aria-label="Fermer">✖</button>
📅 Bonnes pratiques
- Valider le HTML (W3C)
- Respecter la structure sémantique
- Optimiser les balises
img – taille réduite attribut alt formats modernes (WebP)