Éléments et techniques de mise en page HTML

Les sites Web affichent souvent du contenu dans plusieurs colonnes (comme un magazine ou un journal).

Éléments de mise en page HTML

HTML comporte plusieurs éléments sémantiques qui définissent les différentes parties d'une page Web :

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<header>- Définit un en-tête pour un document ou une section <nav>- Définit un ensemble de liens de navigation <section>- Définit une section dans un document <article> - Définit un contenu indépendant et autonome <aside> - Définit le contenu en dehors du contenu (comme une barre latérale) <footer> - Définit un pied de page pour un document ou une section <details> - Définit des détails supplémentaires que l'utilisateur peut ouvrir et fermer à la demande <summary>- Définit un titre pour l' <details>élément Vous pouvez en savoir plus sur les éléments sémantiques dans notre chapitre Sémantique HTML .

Techniques de mise en page HTML

Il existe quatre techniques différentes pour créer des mises en page multicolonnes. Chaque technique a ses avantages et ses inconvénients :

• Cadre CSS
• Propriété flottante CSS
• Boîte flexible CSS
• Grille CSS

Cadres CSS

Si vous souhaitez créer votre mise en page rapidement, vous pouvez utiliser un framework CSS, comme W3.CSS ou Bootstrap .

Disposition flottante CSS

Il est courant de créer des mises en page Web entières à l'aide de la floatpropriété CSS. Float est facile à apprendre - il vous suffit de vous souvenir du fonctionnement des propriétés floatet clear. Inconvénients : les éléments flottants sont liés au flux de documents, ce qui peut nuire à la flexibilité. En savoir plus sur float dans notre chapitre CSS Float and Clear .

Mise en page CSS Flexbox

L'utilisation de flexbox garantit que les éléments se comportent de manière prévisible lorsque la mise en page doit s'adapter à différentes tailles d'écran et à différents périphériques d'affichage.

En savoir plus sur flexbox dans notre chapitre CSS Flexbox .

Disposition de la grille CSS

Le module CSS Grid Layout offre un système de mise en page basé sur une grille, avec des lignes et des colonnes, facilitant la conception de pages Web sans avoir à utiliser de flotteurs et de positionnement.

Apprenez-en plus sur les grilles CSS dans notre chapitre CSS Grid Intro .