Quelques recommandations pour HTML5/CSS3

L’évolution rapide des usages Web, à partir des smartphones essentiellement, conduit a privilégier quelques règles pour l’écriture des pages en HTML5(avec donc l’usage intensif du CSS3), qui pour nous spipeurs, se reporte essentiellement dans l’écriture des squelettes ; ces règles sont déjà présentes dans les squelettes de base de la .

Article publié le 22 novembre 2021, et actualisé en novembre 2021

 
 
 
 
 
 
 
 
 
 

Passer en HTML5

 Structurer la page en CSS

Cela implique de gérer l’ensemble des éléments, dans des blocs (en gros, toujours mettre dans des <div>), et leur appliquer des styles.

Plus précisément, chaque bloc doit recevoir des sélecteurs CSS, ou qualificateurs de classe class="..", voir aussi un identifieur id=".." pour le cibler directement,ceux-ci étant ensuite définis dans les feuilles de styles standard de SPIP, ou du plugin/thème pris, avant d’être à corriger/surcharger par des feuilles de styles personnalisées (cf. CSS perso : où ?).

 Apporter une touche de sémantique

Pour faciliter entre autres les lecteurs vocaux (en cas de difficultés visuelles), le HTML5 préconise l’organisation de la page en diverses sections, et introduit à cet effet de nouveaux mots clés, dont l’utilisation est recommandée (voir Squelette en HTML5).

 Hiérarchiser le contenu rédactionnel

Il s’agit de rajouter correctement des inter-titres entêtes de paragraphes, les <hn> !
En particulier,la plupart des auteurs s’accordent pour suggérer d’avoir un titre <h1> unique par page (donc reprenant le titre de l’article ou de l’objet SPIP concerné), facilitant l’indexation par un titre descriptif du contenu réel de la page. Ensuite on respectera la hiérarchie naturelle jusqu’à 6 niveaux [1] le <h1> unique pour un titre (caché) du body :

<div class="content home" role="main">
     <section>
   <h1 class="visuallyhidden">Dernières actualités</h1>

 Passer en responsive

Vous penserez évidement à la définition du layout adapté à la dimention utile del’écran, avec le viewport et les media-queries....
Mais vous pouvez aussi vous intéresser aux menus responsive de type ’hamburger" (SPIP proposeunplugin ad’hoc)voir au lazy loading des images....


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1A noter que les squelettes SPIP, tout comme https://www.alsacreations.com/, commençaient une hiérarchie du #TEXTE entre <h3> et <h4>, laissant les <h2> pour les titres de blocs de la page


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 22 novembre 2021, et actualisé en novembre 2021 .

Répondre à cet article