HTML
Le mémo de HTML : squelette de page, texte, liens, images, listes, tableaux, éléments sémantiques et formulaires.
Ce mémo résume les éléments HTML à connaître. Chaque section renvoie au chapitre qui l'explique en détail.
Vocabulaire
| Mot | Sens |
|---|---|
| Balise | <p> (ouvrante) ou </p> (fermante) |
| Élément | Balise ouvrante, contenu, balise fermante |
| Attribut | nom="valeur" dans la balise ouvrante |
| Élément vide | Sans contenu ni fermeture : <br>, <hr>, <img> |
Détails : Qu'est-ce que HTML ?.
Squelette d'une page
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titre de la page</title>
</head>
<body>
<!-- le contenu visible -->
</body>
</html>
Détails : La structure d'un document.
Texte, liens, images
<h1>Titre</h1>
<p>Un texte <strong>important</strong> et <em>nuancé</em>.</p>
<a href="/recettes">Voir les recettes</a>
<a href="#ingredients">Aller aux ingrédients</a>
<img src="tarte.jpg" alt="Tarte aux pommes" width="600" height="400">
| Besoin | Élément |
|---|---|
| Titres, du plus au moins important | <h1> à <h6> |
| Lien | <a href="..."> |
| Image décorative | <img alt=""> |
| Image avec légende | <figure> et <figcaption> |
Détails : Texte, liens et images.
Listes et tableaux
| Besoin | Éléments |
|---|---|
| Liste sans ordre | <ul> et <li> |
| Liste numérotée | <ol> et <li> |
| Termes et définitions | <dl>, <dt>, <dd> |
| Tableau | <table>, <caption>, <tr>, <th scope>, <td> |
<th scope="col">Durée</th>
<td colspan="2">Cuisson au four</td>
Détails : Listes et tableaux.
Éléments sémantiques
| Élément | Contenu |
|---|---|
<header> | Introduction de la page ou d'une partie |
<nav> | Liens de navigation |
<main> | Contenu principal, un par page |
<article> | Contenu autonome (une recette) |
<section> | Regroupement thématique avec un titre |
<aside> | Contenu annexe |
<footer> | Pied de page |
Rappels d'accessibilité : un seul <h1>, aucun saut de niveau de titre, un alt sur chaque image, un lang sur <html>. Détails : Sémantique et accessibilité.
Formulaires
<form action="/recettes" method="post">
<label for="titre">Nom</label>
<input type="text" id="titre" name="titre" required minlength="3">
<button type="submit">Envoyer</button>
</form>
| Attribut de validation | Effet |
|---|---|
required | Champ obligatoire |
minlength, maxlength | Longueur du texte |
min, max | Bornes d'un nombre ou d'une date |
pattern | Format imposé par une expression régulière |
novalidate (sur <form>) | Désactive la validation native |
Détails : Formulaires et validation.
Sources officielles
Ensuite
- Projet
- Lignes de code
- Niveau
- 1er étage
- Appartement
- HTML
- Pièce
- 7/7
- Plan n°
- html/index