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.
HTML comprend plusieurs éléments sémantiques qui définissent les différentes parties d'une page Web :
<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>
<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.
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.
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.
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.