HTML - Mises en page

Éléments de mise en page HTML

HTML fournit des éléments qui aident à créer une mise en page structurée et sémantique pour les pages web. Ces éléments comprennent :

• Élément <div> : L'élément <div> est un conteneur qui peut regrouper et styliser le contenu. Il est utilisé comme bloc de construction pour créer des mises en page, car il peut être stylisé avec CSS pour contrôler sa taille, sa position et son apparence.

• Élément <header> : L'élément <header> représente le contenu d'introduction, comme un logo, un menu de navigation ou une bannière. Il est généralement placé en haut d'une page web ou d'une section.

• Élément <nav> : L'élément <nav> contient des liens de navigation vers d'autres pages ou sections de la même page. Il est utilisé pour la navigation principale du site, mais peut aussi être utilisé pour une table des matières ou d'autres types de navigation.

• Élément <main> : L'élément <main> représente le contenu principal d'une page web, à l'exclusion des en-têtes, des pieds de page et des barres latérales. Il devrait être unique à chaque page et contenir le contenu principal.

• Élément <section> : L'élément <section> regroupe du contenu apparenté. Il peut être utilisé pour diviser le contenu principal en sections, comme des chapitres, des sujets ou des thèmes.

• Élément <article> : L'élément <article> représente une composition autonome, comme un article de blog, un article d'actualité ou une critique de produit. Il devrait avoir du sens par lui-même et être distribuable indépendamment.

• Élément <aside> : L'élément <aside> contient du contenu lié au contenu principal, comme des barres latérales, des citations mises en exergue ou des publicités. Il est généralement placé à côté du contenu principal.

• Élément <footer> : L'élément <footer> contient des informations qui apparaissent généralement au bas d'une page web ou d'une section, comme des mentions de copyright, des coordonnées ou des liens vers des documents connexes.

Ces éléments de mise en page HTML offrent un moyen de créer une mise en page structurée et significative pour les pages web. En utilisant ces éléments de manière appropriée, vous pouvez améliorer l'accessibilité, le référencement et la maintenabilité de vos sites web.

Création de mises en page avec HTML

Les éléments de mise en page HTML fournissent les composants de base pour structurer une page web. En utilisant ces éléments de manière stratégique, vous pouvez créer des mises en page bien organisées, sémantiquement significatives et accessibles.

Pour structurer une page web, commencez par identifier les principales sections de votre contenu. Utilisez l'élément <header> pour le contenu introductif, comme un logo ou un menu de navigation. L'élément <nav> peut être utilisé à l'intérieur du header pour regrouper les liens de navigation. L'élément <main> doit contenir le contenu principal de la page, tandis que les éléments <section> peuvent être utilisés pour regrouper du contenu connexe dans la zone de contenu principale. Utilisez les éléments <article> pour des compositions autonomes, comme des articles de blog ou des avis sur des produits. L'élément <aside> est utile pour le contenu qui est lié au contenu principal mais n'en fait pas partie, comme les barres latérales ou les citations en exergue. L'élément <footer> peut contenir des informations qui apparaissent généralement au bas d'une page web, comme les mentions de droits d'auteur ou les coordonnées.

Pour des conceptions plus complexes, vous pouvez imbriquer les éléments de mise en page les uns dans les autres.

<main>
   <section>
      <h1>Section 1</h1>
      <p>Contenu de la section 1.</p>
   </section>
   <section>
      <h1>Section 2</h1>
      <p>Contenu de la section 2.</p>
   </section>
</main>

Cela vous permet de créer des relations hiérarchiques entre différentes parties de votre contenu.

Lors de l'utilisation d'éléments de mise en page HTML, il est important de prendre en compte leur signification sémantique. Les éléments sémantiques décrivent le sens du contenu qu'ils contiennent, plutôt que sa simple présentation. Cela aide les moteurs de recherche, les lecteurs d'écran et d'autres outils à comprendre la structure et l'objectif de votre contenu.

<article>
   <h1>Titre de l'article de blog</h1>
   <p>Ceci est un article de blog.</p>
</article>

L'utilisation d'un élément <article> pour un article de blog indique que le contenu est un article autonome, tandis que l'utilisation d'un élément <div> ne transmet aucune signification sémantique.

L'accessibilité est un autre aspect important à prendre en compte lors de la création de mises en page HTML. En utilisant les éléments sémantiques de manière appropriée, vous pouvez rendre votre contenu plus accessible aux utilisateurs ayant des handicaps.

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<p>Un peu de contenu sous le sous-titre.</p>

Les lecteurs d'écran peuvent utiliser les informations sémantiques pour naviguer plus facilement dans le contenu de la page. L'utilisation de titres clairs et descriptifs (éléments <h1> à <h6>) peut aider les utilisateurs à comprendre l'organisation de votre contenu.

Styliser les mises en page HTML avec CSS

