Bienvenue dans Créer un thème Repo-Ready ! Dans l’article précédent, on a mis en place notre environnement de travail. Ce qu’on va faire maintenant, c’est passer en revue le template que je vous propose.
Dans le navigateur
D’abord, téléchargez les fichiers associés à cet article : 1-5 – Passage en revue du prototype.zip
Le template est assez simple. On a un grand header, avec une zone de logo et un menu caché par défaut, quel que soit la taille de l’écran. On a le titre du site ou de la page, avec une description au-dessus.
En-dessous on a une zone de contenu à gauche, avec une sidebar à droite, tout ce qu’il y a de plus classique.
Pour chaque entrée, on a un header avec le titre et des métas, le edit-post-link, et le contenu en-dessous.
Pour vous donner un exemple, le edit-post-link fait partie des éléments recommandés. Les utilisateurs de thème s’attendent à ce qu’un utilisateur connecté puisse aller éditer le post rapidement. On peut mettre ce lien en footer du post, juste après le contenu, ….. Peu importe. Mais il est recommandé de le mettre. C’est un élément d’UX attendu, simplement.
Ensuite, on a un footer, avec les tags et les commentaires.
Ensuite, on a les liens pour naviguer entre les posts. Deux gros boutons, simplement. Encore une fois, c’est un élément d’UX attendu.
En footer principal, on va avoir une zone de widget, et un footer plus simple en-dessous, avec les crédits du thème et quelques liens sociaux.
Le menu apparaît en cliquant sur le bouton. Il apparaît en glissant de la droite.
Dans la colonne de menu, on a un champ de recherche, et le menu qui est présenté simplement dans une bête liste, puis on a aussi une zone de widget. Du coup, cela permet aux utilisateurs d’utiliser soit la sidebar principale du blog, soit de cacher les widgets dans le menu et de laisser la partie contenu en une seule colonne, ou d’utiliser les deux.
L’HTML
On a une structure HTML assez simple.
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22fr%22%20class%3D%22no-js%22%3E%0A%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%20%20%20%20%3Clink%20rel%3D%22profile%22%20href%3D%22http%3A%2F%2Fgmpg.org%2Fxfn%2F11%22%3E%0A%20%20%20%20%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DAudiowide%7CExo%2B2%3A300%2C300i%2C400%2C400i%2C700%2C700i%26amp%3Bsubset%3Dlatin-ext%22%20rel%3D%22stylesheet%22%3E%0A%20%20%20%20%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DSpace%2BMono%22%20rel%3D%22stylesheet%22%3E%0A%20%20%20%20%3Clink%20href%3D%22style.css%22%20rel%3D%22stylesheet%22%3E%0A%20%20%20%20%3Cscript%20src%3D%22js%2Fdetection.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fevil-icons%2F1.9.0%2Fevil-icons.min.css%22%3E%0A%20%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fevil-icons%2F1.9.0%2Fevil-icons.min.js%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E” message=”Balise ” highlight=”” provider=”manual”/]
Dans la balise <head> on va charger les scripts et styles. On utilise une seule feuille de styles et des icônes venant de http://evil-icons.io.
En ce qui concerne les polices de caractères, on va utiliser de simples Google Fonts. On utilise Exo 2 (https://fonts.google.com/specimen/Exo+2) comme police principale et Audiowide (https://fonts.google.com/specimen/Audiowide) pour les titres h1, h2, h3. Pour le code, on utilise Space Mono (https://fonts.google.com/specimen/Space+Mono).
Pour ces icônes, il faut simplement inclure un petit script js qui va remplacer nos <span> vides avec les svg qui vont bien.
[pastacode lang=”markup” manual=”%3Cbody%20class%3D%22medium-content-area%20sidebar-right%20medium-body-text%20large-headings%20large-icons%22%3E%0A%3Cdiv%20id%3D%22page%22%20class%3D%22site%22%3E%0A%20%20%20%20%0A%20%20%20%20%3Ca%20class%3D%22skip-link%20screen-reader-text%22%20href%3D%22%23content%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%3ESkip%20to%20content%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-arrow-right%22%3E%3C%2Fspan%3E%0A%20%20%20%20%3C%2Fa%3E%0A%0A%09%3Cheader%20id%3D%22masthead%22%20class%3D%22site-header%22%20role%3D%22banner%22%3E%0A%09″ message=”Balise ” highlight=”” provider=”manual”/]
Dans le <body> il y a quelques classes avec des réglages par défaut. On en parlera bien plus tard, quand on parlera du customizer.
Tout de suite en-dessous, on a un skip link, qui va permettre de passer direct au contenu. C’est une bonne pratique d’accessibilité qui permet aux utilisateurs utilisant un screen reader de ne pas se retaper la lecture de tout le header et toute la navigation.
[pastacode lang=”markup” manual=”%3Cheader%20id%3D%22masthead%22%20class%3D%22site-header%22%20role%3D%22banner%22%3E%0A%09%09%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22header-info%22%3E%0A%09%09%09%3Ch1%20class%3D%22header-title%22%3ECarbon%3C%2Fh1%3E%0A%09%09%09%3Cp%20class%3D%22header-meta%22%3EA%20bold%20theme%20for%20bold%20bloggers%3C%2Fp%3E%0A%09%09%3C%2Fdiv%3E%0A%0A%09%09%3Cnav%20id%3D%22site-navigation%22%20class%3D%22main-navigation%22%20role%3D%22navigation%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22index.html%22%20class%3D%22custom-logo-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!–%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2250px%22%20height%3D%2250px%22%3E%3Crect%20x%3D%220%22%20fill%3D%22none%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3Cg%20stroke%3D%22white%22%20fill%3D%22transparent%22%3E%3Cpath%20d%3D%22M14.48%2011.06L7.41%203.99l1.5-1.5c.5-.56%202.3-.47%203.51.32%201.21.8%201.43%201.28%202.91%202.1%201.18.64%202.45%201.26%204.45.85zm-.71.71L6.7%204.7%204.93%206.47c-.39.39-.39%201.02%200%201.41l1.06%201.06c.39.39.39%201.03%200%201.42-.6.6-1.43%201.11-2.21%201.69-.35.26-.7.53-1.01.84C1.43%2014.23.4%2016.08%201.4%2017.07c.99%201%202.84-.03%204.18-1.36.31-.31.58-.66.85-1.02.57-.78%201.08-1.61%201.69-2.21.39-.39%201.02-.39%201.41%200l1.06%201.06c.39.39%201.02.39%201.41%200z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22img%2Flogo.svg%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%0A%09%09%09%3Cbutton%20class%3D%22menu-toggle%22%20aria-controls%3D%22primary-menu%22%20aria-expanded%3D%22false%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-navicon%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EMenu%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22menu-wrapper%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cheader%20class%3D%22menu-header%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22menu-title%22%3EMenu%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22menu-toggle%22%20aria-controls%3D%22primary-menu%22%20aria-expanded%3D%22false%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-close%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3EClose%20Menu%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fheader%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cform%20action%3D%22%22%20method%3D%22GET%22%20name%3D%22s%22%20class%3D%22search-form%22%20role%3D%22search%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ESearch%20for%3A%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22search%22%20class%3D%22search-field%22%20placeholder%3D%22Search%20%E2%80%A6%22%20value%3D%22%22%20name%3D%22s%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-search%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fform%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%20class%3D%22primary-menu%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EMenu%20Item%201%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%20class%3D%22sub-menu%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20menu%20item%201%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20menu%20item%202%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%20class%3D%22sub-menu%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20sub%20menu%20item%201%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20sub%20menu%20item%202%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20sub%20menu%20item%203%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20sub%20menu%20item%204%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20menu%20item%203%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%23%22%3ESub%20menu%20item%204%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EMenu%20Item%202%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EMenu%20Item%203%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EMenu%20Item%204%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%20class%3D%22social-icons%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3EFacebook%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-sc-facebook%22%3E%3Cnoscript%3EFacebook%3C%2Fnoscript%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ETwitter%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-sc-twitter%22%3E%3Cnoscript%3ETwitter%3C%2Fnoscript%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3EGoogle%20Plus%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-sc-google-plus%22%3E%3Cnoscript%3EGoogle%20Plus%3C%2Fnoscript%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Caside%20id%3D%22menu-widget-area%22%20class%3D%22menu-widget-area%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%20menu-widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EText%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Houston%2C%20Tranquillity%20Base%20here.%20The%20Eagle%20has%20landed.%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Curious%20that%20we%20spend%20more%20time%20congratulating%20people%20who%20have%20succeeded%20than%20encouraging%20people%20who%20have%20not.%0A%20%20%20%20%20%20%20%20The%20sky%20is%20the%20limit%20only%20for%20those%20who%20aren’t%20afraid%20to%20fly!%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%20menu-widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EList%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%201%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%202%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%203%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%20menu-widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EImage%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22img%2Fcoffee.jpg%22%20%2F%3E%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Faside%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%09%09%3C%2Fnav%3E%3C!–%20%23site-navigation%20–%3E%0A%0A%09%3C%2Fheader%3E%3C!–%20%23masthead%20–%3E%0A” message=”Balise
Dans le <header>, on a deux éléments :
- Une
<div>avec le titre et description du titre. - un élément
<nav>qui va contenir notre navbar (Logo plus bouton Menu) et toute la colonne menu.
Sémantiquement, c’est mieux de placer le titre du site avant la navigation, donc j’ai opté pour ce markup et j’ai manipulé la position des éléments avec Flexbox.
Dans la navigation (<nav class="main-navigation">), on a le logo, le bouton de navigation, et la zone de menu qui est positionnée avec position: absolute, donc qui sort du flow du document, ce qui est bien pratique ici.
Dans notre zone de menu, on a un header, avec un titre et le bouton pour fermer le menu, le formulaire de recherche, et une <ul class="primary-menu"> pour le menu. On a aussi une autre <ul> pour les liens de réseau sociaux. La zone de widget est un <aside> et chaque widget une <section>.
On peut fermer le menu en cliquant sur la croix, à l’extérieur du menu ou alors en appuyant sur echap.
[pastacode lang=”markup” manual=”%3Cdiv%20id%3D%22content%22%20class%3D%22site-content%22%3E%0A%0A%20%20%20%20%20%20%20%20%3Cmain%20id%3D%22primary%22%20class%3D%22content-area%22%20role%3D%22main%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Carticle%20class%3D%22post%20hentry%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cheader%20class%3D%22entry-header%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22entry-title%22%3E%3Ca%20title%3D%22Basic%20text%20elements%22%20href%3D%22%22%20rel%3D%22bookmark%22%3EBasic%20Text%20elements%3C%2Fa%3E%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20class%3D%22entry-meta%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22byline%22%3EPosted%20in%20%3Ca%20href%3D%22%22%3EWordPress%3C%2Fa%3E%2C%20on%20%3Ca%20href%3D%22%22%3EAugust%209th%2C%202017%3C%2Fa%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Edit%20this%20post%22%20href%3D%22%22%20class%3D%22post-edit-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EEdit%20this%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-pencil%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%3C!–%20.entry-meta%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fheader%3E%3C!–%20.entry-header%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22entry-content%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EThis%20is%20a%20standard%20paragraph%20created%20using%20the*%20WordPress%20TinyMCE%20text%20editor.%20It%20has*%20a%20%3Cstrong%3Estrong%20tag%3C%2Fstrong%3E%2C%20an%20%3Cem%3Eem%20tag%3C%2Fem%3E%20and%20a%20%3Cdel%3Estrikethrough%3C%2Fdel%3E%20which%20is%20actually%20just%20the%20del%20element.%20There%20are%20a%20few%20more%20inline%20elements%20which%20are%20not%20in%20the%20WordPress%20admin%20but%20we%20should%20check%20for%20incase%20your%20users%20get%20busy%20with%20the%20copy%20and%20paste.%20These%20include%20%3Ccite%3Ecitations%3C%2Fcite%3E%2C%20%3Cabbr%20title%3D%22abbreviation%22%3Eabbr%3C%2Fabbr%3E%2C%20bits%20of%20%3Ccode%3Ecode%3C%2Fcode%3E%20and%20%3Cvar%3Evariables%3C%2Fvar%3E%2C%20%3Cq%3Einline%20quotations%3C%2Fq%3E%2C%20%3Cins%20datetime%3D%222011-12-08T20%3A19%3A53%2B00%3A00%22%3Einserted%20text%3C%2Fins%3E%2C%20text%20that%20is%20%3Cs%3Eno%20longer%20accurate%3C%2Fs%3E%20or%20something%20%3Cmark%3Eso%20important%3C%2Fmark%3E%20you%20might%20want%20to%20mark%20it.%20We%20can%20also%20style%20subscript%20and%20superscript%20characters%20like%20C0%3Csub%3E2%3C%2Fsub%3E%2C%20here%20is%20our%202%3Csup%3End%3C%2Fsup%3E%20example.%20If%20they%20are%20feeling%20non-semantic%20they%20might%20even%20use%20%3Cb%3Ebold%3C%2Fb%3E%2C%20%3Ci%3Eitalic%3C%2Fi%3E%2C%20%3Cbig%3Ebig%3C%2Fbig%3E%20or%20%3Csmall%3Esmall%3C%2Fsmall%3E%20elements%20too.%26nbsp%3BIncidentally%2C%20these%20HTML4.01%20tags%20have%20been%20given%20new%20life%20and%20semantic%20meaning%20in%20HTML5%2C%20you%20may%20be%20interested%20in%20reading%20this%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22HTML5%20Semantics%22%20href%3D%22http%3A%2F%2Fcsswizardry.com%2F2011%2F01%2Fhtml5-and-text-level-semantics%22%3Earticle%20by%20Harry%20Roberts%3C%2Fa%3E%20which%20gives%20a%20nice%20excuse%20to%20test%20a%20link.%26nbsp%3B%26nbsp%3BIt%20is%20also%20worth%20noting%20in%20the%20%22kitchen%20sink%22%20view%20you%20can%20also%20add%20%3Cspan%20style%3D%22text-decoration%3A%20underline%3B%22%3Eunderline%3C%2Fspan%3E%26nbsp%3Bstyling%20and%20set%20%3Cspan%20style%3D%22color%3A%20%23ff0000%3B%22%3Etext%20color%3C%2Fspan%3E%20with%20pesky%20inline%20CSS.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22text-align%3A%20left%3B%22%3EAdditionally%2C%20WordPress%20also%20sets%20text%20alignment%20with%20inline%20styles%2C%20like%20this%20left%20aligned%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22text-align%3A%20right%3B%22%3EThis%20is%20a%20right%20aligned%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22text-align%3A%20justify%3B%22%3EThis%20is%20a%20justified%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22padding-left%3A%2030px%3B%22%3EFinally%2C%20you%20also%20have%20the%20option%20of%20an%20indented%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%20%3Cp%3EAnd%20last%2C%20and%20by%20no%20means%20least%2C%20users%20can%20also%20apply%20the%20%3Ccode%3EAddress%3C%2Fcode%3E%20tag%20to%20text%20like%20this%3A%3C%2Fp%3E%20%3Caddress%3E123%20Example%20Street%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Testville%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20West%20Madeupsburg%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CSSland%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%201234%3C%2Faddress%3E%20%3Cp%3E…so%20there%20you%20have%20it%2C%20all%20our%20text%20elements%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.entry-content%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cfooter%20class%3D%22entry-footer%22%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22tags-links%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ETags%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-tag%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3EBasic%20Text%3C%2Fa%3E%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3ETest%3C%2Fa%3E%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3EWordPress%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22comments-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%22%20title%3D%22Go%20to%20comments%22%3E3%20Comments%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-comment%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffooter%3E%3C!–%20.entry-footer%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Farticle%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Carticle%20class%3D%22post%20hentry%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cheader%20class%3D%22entry-header%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22entry-title%22%3E%3Ca%20title%3D%22Headings%22%20href%3D%22%22%20rel%3D%22bookmark%22%3EHeadings%3C%2Fa%3E%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22entry-meta%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22byline%22%3EPosted%20in%20%3Ca%20href%3D%22%22%3EWordPress%3C%2Fa%3E%2C%20on%20%3Ca%20href%3D%22%22%3EAugust%209th%2C%202017%3C%2Fa%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Edit%20this%20post%22%20href%3D%22%22%20class%3D%22post-edit-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EEdit%20this%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-pencil%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.entry-meta%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fheader%3E%3C!–%20.entry-header%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22entry-content%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3ELevel%20One%20Heading%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3ELevel%20Two%20Heading%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch3%3ELevel%20Three%20Heading%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch4%3ELevel%20Four%20Heading%3C%2Fh4%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch5%3ELevel%20Five%20Heading%3C%2Fh5%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch6%3ELevel%20Six%20Heading%3C%2Fh6%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.entry-content%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cfooter%20class%3D%22entry-footer%22%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22tags-links%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ETags%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-tag%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3EHeadings%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22comments-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%22%20title%3D%22Go%20to%20comments%22%3ENo%20Comments%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-comment%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffooter%3E%3C!–%20.entry-footer%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Farticle%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Carticle%20class%3D%22post%20hentry%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cheader%20class%3D%22entry-header%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22entry-title%22%3E%3Ca%20title%3D%22Lists%22%20href%3D%22%22%20rel%3D%22bookmark%22%3ELists%3C%2Fa%3E%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22entry-meta%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22byline%22%3EPosted%20in%20%3Ca%20href%3D%22%22%3EWordPress%3C%2Fa%3E%2C%20on%20%3Ca%20href%3D%22%22%3EAugust%209th%2C%202017%3C%2Fa%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Edit%20this%20post%22%20href%3D%22%22%20class%3D%22post-edit-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EEdit%20this%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-pencil%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.entry-meta%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fheader%3E%3C!–%20.entry-header%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22entry-content%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EUnordered%20list%20item%20one.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EUnordered%20list%20item%20two.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EUnordered%20list%20item%20three.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EUnordered%20list%20item%20four.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EBy%20the%20way%2C%20Wordpress%20does%20not%20let%20you%20create%20nested%20lists%20through%20the%20visual%20editor.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Col%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EOrdered%20list%20item%20one.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EOrdered%20list%20item%20two.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EOrdered%20list%20item%20three.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EOrdered%20list%20item%20four.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EBy%20the%20way%2C%20Wordpress%20does%20not%20let%20you%20create%20nested%20lists%20through%20the%20visual%20editor.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fol%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.entry-content%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cfooter%20class%3D%22entry-footer%22%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22tags-links%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ETags%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-tag%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3ELists%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22comments-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%22%20title%3D%22Go%20to%20comments%22%3ENo%20Comments%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-comment%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffooter%3E%3C!–%20.entry-footer%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Farticle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cnav%20class%3D%22navigation%20posts-navigation%22%20role%3D%22navigation%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22screen-reader-text%22%3EPosts%20navigation%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22nav-links%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22nav-previous%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22index-older.html%22%20class%3D%22next-posts-link%20button%22%20rel%3D%22prev%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-arrow-left%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EOlder%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!–%20%3Cdiv%20class%3D%22nav-next%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%20class%3D%22previous-posts-link%20button%22%20rel%3D%22next%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3ENewer%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-arrow-right%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fnav%3E%0A%0A%20%20%20%20%20%20%20%20%3C%2Fmain%3E%3C!–%20%23main%20–%3E%0A%0A%20%20%20%20%20%20%20%20%3Caside%20id%3D%22secondary%22%20class%3D%22widget-area%22%20role%3D%22complementary%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EText%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EHouston%2C%20Tranquillity%20Base%20here.%20The%20Eagle%20has%20landed.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3ECurious%20that%20we%20spend%20more%20time%20congratulating%20people%20who%20have%20succeeded%20than%20encouraging%20people%20who%20have%20not.The%20sky%20is%20the%20limit%20only%20for%20those%20who%20aren’t%20afraid%20to%20fly!%3C%2Fp%3E%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EList%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%201%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%202%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%203%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EImage%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22img%2Fcoffee.jpg%22%20%2F%3E%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%3C%2Faside%3E%3C!–%20%23secondary%20–%3E%0A%20%20%20%20%0A%20%20%20%20%3C%2Fdiv%3E%3C!–%20%23content%20–%3E” message=”Balise ” highlight=”” provider=”manual”/]
Dans la zone de contenu, on a un <main> avec nos articles et un <aside> avec les widgets, simplement. Chaque article est un <article> avec un <header>, <div class="entry-content">, <footer>.
Sous les articles on a un élément <nav> avec les liens de navigation. Le markup ici est un peu particulier, mais en fait je triche un peu. C’est le markup utilisé par WordPress et les fonctions qui affiche la navigation entre les posts. Je savais que j’allais utiliser cette fonction, donc j’ai repris le markup, et j’ai fait mes styles en fonction de ce markup.
Si j’avais fait mon propre balisage, ça aurait été plus difficile de l’intégrer dans WordPress plus tard. Ce balisage donne un titre pour les screen readers, ce qui est bien pour l’accessibilité.
[pastacode lang=”markup” manual=”%3Cfooter%20id%3D%22colophon%22%20class%3D%22site-footer%22%20%3E%0A%0A%20%20%20%20%20%20%20%20%3Caside%20id%3D%22footer-widget-area%22%20class%3D%22footer-widget-area%22%20role%3D%22complementary%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22footer-widgets%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%20footer-widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EText%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22text-widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Houston%2C%20Tranquillity%20Base%20here.%20The%20Eagle%20has%20landed.%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Curious%20that%20we%20spend%20more%20time%20congratulating%20people%20who%20have%20succeeded%20than%20encouraging%20people%20who%20have%20not.The%20sky%20is%20the%20limit%20only%20for%20those%20who%20aren’t%20afraid%20to%20fly!%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%20footer-widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EList%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%201%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%202%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3EList%20item%203%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csection%20class%3D%22widget%20footer-widget%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22widget-title%20h5%22%3EImage%20Widget%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22img%2Fcoffee.jpg%22%20%2F%3E%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Faside%3E%0A%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22footer-wrapper%22%20role%3D%22contentinfo%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22site-info%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fwordpress.org%22%3EProudly%20Powered%20by%20WordPress%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22sep%22%3E%20%7C%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Theme%3A%20Carbon%20by%20%3Ca%20href%3D%22%22%20rel%3D%22designer%22%3EVincent%20Dubroeucq%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.site-info%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%20class%3D%22social-icons%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3EFacebook%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-sc-facebook%22%3E%3Cnoscript%3EFacebook%3C%2Fnoscript%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ETwitter%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-sc-twitter%22%3E%3Cnoscript%3ETwitter%3C%2Fnoscript%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3EGoogle%20Plus%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-sc-google-plus%22%3E%3Cnoscript%3EGoogle%20Plus%3C%2Fnoscript%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.footer-wrapper%20–%3E%0A%09%3C%2Ffooter%3E%3C!–%20%23colophon%20–%3E%0A%3C%2Fdiv%3E%3C!–%20%23page%20–%3E%0A%0A%3Cscript%20src%3D%22js%2Fnavigation.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fskip-link-focus-fix.js%22%3E%3C%2Fscript%3E%0A%3C%2Fbody%3E” message=”Balise