PhpBB Lab Académie

Réutiliser les notions apprises depuis le début du cours pour construire une page d’accueil complète sans introduire de nouvelle balise, puis appliquer une méthode de vérification systématique portant sur la structure du document, la hiérarchie des titres, les éléments sémantiques, les liens, les images, les listes, les tableaux, les formulaires, la navigation au clavier et la cohérence générale du petit site.

Nous arrivons à la dernière leçon du cours HTML

Depuis le début, vous n’avez pas appris une collection de balises indépendantes.

Vous avez construit progressivement le même petit site :

mon-premier-site

index.html
apropos.html
contact.html
ordinateur.jpg

Vous savez maintenant créer et organiser :

- un document HTML complet ;
- des titres et des paragraphes ;
- des listes ;
- des liens externes et internes ;
- des images avec un texte alternatif ;
- une navigation ;
- des zones

header

,

main

et

footer

;
- des

section

et des

article

;
- un tableau de données ;
- un formulaire avec des labels correctement associés ;
- plusieurs types de champs accessibles.

Cette dernière leçon n’introduit volontairement aucune nouvelle balise.

L’objectif est différent :

assembler
vérifier
corriger
expliquer

À la fin, vous devrez être capable de regarder votre propre HTML et de déterminer s’il est cohérent, même si le navigateur semble déjà afficher quelque chose de correct.

1. Pourquoi une page qui s’affiche peut encore contenir des erreurs ?

Les navigateurs essaient souvent d’afficher une page même lorsque le HTML contient certaines erreurs.

Vous l’avez déjà vu avec l’imbrication.

Un navigateur peut parfois corriger ou interpréter une structure imparfaite.

Cela signifie que :

la page semble fonctionner

ne veut pas forcément dire :

le HTML est correctement structuré

Nous allons donc apprendre à vérifier le document autrement qu’en regardant uniquement son apparence.

2. Notre méthode de vérification finale

Nous allons contrôler la page en plusieurs passes.

Chaque passe répond à une question précise :

1. Le document possède-t-il sa structure de base ?
2. Les titres forment-ils une hiérarchie logique ?
3. Les grandes zones sémantiques sont-elles correctement utilisées ?
4. Les liens fonctionnent-ils et leurs textes sont-ils compréhensibles ?
5. Les images possèdent-elles une alternative adaptée ?
6. Les listes et tableaux sont-ils utilisés pour le bon type de contenu ?
7. Les formulaires sont-ils correctement libellés ?
8. Le site reste-t-il utilisable au clavier et compréhensible avec un lecteur d’écran ?

Cette méthode est plus fiable qu’une vérification vague du type :

Je regarde rapidement si tout a l’air normal.

3. Première passe : vérifier la structure générale du document

Commencez par le début de

index.html

.

Vous devez retrouver une structure cohérente :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Accueil - Mon premier site HTML</title>
</head>
<body>
    ...
</body>
</html>

Vérifiez chaque point :

<!doctype html>

est présent au début.

L’élément :

<html lang="fr">

entoure le document et indique sa langue principale.

Dans

head

, vous retrouvez au minimum :

<meta charset="utf-8">

et :

<title>...</title>

Le contenu visible appartient à :

body

et non à

head

.

4. Vérifier title sans le confondre avec h1

Pour notre page d’accueil, nous pouvons avoir :

<title>Accueil - Mon premier site HTML</title>

dans

head

.

Puis dans le contenu principal :

<h1>Accueil</h1>

Ces deux éléments ont des rôles différents.

title

identifie le document dans le navigateur et d’autres outils.

h1

est le titre principal visible du contenu de la page.

Ne supprimez donc pas

h1

simplement parce que

title

existe.

5. Deuxième passe : vérifier la hiérarchie des titres

Imaginons ce plan :

h1 : Accueil
    h2 : Ce que j’ai appris
    h2 : Mes notes de progression
        h3 : Ma première page complète
        h3 : Mon formulaire de contact
    h2 : Mon espace de travail
    h2 : Les pages de mon site

Cette hiérarchie est compréhensible.

Le

h1

décrit la page.

Les

h2

représentent de grandes parties.

Les

h3

sont des subdivisions de la section :

Mes notes de progression

Nous ne choisissons toujours pas le niveau selon la taille visuelle du texte.

6. Vérifier les titres en navigation réelle

Si vous utilisez un lecteur d’écran, parcourez uniquement les titres.

