Skip to main content

Introduction

Définition​

Le terme "layout" en HTML et CSS désigne la manière dont les éléments d'une page web sont disposés et organisés visuellement.

Cela inclut la structuration des éléments, leur positionnement les uns par rapport aux autres, leur taille et leur espacement.
En d'autres termes, le layout définit la présentation visuelle et la structure globale de la page web.
Il est utile pour créer une bonne expérience utilisateur cohérente et esthétique. Ainsi que pour assurer une navigation facile et intuitive sur le site.

Le layout en HTML et CSS est généralement créé en utilisant des techniques telles que le positionnement, le dimensionnement, les grilles (grid), les flexbox, les flottants (floats) et d'autres propriétés CSS.

Flux​

Le flux du document ( l'ensemble du html ) fait référence à la manière dont les éléments HTML sont affichés les uns après les autres.

Dans le flux normal du document, les éléments HTML sont affichés les uns après les autres, de haut en bas, dans l'ordre dans lequel ils apparaissent dans le code html et de leur type de base.

Les éléments de type block occupent toute la largeur disponible et commencent sur une nouvelle ligne.
Ceux de type inline ne commencent pas sur une nouvelle ligne et prennent juste la largeur nécessaire à leur contenu.

Types​

Pour le type block on va souvent trouver les éléments suivants:

  • <div> : Divisions de sections génériques dans un document HTML.
  • <p> : Paragraphes de texte.
  • <h1> à <h6> : Titres de niveau 1 à 6 pour structurer le contenu.
  • <ul> : Liste non ordonnée.
  • <ol> : Liste ordonnée.
  • <li> : Élément d'une liste <ul> ou <ol>.
  • <header> : En-tête de section.
  • <footer> : Pied de page de section.
  • <nav> : Section de navigation.
  • <section> : Section générique dans un document HTML.

Les éléments les plus courants de type inline sont:

  • <span> : Utilisé pour le regroupement d'éléments en ligne.
  • <a> : Hyperliens.
  • <strong> : Texte en gras.
  • <em> : Texte en italique.
  • <img> : Images.
  • <input> : Contrôles de saisie tels que les champs de texte, les cases à cocher et les boutons radio.
  • <button> : Boutons.
  • <label> : Étiquettes de formulaire.
  • <select> : Menu déroulant.
  • <textarea> : Zone de texte multiligne.

Le type natif peut être modifier par la propriété display. Ainsi il est possible de rendre une <img> affiché comme un block et un <p> en inline.