Le CSS (Cascading Style Sheets) contrôle le positionnement et l'apparence des éléments de mise en page HTML. Avec CSS, vous pouvez définir la taille, les marges, le remplissage, les couleurs, les polices et d'autres propriétés visuelles des éléments pour créer des mises en page visuellement attrayantes et bien structurées.

Le modèle de boîte CSS est un concept fondamental dans les mises en page CSS. Chaque élément HTML est traité comme une boîte avec un contenu, un remplissage, des bordures et des marges. En ajustant ces propriétés, vous pouvez contrôler la taille et l'espacement des éléments.

<div class="box">Contenu</div>

<style>
.box {
   width: 200px;
   height: 100px;
   padding: 10px;
   border: 1px solid black;
   margin: 20px;
}
</style>

Le flexbox CSS est un modèle de mise en page qui vous permet de créer des layouts flexibles et réactifs. Avec flexbox, vous pouvez facilement contrôler l'alignement, l'ordre et la taille des éléments dans un conteneur.

<nav class="menu">
   <a href="#">Accueil</a>
   <a href="#">À propos</a>
   <a href="#">Contact</a>
</nav>

<style>
.menu {
   display: flex;
   justify-content: space-between;
}
</style>

La grille CSS est un autre système de mise en page puissant qui vous permet de créer des layouts complexes en deux dimensions. Avec la grille, vous pouvez définir des lignes et des colonnes et placer précisément les éléments dans la structure de la grille.

<div class="grid">
   <header>En-tête</header>
   <nav>Navigation</nav>
   <main>Contenu principal</main>
   <aside>Barre latérale</aside>
   <footer>Pied de page</footer>
</div>

<style>
.grid {
   display: grid;
   grid-template-columns: 1fr 3fr 1fr;
   grid-template-rows: auto 1fr auto;
   grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
}
</style>

Les techniques de design réactif permettent à vos mises en page de s'adapter à différentes tailles d'écran, offrant une expérience de visualisation optimale sur tous les appareils. Les media queries en CSS vous permettent d'appliquer différents styles en fonction de la taille de l'écran ou des caractéristiques de l'appareil.

<style>
.container {
   display: flex;
   flex-direction: row;
}

@media screen and (max-width: 600px) {
   .container {
      flex-direction: column;
   }
}
</style>

Exemples et Exercices

Pour renforcer votre compréhension des mises en page HTML et du style CSS, explorons quelques exemples de mises en page pour des conceptions de sites web courantes et pratiquons leur création et leur stylisation.

<header>
   <h1>Mon Blog</h1>
   <nav>
      <ul>
         <li><a href="#">Accueil</a></li>
         <li><a href="#">Catégories</a></li>
         <li><a href="#">À propos</a></li>
      </ul>
   </nav>
</header>
<main>
   <article>
      <h2>Titre de l'article de blog</h2>
      <p>Le contenu de l'article de blog va ici...</p>
   </article>
   <article>
      <h2>Un autre article de blog</h2>
      <p>Plus de contenu d'article de blog...</p>
   </article>
</main>
<aside>
   <h3>Articles récents</h3>
   <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
      <li><a href="#">Article 3</a></li>
   </ul>
</aside>
<footer>
   <p>&copy; 2023 Mon Blog. Tous droits réservés.</p>
</footer>

<header>
   <h1>Ma Boutique en Ligne</h1>
   <nav>
      <ul>
         <li><a href="#">Accueil</a></li>
         <li><a href="#">Produits</a></li>
         <li><a href="#">Panier</a></li>
      </ul>
   </nav>
</header>
<main>
   <section>
      <h2>Produits vedettes</h2>
      <article>
         <h3>Produit 1</h3>
         <img src="produit1.jpg" alt="Produit 1">
         <p>Description du produit...</p>
         <button>Ajouter au panier</button>
      </article>
      <article>
         <h3>Produit 2</h3>
         <img src="produit2.jpg" alt="Produit 2">
         <p>Description du produit...</p>
         <button>Ajouter au panier</button>
      </article>
   </section>
</main>
<footer>
   <p>&copy; 2023 Ma Boutique en Ligne. Tous droits réservés.</p>
</footer>

<header>
   <h1>Mon Portfolio</h1>
   <nav>
      <ul>
         <li><a href="#">Accueil</a></li>
         <li><a href="#">Projets</a></li>
         <li><a href="#">À propos</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </nav>
</header>
<main>
   <section>
      <h2>Projets en vedette</h2>
      <article>
         <h3>Projet 1</h3>
         <img src="projet1.jpg" alt="Projet 1">
         <p>Description du projet...</p>
      </article>
      <article>
         <h3>Projet 2</h3>
         <img src="projet2.jpg" alt="Projet 2">
         <p>Description du projet...</p>
      </article>
   </section>
</main>
<footer>
   <p>&copy; 2023 Mon Portfolio. Tous droits réservés.</p>
</footer>