Vous devez pouvoir comprendre l’organisation générale sans lire tous les paragraphes.

Demandez-vous :

Le titre principal est-il clair ?
Les h2 correspondent-ils à de vraies grandes parties ?
Les h3 appartiennent-ils réellement au h2 qui les précède ?
Le texte des titres annonce-t-il clairement ce qui suit ?

Si un titre comme :

Informations

ne permet pas de comprendre le contenu, remplacez-le par un texte plus précis.

7. Troisième passe : vérifier les grandes zones sémantiques

La structure générale de

body

peut être :

<body>
    <header>
        ...
        <nav>
            ...
        </nav>
    </header>

    <main>
        ...
    </main>

    <footer>
        ...
    </footer>
</body>

Vérifiez le rôle de chaque zone.

header

contient ici l’en-tête général du site.

nav

contient la navigation principale.

main

contient le contenu propre à la page.

footer

contient les informations de fin de page.

Ne confondez toujours pas :

head

et :

header

8. Vérifier que main ne contient pas tout par habitude

Dans notre page :

header

et :

footer

restent en dehors de

main

.

Le

main

contient ce qui est réellement principal sur cette page.

Nous gardons un seul

main

visible pour cette page.

9. Vérifier les section et article

Nous pouvons avoir :

<section>
    <h2>Mes notes de progression</h2>

    <article>
        <h3>Ma première page complète</h3>
        <p>J’ai appris à structurer une page avec HTML.</p>
    </article>

    <article>
        <h3>Mon formulaire de contact</h3>
        <p>J’ai créé des champs avec des labels correctement associés.</p>
    </article>
</section>

Posez-vous deux questions :

La section représente-t-elle une vraie partie thématique ?
Chaque article constitue-t-il une unité de contenu relativement autonome ?

Si la réponse est non, n’utilisez pas ces éléments uniquement pour entourer du contenu.

10. Quatrième passe : vérifier la navigation

Notre navigation principale peut être :

<nav>
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="apropos.html">À propos</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Vérifiez d’abord les chemins :

index.html
apropos.html
contact.html

Ils doivent correspondre exactement aux noms réels des fichiers.

Puis testez chaque lien.

Ne supposez pas qu’un lien fonctionne simplement parce que son code semble correct.

11. Vérifier les textes des liens

Comparez :

<a href="contact.html">Cliquez ici</a>

et :

<a href="contact.html">Contact</a>

Le deuxième texte reste compréhensible lorsqu’il est lu seul.

Avec un lecteur d’écran, parcourez directement les liens.

Vous devez pouvoir comprendre les destinations sans avoir besoin de relire tout le paragraphe.

12. Cinquième passe : vérifier les images

Pour une image informative, vous pouvez avoir :

<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">

Vérifiez deux choses différentes :

src = le fichier peut-il être chargé ?
alt = l’information utile de l’image est-elle transmise ?

Le texte alternatif ne doit pas simplement être :

image
photo
ordinateur.jpg

Il doit dépendre du rôle de l’image dans son contexte.

13. Vérifier les images décoratives

Si une image est réellement décorative et n’apporte aucune information :

<img src="separateur.png" alt="">

peut être adapté.

Mais ne videz pas automatiquement tous les

alt

.

Posez d’abord la question :

Si l’image disparaît, une information utile disparaît-elle avec elle ?

Si oui, elle n’est probablement pas purement décorative.

14. Sixième passe : vérifier les listes

Regardez une partie comme :

<section>
    <h2>Ce que j’ai appris</h2>

    <ul>
        <li>Créer un document HTML complet</li>
        <li>Organiser les titres et paragraphes</li>
        <li>Créer des liens et des images</li>
        <li>Construire des formulaires accessibles</li>
    </ul>
</section>

L’ordre des éléments n’est pas une procédure obligatoire.

Une liste

ul

est donc adaptée.

Si vous décriviez une succession d’étapes à effectuer dans un ordre précis,

ol

serait plus logique.

15. Vérifier que les listes ne sont pas simulées

Évitez :

<p>
- HTML
- CSS
- PHP
</p>

si vous souhaitez réellement représenter une liste.

Utilisez les éléments adaptés :

ul
ol
li

La structure doit exprimer le sens du contenu.

16. Vérifier les tableaux

Votre page d’accueil peut conserver le tableau construit précédemment :

