Structurez votre page - Happy Learning

HTML STRUCTURÉ = SITE ORGANISÉ

Apprenez les balises sémantiques pour des sites bien organisés

👋 Bienvenue dans l'architecture web !

Découvrez comment structurer vos pages HTML avec les balises sémantiques pour créer des sites bien organisés et accessibles.

L'en-tête de votre site

La balise <header> représente l'en-tête de votre page. On y place généralement le logo et les éléments principaux d'identification.

<header>
    
    <img src="logo.png" alt="Logo">
    <h1>Mon Super Site</h1>
</header>

💡 Bonnes pratiques

• Gardez votre header clair et lisible

• Évitez de trop le surcharger d'éléments

• Placez-le au début de la balise <body>

⚠️ Attention à ne pas confondre !

<header> ≠ <head>

• <header> : partie visible de la page

• <head> : métadonnées invisibles

🏢 LOGO

🔍 📞 🛒

Exemple typique d'un header avec logo et icônes

La balise <footer>

Le pied de page contient les informations de fin : contacts, mentions légales, liens utiles...

<footer>
<p>© 2024 Mon Site</p>
<a href="#">Mentions légales</a>
</footer>

La balise <nav>

Spécialement conçue pour la navigation principale de votre site.

<nav>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

🏠 Accueil • 🛍️ Services • 📞 Contact

© 2024 • Mentions légales • Contact
Politique de confidentialité

Navigation (nav) en haut et Footer en bas

La balise <main>

Contient le contenu principal et unique de votre page. Une seule balise <main> par page !

Les balises <section>

Découpent le contenu en parties thématiques à l'intérieur du <main>.

<section id="introduction">
<h2>Introduction</h2>
<p>Contenu de la section...</p>
</section>

📄 MAIN

SECTION 1

SECTION 2

SECTION 3

Le main contient plusieurs sections thématiques

La balise <aside>

Pour les contenus complémentaires ou secondaires (barre latérale, informations supplémentaires).

<aside>
<h3>En savoir plus</h3>
<p>Contenu complémentaire...</p>
</aside>

La balise <article>

Pour un contenu autonome et indépendant (article de blog, actualité, commentaire).

<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article...</p>
</article>

🎯 Quand utiliser article ?

Utilisez <article> pour du contenu qui pourrait être repris indépendamment sur un autre site :

Articles de blog
Actualités
Commentaires
Posts de forum

Exemple de structure HTML complète

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Ma Page Structurée</title>
</head>
<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <section>...</section>
    <article>...</article>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>
</html>

🏢 HEADER

🧭 NAV

📄 MAIN

SECTION

ARTICLE

📌 ASIDE

📝 FOOTER

Structure typique d'une page web moderne

L'importance de la sémantique

Ces balises n'affectent pas l'apparence visuelle, mais elles sont cruciales pour :

Bénéfice	Explication
🦮 Accessibilité	Les lecteurs d'écran comprennent la structure
🔍 SEO	Les moteurs de recherche analysent mieux le contenu
👨‍💻 Maintenance	Code plus lisible et organisé
📱 Responsive	Structure plus facile à adapter

⚠️ Ce n'est pas pour le design !

Ces balises n'indiquent pas la position des éléments à l'écran. C'est le rôle du CSS !

Vous pouvez très bien avoir un <header> en bas de page si vous le souhaitez.

💡 Flexibilité totale

Rien ne vous empêche de :

Mettre la navigation à droite
Placer les aside en haut
Avoir plusieurs headers dans différentes sections
Imbriquer les balises selon vos besoins

Exercice pratique Robbie Lens

1 Intégrez un <header> dans les pages

2 Ajoutez un <footer>

3 Utilisez <main> pour le contenu principal

4 Placez la navigation dans <nav>

5 Adaptez le CSS en conséquence

❓ Vérifiez vos connaissances

Combien de balises <main> peut-on avoir par page ?

A) Autant qu'on veut

B) Une seule

C) Maximum trois

Quelle balise utiliser pour un menu de navigation ?

A) <menu>

B) <nav>

C) <navigation>

📝 En résumé

<header> : En-tête de page
<footer> : Pied de page
<nav> : Navigation principale
<main> : Contenu principal (unique)
<section> : Section thématique
<article> : Contenu autonome
<aside> : Contenu complémentaire

🎉 FÉLICITATIONS !
Vous maîtrisez la structure HTML

Vos pages web ont maintenant une architecture solide !

🏗️ Structurez votre page HTML

👋 Bienvenue dans l'architecture web !

📄 La balise <header>