HTML Éléments et Techniques de Mise en Page


Les sites Web affichent souvent du contenu en plusieurs colonnes, comme un magazine ou un journal.


Exemple

Villes

Londres

Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine de plus de 13 millions d'habitants.

Située sur la rivière Thames, Londres est un important établissement depuis deux millénaires, son histoire remontant à sa fondation par les Romains, qui l'ont nommée Londinium.

Pied de page

Essayez-le vous-même »

Éléments de Mise en Page HTML

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

Éléments Sémantiques HTML5
<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 un contenu à part du contenu principal (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'élément <details>
Éléments Sémantiques HTML5
  • <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 un contenu à part du contenu principal (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'élément <details>

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, chacune ayant ses avantages et ses inconvénients :

  • Frameworks CSS
  • Propriété float CSS
  • Flexbox CSS
  • Grille CSS


Frameworks CSS

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

Avez-vous déjà entendu parler de formation-ti.org Spaces ? Ici, vous pouvez créer votre site Web à partir de zéro ou utiliser un modèle.

Commencez gratuitement ❯

* aucune carte de crédit requise


Mise en Page CSS Float

Vous pouvez créer des mises en page Web entières en utilisant la propriété CSS float . Le float est facile à apprendre ; il suffit de se rappeler comment fonctionnent les propriétés float et clear . Inconvénients : Les éléments flottants sont liés au flux du document, ce qui peut nuire à la flexibilité. En savoir plus sur le float dans notre chapitre CSS Float et Clear .

Exemple

Villes

Londres

Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine de plus de 13 millions d'habitants.

Située sur la rivière Thames, Londres est un important établissement depuis deux millénaires, son histoire remontant à sa fondation par les Romains, qui l'ont nommée Londinium.

Pied de page

Essayez-le vous-même »

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 dispositifs d'affichage.

En savoir plus sur flexbox dans notre chapitre CSS Flexbox .

Exemple

Villes

Londres

Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine de plus de 13 millions d'habitants.

Située sur la rivière Thames, Londres est un important établissement depuis deux millénaires, son histoire remontant à sa fondation par les Romains, qui l'ont nommée Londinium.

Pied de page

Essayez-le vous-même »

Mise en Page CSS Grid

Le module de mise en page CSS Grid 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 des floats et du positionnement.

En savoir plus sur les grilles CSS dans notre chapitre Introduction à CSS Grid .