<table>
    <caption>Rôle des trois pages principales</caption>

    <thead>
        <tr>
            <th scope="col">Page</th>
            <th scope="col">Fichier</th>
            <th scope="col">Rôle</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Accueil</th>
            <td>index.html</td>
            <td>Présenter le site</td>
        </tr>
        <tr>
            <th scope="row">À propos</th>
            <td>apropos.html</td>
            <td>Présenter le projet</td>
        </tr>
        <tr>
            <th scope="row">Contact</th>
            <td>contact.html</td>
            <td>Permettre la prise de contact</td>
        </tr>
    </tbody>
</table>

Vérifiez :

- que les données sont réellement tabulaires ;
- que le tableau possède un

caption

;
- que les en-têtes utilisent

th

;
- que les colonnes utilisent

scope="col"

;
- que les noms de lignes utilisent ici

scope="row"

.

17. Ne pas juger un tableau selon son apparence

Votre tableau peut sembler peu joli sans CSS.

Ce n’est pas un défaut de HTML.

Nous vérifions ici :

le sens
les relations entre les données
les en-têtes
la structure

La présentation visuelle viendra dans le cours CSS.

18. Septième passe : vérifier le formulaire de contact

Ouvrez maintenant :

contact.html

Vérifiez chaque champ.

Pour le nom :

<label for="nom">Votre nom (obligatoire)</label>
<input type="text" id="nom" name="nom" autocomplete="name" required>

Contrôlez la correspondance :

for="nom" -> id="nom"

Puis faites la même vérification pour :

email
telephone
message
copie
contact-email
contact-telephone

Chaque

id

doit être unique.

19. Vérifier le type de chaque champ

Posez la question :

Quelle donnée est réellement demandée ?

Puis contrôlez :

nom -> type="text"
email -> type="email"
telephone -> type="tel"
copie -> type="checkbox"
préférence de contact -> type="radio"
message -> textarea

Ne remplacez pas le téléphone par

type="number"

.

Un téléphone n’est pas une quantité mathématique.

20. Vérifier les champs obligatoires

Les champs obligatoires de notre exemple sont :

nom
email
préférence de contact
message

Ils utilisent

required

.

Le téléphone et la copie restent facultatifs.

L’utilisateur doit aussi pouvoir comprendre visiblement ce qui est obligatoire grâce au texte des labels ou de la légende.

21. Vérifier fieldset et legend

Le groupe des boutons radio peut être :

<fieldset>
    <legend>Comment préférez-vous être contacté ? (obligatoire)</legend>

    <p>
        <input type="radio" id="contact-email" name="contact-prefere" value="email" required>
        <label for="contact-email">Par e-mail</label>
    </p>

    <p>
        <input type="radio" id="contact-telephone" name="contact-prefere" value="telephone">
        <label for="contact-telephone">Par téléphone</label>
    </p>
</fieldset>

Vérifiez que :

- les deux boutons ont des

id

différents ;
- ils partagent le même

name

;
- chaque label correspond au bon

id

;
- la

legend

explique la question commune.

22. Ne pas ajouter des attributs ARIA sans besoin

Si le formulaire possède déjà :

label
fieldset
legend
required

correctement utilisés, n’ajoutez pas automatiquement :

aria-label
aria-required
role

Le HTML natif exprime déjà les informations dont nous avons besoin dans cet exercice.

Notre objectif est une structure claire, pas une accumulation d’attributs.

23. Huitième passe : tester entièrement au clavier

Fermez la souris ou évitez de l’utiliser pendant ce test.

À partir du haut de la page, utilisez le clavier pour parcourir les éléments interactifs.

Vérifiez notamment :

liens de navigation
liens dans le contenu
champs du formulaire
boutons radio
case à cocher
bouton d’envoi

Vous devez pouvoir atteindre et utiliser ces éléments sans devoir cliquer à un endroit précis de l’écran.

24. Tester avec un lecteur d’écran

Si vous utilisez un lecteur d’écran, effectuez plusieurs parcours différents.

Navigation par titres

Vérifiez que la structure :

h1
h2
h3

forme un plan compréhensible.

Navigation par liens

Vérifiez que les textes des liens indiquent leur destination.

Navigation par champs de formulaire

Vérifiez que chaque contrôle possède un nom compréhensible et que le groupe de boutons radio conserve son contexte.

Navigation dans le tableau

