Aller au contenu

Les blocs HTML

Qu'est-ce qu'un bloc HTML ?

En HTML, une balise de type bloc est un élément qui occupe toute la largeur disponible de son parent, créant ainsi une "boîte".

Le bloc crée un retour de ligne (ENTER) avant et après sa boîte, forçant tout contenu qui le suit à s'afficher en dessous.

Caractéristiques d'une balise de type bloc:

  • Elle s'étend généralement sur toute la largeur de l'écran ou de son parent, même si son contenu est plus petit.
  • Elle commence automatiquement sur une nouvelle ligne et tout élément qui suit sera positionné sur une autre ligne.
  • Elle peut contenir d'autres éléments de type bloc ou en ligne (inline).

Exemple

Balises de type bloc par défaut

Plusieurs balises sont de type bloc par défaut :

  • Balises structurelles :

    <header>, <nav>, <main>, <footer>, <section>

  • Balises de titres

    <h1> à <h6>

  • Balise de paragraphe <p>

  • Balises de listes

    <ol>, <ul>, <li>

  • Bloc générique <div> (utilisé pour traiter du contenu en bloc dans le CSS)

Blocs principaux et de division de page

Chaque bloc a son utilité.

Une page HTML sera toujours construite de la même façon :

Exemple

Ces blocs principaux contiennent d'autres balises de contenu de page.

Ils servent à :

  • structurer la page
  • traiter les contenus en blocs par le CSS
  • mieux comprendre la page par les moteurs de recherche

Dans ces blocs, on pourra subdiviser le contenu en d'autres grands blocs de contenu grâce aux balises :

  • <section> : une division de la page qui inclut au moins un titre et un paragraphe. Indique que le contenu principal comprend des sections indépendantes.
  • <div> : une division de la page qui n'est pas une section, mais qui doit être traitée en bloc par le CSS, entre autres.

Exemple

Exemple

Blocs côte à côte

Les blocs prennent 100% de la largeur et font des retours de ligne...

Donc, si on veut positionner des blcos de contenu côte à côte, on doit modifier ces comportements.

En CSS :

div {
    display : inline-block;
    width: 30%;
}
  1. On modifie le type de balise de block par défaut à inline-block (bloc qui ne fait plus de retour de ligne).
  2. On change ensuite la largeur du bloc de 100% par défaut à 30%, laissant ainsi de l'espace à côté pour autre chose.