Rappel

Nous savons écrire la structure d’une page vierge en html.

See the Pen bases by Benoît Wimart (@benoitwimart) on CodePen.dark

Nous connaissons quelques balises pour traiter le texte h1,h2… p. À cette étape et avant d’aborder les feuilles de styles, il nous manque deux notions importantes, les blocs et les identifiants.

Avant le HTML5

Deux balises à la sémantique neutre existaient avant le html5, <div> et <span>.

See the Pen div & span by Benoît Wimart (@benoitwimart) on CodePen.dark


À priori, ces balises ne servent à rien et pourtant elles sont là pour nous dépanner et notamment mettre en page, peaufiner un texte ou grouper les éléments ; enfin avec un peu de CSS.

  • Div est une balise block.
  • Span est une balise inline.

Class et ID

On continue avec les inutiles du HTML.
Indispensable pour mettre en page et appliquer des manières subtiles des styles, il existe deux attributs.

ID

ID est un identifiant unique.
ID est un identifiant unique.
ID est un identifiant unique.
Il permet d’identifier de manière unique un élément dans la page.
Il est de moins en moins conseillé en HTML/CSS, mais très efficace en JavaScript, il permet aussi de faire des ancres sur des liens.

See the Pen ancre by Benoît Wimart (@benoitwimart) on CodePen.0

<div id="main"><p>Le vif zéphyr jubile sur les kumquats du clown gracieux.</p></div>

Attention, on ne nomme pas son id avec des accents, des espaces et on ne commence pas par un chiffre (html5 autorise les chiffres pour ID). On peut jouer sur la casse, trait d’union ou les tirets bas (exemple : monBloc, mon-bloc, mon_bloc).

Class

L’attribut class permet d’appliquer des comportements similaires à plusieurs éléments à l’aide de CSS (ou JavaScript).
Les class s’utilisent de manière unique ou multiple dans une page. On peut cumuler les class sur un élément à l’aide d’une espace.

<div class="article"><p>Le vif zéphyr jubile sur les kumquats du clown gracieux.</p></div>

Ici sans CSS, aucun effet, mais un style « article » sera appliqué sur ce bloc.

<div class="border serif right"><p>Le vif zéphyr jubile sur les kumquats du clown gracieux.</p></div>

Ici on peut supposer que le texte sera encadré, dans une police avec empattement et à droite.

ID et CLass

Je précise qu’il est possible de mettre un ID et une class.

<div id="main" class="border serif rounded right"><p>Le vif zéphyr jubile sur les kumquats du clown gracieux.</p></div>

HTML5

Nouveaux blocs

Avant le HTML5, les pages étaient composées de nombreuses <div>. Si l’usage d’une <div> à la place d’un autre type de bloc ne change pas l’aspect d’une page, ces nouveaux éléments ajoutent une sémantique aux blocs et le code gagne en lisibilité.
Sans sémantique :

<div></div>
<div>
 <div>
    <h2></h2>
    <p></p> 
  </div>
</div>

Sans sémantique avec des class courantes

<div class="header"></div>
<div class="content">
 <div class="article">
    <h2></h2>
    <p></p> 
  </div>
</div>

En HTML5

<header></header>
<main>
  <article>
    <h2></h2>
    <p></p>
  </article>
</main>

Header

Attention <header> et <head> sont différents !
La balise <header> sert à regrouper des éléments comme le logo, le titre, la navigation d’un site et/ou le formulaire de recherche.
On trouvera le <header> dans le <body>, les <section>, les <article> et <aside>. Il n’est pas obligatoire de mettre un <header> sur tous les blocs.

Notez que <header> n’est pas forcement un bloc horizontal !

Nav

La balise <nav> s’utilise pour marquer la navigation du site vers les pages de celui-ci ou à l’intérieur d’une page.

Footer

Le pied de page peut être présent sur les <article>,<section>,<aside>… ou le <body>. Cet élément doit contenir des informations en relation avec son parent le plus proche, telles que l’auteur, le copyright ou des documents liés.

Article

C’est la balise la plus simple à comprendre, il s’agit d’encadrer une portion de contenu autonome (entête + titre + texte + auteur…).

Section

La balise <section> s’utilise pour grouper par thématique. Généralement, un conteneur générique comme une <div> est plus pertinent. Un site comme SmashingMagazine les utilise pour les encarts publicitaires.

Main

Élément unique par page, il contient le contenu principal variant d’une page à l’autre.

Migraine et remèdes

Schéma

h5d-sectioning-flowchart

Validator

En extension ou sur le site https://validator.w3.org/nu/, en validant votre code vous êtes à l’abri d’une coquille, d’un oubli de fermeture de balise !

Démonstration

Pour finir, voici une page classique avec des éléments et des class. J’ai utilisé une méthodologie proche de BEM pour nommer mes class, une pratique de plus en plus courante. Sans CSS, les class sont ici pour anticiper la suite.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<!--le reste dans le codepen ci-dessous -->
</body>
</html>

See the Pen Structure d’une page by Benoît Wimart (@benoitwimart) on CodePen.dark