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 styliser des blocs, mettre en page, peaufiner un texte ou grouper les éléments. Le CSS aura la main sur plus d’éléments.

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

Petite analogie : Div permet le groupage d’élément comme dans Illustrator ou InDesign et donc certaines opérations d’alignement ou positionnement en quelques clics. En étant courageux ou stupide, on pourrait faire sans, cela dit, attention à ne pas abuser des groupes (et donc des div) en print comme en code.

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 pour améliorer les sélecteurs CSS.

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.
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, les traits d’union (très à la mode) ou les tirets bas (exemple : monBloc, mon-bloc, mon_bloc).

Class

L’attribut class permet d’appliquer des comportements similaires à un ou 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 article-sport"><p>Le vif zéphyr jubile sur les kumquats du clown gracieux.</p></div>

Ci-dessus sans CSS, aucun effet, mais les styles « article et article-sport » seront appliqués sur ce bloc.

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

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

ID et CLass

Précision : il est possible de cumuler un ID et une ou plusieurs 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, mais 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 à la confusion <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 ; pour être valide, il doit contenir un titre de section (h1, h2, h3…). Généralement, un conteneur générique comme une <div> est plus fréquent. Un site comme SmashingMagazine utilise <section> pour les encarts publicitaires.

Main

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

Migraines 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. Codepen sans CSS, les class et leur nom 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