Vérifiez que les en-têtes permettent de comprendre les cellules.

Ces tests correspondent à de vraies manières d’utiliser une page.

25. Vérifier les trois pages du site

Ne contrôlez pas seulement

index.html

.

Ouvrez également :

apropos.html
contact.html

Sur chacune, vérifiez :

doctype
lang
charset
title
header
nav
main
h1
footer

Puis vérifiez que la navigation relie correctement les trois pages.

26. Construire une version complète de index.html

Voici une version finale possible de votre page d’accueil utilisant uniquement des notions déjà apprises :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Accueil - Mon premier site HTML</title>
</head>
<body>
    <header>
        <p>Mon premier site HTML</p>

        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="apropos.html">À propos</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Accueil</h1>
        <p>Bienvenue sur le site que je construis pendant mon apprentissage de HTML.</p>

        <section>
            <h2>Ce que j’ai appris</h2>
            <ul>
                <li>Créer un document HTML complet</li>
                <li>Organiser les titres et les paragraphes</li>
                <li>Créer des liens et ajouter des images</li>
                <li>Utiliser des éléments sémantiques</li>
                <li>Construire des tableaux et des formulaires accessibles</li>
            </ul>
        </section>

        <section>
            <h2>Mes notes de progression</h2>

            <article>
                <h3>Ma première page complète</h3>
                <p>J’ai appris à organiser une page avec header, nav, main, section et footer.</p>
            </article>

            <article>
                <h3>Mon formulaire de contact</h3>
                <p>J’ai appris à associer les labels aux champs et à choisir un type de saisie adapté.</p>
            </article>
        </section>

        <section>
            <h2>Mon espace de travail</h2>
            <p>J’utilise un ordinateur et un éditeur de texte pour écrire mes fichiers HTML.</p>
            <img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">
        </section>

        <section>
            <h2>Les pages de mon site</h2>
            <p>Le site contient actuellement trois pages principales.</p>

            <table>
                <caption>Rôle des trois pages principales</caption>

                <thead>
                    <tr>
                        <th scope="col">Page</th>
                        <th scope="col">Fichier</th>
                        <th scope="col">Rôle</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <th scope="row">Accueil</th>
                        <td>index.html</td>
                        <td>Présenter le site</td>
                    </tr>
                    <tr>
                        <th scope="row">À propos</th>
                        <td>apropos.html</td>
                        <td>Présenter le projet</td>
                    </tr>
                    <tr>
                        <th scope="row">Contact</th>
                        <td>contact.html</td>
                        <td>Permettre la prise de contact</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>

    <footer>
        <p>Site créé pour apprendre HTML.</p>
    </footer>
</body>
</html>

27. Ce code n’est pas une formule à recopier aveuglément

L’objectif n’est pas de mémoriser la page précédente ligne par ligne.

Vous devez pouvoir expliquer :

- pourquoi la navigation utilise

nav

;
- pourquoi les liens sont placés dans une liste ;
- pourquoi

main

contient le contenu propre à la page ;
- pourquoi les grandes parties utilisent

section

;
- pourquoi les notes utilisent

article

;
- pourquoi leurs titres utilisent

h3

;
- pourquoi l’image possède un

alt

;
- pourquoi le tableau utilise

th

et

scope

.

Si vous pouvez expliquer ces choix, vous ne recopiez plus seulement du HTML : vous commencez à le concevoir.

28. Repérer une structure incorrecte

Regardez cet exemple :

<main>
    <h1>Accueil</h1>

    <h3>Mes activités</h3>

    <table>
        <tr>
            <td>Page</td>
            <td>Fichier</td>
        </tr>
    </table>

    <img src="ordinateur.jpg">
</main>

Plusieurs points doivent vous faire réagir.

Le titre passe directement de :

h1

à :

h3

sans raison liée à notre hiérarchie.

Le tableau ne possède ni

caption

ni véritables cellules d’en-tête.

L’image ne possède pas d’attribut

alt

.

La page peut néanmoins afficher du contenu.

Votre rôle de développeur est de repérer ces problèmes même lorsque le navigateur ne montre pas une erreur spectaculaire.

29. Corriger en comprenant la raison

Une correction possible serait :

<main>
    <h1>Accueil</h1>

    <section>
        <h2>Mes activités</h2>
        <p>Je poursuis mon apprentissage de HTML.</p>
    </section>

    <table>
        <caption>Pages du site</caption>
        <thead>
            <tr>
                <th scope="col">Page</th>
                <th scope="col">Fichier</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Accueil</th>
                <td>index.html</td>
            </tr>
        </tbody>
    </table>

    <img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">
