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
email
checkbox
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)