L'élément <main>

Sarenza Cuir Noir Officer Made 8 59210 Velours By Shoe Xrg

Depuis quelques années, HTML propose un meilleur découpage sémantique des pages et applications web pour éviter la "divite", l'abus d'éléments Blue Basses Sneakers Femme Marine Converse Star Chaussures One Baskets 8tFSq<div> pour regrouper chaque bloc de contenu.

Dès les premières versions de HTML5, les éléments sectionnant ont vu le jour : <section>, <nav>, <article>, <aside>, <header>, <footer>White Femme Chaussures All Basses Sneakers Star Chuck Cool Baskets Taylor Ox Converse Grey Hq670f ont été assez bien compris et se sont révélés utiles.

Par la suite, ils ont été complétés par <main> pour définir un regroupement encore plus dédié au contenu principal d'un document ou d'une application... par opposition à des blocs communs White Baskets Gold Metallic Lp Sneakers Converse Ox Leather Chaussures Femme Pro Basses Light nRgwxUZ<header> et <footer> qui ne changeront que peu d'une page à l'autre.

Un objectif principal de <main> est de lui conférer implicitement le rôle ARIA du même nom : role="main".

Assez À Aco Femme Estivales Perforations Trotteurs Élégant Bleu Crqtwr

Spécificités

Il était défini, de manière relativement logique deux critères :

  1. Hiérarchiquement <main> ne peut être contenu dans un autre élément sectionnant (cités précédemment ; idéalement il devrait être descendant de html, body, div, ou form).

  2. Il ne pouvait y avoir plus d'un élément <main> : désormais, avec les retours d'expériences et cas pratiques, on autorise l'usage de plusieurs <main> à partir du moment où il n'y en a qu'un d'actif à la fois et que les autres sont "désactivés" par un attribut Chaussures Femme nu Sandales Yellow Apparence Pieds Bonne Noir Mellow qtHvPwahidden.

<body>
  <header></header>
  <main></main>
  <main hidden></main>
  <main hidden></main>
  <footer></footer>
</body>

Quel est l'intérêt ? Pouvoir concevoir une page dont le contenu principal changerait, serait activé par étapes successives par exemple en JavaScript par mouvement des attributs hiddenStan Assez blacra Smith Og Élégant Homme Pk Ftwbla ftwbla Adidas xr4wxzqnO. On pourrait ici imaginer de débloquer un contenu si l'utilisateur s'identifie, ou de passer d'une étape à l'autre d'un processus d'achat.

En voici une démo minimaliste :

See the Pen Main + hidden by Alsacreations (Paris Clutch À Imprimée kenzo Clothing shirt boutique Signature Soldes T Kalifornia Homme Kenzo sac wOPRqZCc) on CodePen.

hidden

Attention, ne confondez pas l'attribut Baskets Homme Chaussures Adidas Assez Élégant Bleu ptHStqhidden avec une façon de masquer graphiquement des contenus comme on peut le faire en CSS avec display: none ou Cuivre Adidas Élégant Métallisé Femme Superstar Women's Blanc Assez W Boost Et pZnqYTwwSvisibility: hidden. La signification est plus forte ici. Bien entendu les éléments seront cachés mais on considérera aussi qu'ils ne sont pas pertinents (ou ne le sont plus / pas encore), ils ne seront pas lus par un lecteur d'écran, ou encore pas affichés/masqués selon le contexte d'après une media query. Cet attribut est global et n'est pas réservé seulement à <main> mais applicable à toute balise HTML.

Ce n'est pas une obligation donnée par la spécification mais on pourra retenir de manière mnémotechnique que d'ordinaire les "mains" sont entre la tête (header) et les pieds (footer).

Sources :
https://www.w3.org/TR/html52/grouping-content.html#the-main-element
https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-elementFemme Assez Alpina Cuir Marine En Élégant Sandale Bleu qpwZqv0

Commentaires

Noir Ara Assez Bari Élégant Femme IqcwgvAg

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Made Velours By Cuir Sarenza 59210 Shoe Noir Xrg Officer 8

Pas encore inscrit ?Cuir Noir 59210 Sarenza Velours Officer 8 Shoe Xrg By Made C'est très simple et gratuit.