</main>

Mais le plus important est de savoir pourquoi cette version est plus cohérente.

30. Une liste de contrôle à réutiliser sur vos prochains projets

Avant de considérer une page HTML comme terminée, posez-vous ces questions :

DOCUMENT
- doctype présent ?
- langue indiquée ?
- UTF-8 déclaré ?
- title précis ?
- contenu visible dans body ?

TITRES
- un h1 clair ?
- niveaux cohérents ?
- titres descriptifs ?

STRUCTURE
- header, nav, main et footer utilisés selon leur rôle ?
- section et article seulement lorsqu’ils ont un sens ?

LIENS
- destinations correctes ?
- textes compréhensibles ?

IMAGES
- src correct ?
- alt adapté au contexte ?

LISTES ET TABLEAUX
- ul ou ol selon le sens ?
- tableau uniquement pour des données tabulaires ?
- caption et en-têtes corrects ?

FORMULAIRES
- chaque champ possède un label ?
- for et id correspondent ?
- id uniques ?
- type de champ adapté ?
- required seulement lorsque nécessaire ?
- fieldset et legend pour les groupes de choix ?

TESTS
- navigation au clavier ?
- lecture par titres ?
- lecture par liens ?
- champs compréhensibles ?
- navigation entre toutes les pages ?

Cette liste ne remplace pas votre compréhension.

Elle vous aide à appliquer cette compréhension de manière régulière.

31. Ce que vous savez maintenant réellement faire

Vous êtes parti d’un simple fichier contenant :

Bonjour !

Vous êtes maintenant capable de construire un document structuré contenant :

- un en-tête ;
- une navigation ;
- un contenu principal ;
- des sections ;
- des articles ;
- des titres hiérarchisés ;
- des paragraphes ;
- des listes ;
- des liens ;
- des images accessibles ;
- des tableaux structurés ;
- des formulaires correctement libellés ;
- un pied de page.

Vous savez également relier plusieurs fichiers HTML pour former un petit site.

32. Ce que HTML ne fait toujours pas

Votre site reste volontairement simple visuellement.

C’est normal.

Nous n’avons pas utilisé CSS.

Votre formulaire ne traite pas réellement les données avec un programme serveur.

C’est normal également.

Nous n’avons pas encore étudié PHP.

Le rôle de ce cours était de construire une base solide :

un contenu correctement structuré avant de penser à son apparence ou à son traitement dynamique

33. La suite logique du parcours

Le prochain cours pourra partir de ce site HTML déjà structuré pour apprendre CSS.

Vous pourrez alors modifier :

- les couleurs ;
- les polices ;
- les espacements ;
- les dimensions ;
- la disposition ;
- l’adaptation aux différentes tailles d’écran.

Mais CSS ne devra pas remplacer la structure que vous avez construite ici.

Le HTML conservera le sens du contenu.

Plus tard, PHP pourra rendre certaines parties dynamiques et traiter des formulaires.

Fin du cours HTML

Avant de considérer ce cours comme acquis, assurez-vous que vous pouvez :

créer une page sans recopier mécaniquement un modèle
expliquer le rôle des principaux éléments utilisés
choisir les balises selon le sens du contenu
relier plusieurs pages
construire un formulaire compréhensible
repérer des erreurs de structure
tester votre site autrement qu’en regardant seulement son apparence

Si vous savez faire cela, vous possédez la base nécessaire pour commencer le cours CSS sans mélanger structure et présentation.

Voici un exemple de vérification raisonnée.

Vous trouvez ce code :

<h1>À propos</h1>
<h3>Mon projet</h3>
<p>Je construis mon premier site.</p>

<p>
    <a href="contact.html">Cliquez ici</a>
</p>

<img src="ordinateur.jpg">

Ne demandez pas seulement :

Est-ce que cela s’affiche ?

Analysez chaque partie.

Titres

h1 -> h3

ne correspond pas à la hiérarchie simple que nous avons construite dans ce cours.

Si

Mon projet

est une grande partie directement sous le titre principal, utilisez :

<h2>Mon projet</h2>

Lien

Le texte :

Cliquez ici

ne décrit pas clairement sa destination.

Préférez :

<a href="contact.html">Contacter l’auteur du site</a>

Image

L’image n’a pas de

alt

.

Si elle montre l’espace de travail et apporte cette information, ajoutez par exemple :

<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">

La page corrigée ne se contente pas de « mieux fonctionner ».

Sa structure fournit davantage de sens.

Cette dernière activité est un exercice de synthèse.

Vous allez finaliser votre petit site puis effectuer une vérification complète.

Partie 1 : finaliser index.html

Votre page d’accueil doit contenir au minimum :

1. La structure complète du document avec :

<!doctype html>
html
head
meta charset
title
body

2. Un

header

contenant le nom du site.

3. Un

nav

contenant les trois liens :

Accueil
À propos
Contact

4. Un seul

main

.

5. Un

h1

:

Accueil

6. Une section :

Ce que j’ai appris

contenant une liste non ordonnée d’au moins quatre notions apprises.

7. Une section :

Mes notes de progression

contenant deux

article

avec chacun un

h3

et un paragraphe.

8. Une section :

Mon espace de travail

contenant un paragraphe et :

ordinateur.jpg

avec un texte alternatif adapté.

9. Une section :

Les pages de mon site

contenant le tableau des trois pages :

Accueil
À propos
Contact

avec :

caption
thead
tbody
th
td
scope

10. Un

footer

.

Partie 2 : vérifier apropos.html

Vérifiez que la page possède :

- la structure HTML complète ;
- le même menu de navigation ;
- un seul

main

;
- un

h1

À propos

;
- au moins un paragraphe expliquant le projet ;
- le même

footer

.

Partie 3 : vérifier contact.html

Conservez le formulaire construit dans la leçon précédente.

Vérifiez :

- les labels ;
- les correspondances

for

/

id

;
- l’unicité des

id

;
- les

name

;
-

type="email"

;
-

type="tel"

;
- les boutons radio ;
- la case à cocher ;
-

fieldset

et

legend

;
- les champs obligatoires ;
- le bouton d’envoi.

Partie 4 : test réel

Testez ensuite :

1. tous les liens entre les trois pages ;
2. la navigation au clavier ;
3. la hiérarchie des titres ;
4. l’image et son texte alternatif ;
5. le tableau ;
6. le formulaire ;
7. les champs obligatoires ;
8. une adresse e-mail volontairement incorrecte ;
9. le groupe de boutons radio ;
10. la case à cocher.

Partie 5 : expliquer vos choix

Sans regarder la correction, expliquez avec vos propres mots :

- pourquoi

nav

contient une liste ;
- pourquoi les grandes parties de

main

utilisent ici

section

;
- pourquoi les notes de progression peuvent utiliser

article

;
- pourquoi leurs titres utilisent

h3

;
- pourquoi l’image possède un

alt

;
- pourquoi le tableau utilise

th

et

scope

;
- pourquoi chaque champ de formulaire possède un libellé.

L’exercice est réellement réussi lorsque vous pouvez expliquer la structure, pas seulement lorsque vous avez réussi à recopier le code.

Vous avez terminé le cours HTML.

Vous savez maintenant construire un document avec :

<!doctype html>
html
head
meta
title
body

Vous savez organiser le contenu avec :

h1 à h6
p
ul
ol
li
section
article

Vous savez créer :

a
img
table
form

et utiliser correctement plusieurs attributs importants comme :

lang
href
src
alt
scope
for
id
name
required
autocomplete
value

Vous savez structurer une page avec :

header
nav
main
footer

Vous savez également vérifier :

- la hiérarchie des titres ;
- la cohérence des éléments sémantiques ;
- les chemins des liens ;
- les textes de liens ;
- les textes alternatifs ;
- la structure des listes ;
- les en-têtes de tableaux ;
- les labels des formulaires ;
- les champs obligatoires ;
- le fonctionnement au clavier ;
- la compréhension avec un lecteur d’écran.

Le principe central du cours reste :

HTML décrit le sens et la structure du contenu.

Nous n’avons pas utilisé HTML pour choisir les couleurs ou construire une mise en page visuelle.

Ce sera le rôle du cours CSS.

Nous n’avons pas non plus traité les données du formulaire avec un programme serveur.

Ce sera abordé plus tard avec PHP.

Vous disposez maintenant d’un petit site HTML de plusieurs pages suffisamment structuré pour servir de base aux prochaines étapes du parcours.