Bonjour,
Le site me semble pas mal et son contenu intéressant. Et j'aime bien la manière dont le menu de gauche se replie.
Par contre, pour le code, bah, il reste du boulot !
Un framework est utilisé, et ça peut être en fin de compte plus difficile à maitriser que de faire directement son html à la main. Je ne connais pas next.js, mais bon, admettons que ce soit un choix acceptable. J'imagine cependant que ça puisse être assez contraignant et qu'il ne soit pas possible de simplifier le code autant qu'on le voudrait.
Structure globale
Au niveau de la structure globale, si je prends la page d'accueil, on a un bandeau en haut, un menu à gauche et une partie centrale avec le contenu.
J'aurais mis le bandeau du haut dans une balise <header> (au lieu d'une <section> contenant une <nav>) en dehors de la balise <main>. Parce que le <main> ne devrait en théorie ne contenir que le "contenu", et pas ce que contient ce bandeau du haut. Et j'aurais mis le menu de gauche dans une balise <nav> au lieu de <section> + <aside> (parce que c'est ça qui sert à naviguer dans le site) en dehors de la balise <main> elle aussi. J'aurais de plus sorti le petit pavé en bas du menu de gauche (qui contient en gros les mentions légales) pour le mettre dans un <footer> en dehors du <main> lui aussi. Tel qu'il est placé actuellement, il semble disparaitre si on a le menu replié. Tandis que dans un <footer>, il pourrait rester affiché en permanence en bas de page sans nuire au look d'ensemble.
En résumé, ça donnerait :
<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
</body>
Globalement, il me semble y avoir une utilisation abusive des balises <section>. Ce n'est pas justifié la plupart du temps. Il y a aussi bien sûr pas mal de balises <div>. Or, selon moi, (presque) toute <div> est inutile. On va dire que pour ce site, ce n'est quand même pas la cata. Ça reste raisonnable. Y en a beaucoup d'autres qui font pire. Ceci étant, ce site pourrait tout à fait contenir zéro balises <div>. Car il n'y a rien qui en justifie la présence.
Le bandeau du haut
On met donc le bandeau du haut dans un <header>, et on peut simplifier pas mal. Parce qu'en fin de compte, on a quoi dedans ? Un bouton pour replier le menu (j'aurais mis un <svg> dedans plutôt que trois <span>) et un logo encapsulé dans un lien vers la page d'accueil à gauche, un champ de recherche au milieu, et deux liens à droite pour s'inscrire et se connecter. On pourrait donc se contenter d'un truc du genre :
<header>
<button><svg ...>...</svg></button>
<a href="..."><img ...></a>
<label>...<imput ...></label>
<a href="...">Inscription</a>
<a href="...">Connexion</a>
</header>
Et on vire tout le reste qui ne sert à rien ou presque !
Menu de gauche
On a un lien seul en haut, suivi de trois listes de boutons. On met donc dans une balise <nav> un <a> suivi de trois <ul> contenant des <li>, chaque <li> contenant un <a>, chaque <a> contenant un <svg> et un <p> comme tu l'as fait. Ça donne par exemple ça :
<nav>
<a ...>...</a>
<ul>
<li><a ...><svg ...>...</svg><p>...</p></li>
<li><a ...><svg ...>...</svg><p>...</p></li>
...
</ul>
<ul>
<li><a ...><svg ...>...</svg><p>...</p></li>
<li><a ...><svg ...>...</svg><p>...</p></li>
...
</ul>
<ul>
<li><a ...><svg ...>...</svg><p>...</p></li>
<li><a ...><svg ...>...</svg><p>...</p></li>
...
</ul>
</nav>
Et on vire tout le reste qui ne sert à rien ou presque !
Le contenu principal
Je n'ai pas trouvé de <h1> dans la page d'accueil. Ailleurs, je n'ai pas regardé. Il faudrait en rajouter un au début du <main>. Car c'est problématique au niveau sémantique et pour le référencement de ne pas avoir de balise <h1>. Cette balise pourrait pour la page d'accueil n'être simplement que <h1>Citations</h1>. Dans les autres pages, il faut mettre un autre contenu dans les <h1>. Par exemple, pour la page concernant les conditions d'utilisation, on peut mettre <h1>Conditions d'utilisation</h1>, et ainsi de suite pour les autres pages.
Ensuite on a des <h2> suivi d'une série de balises <article>. C'est bien, mais le html produit est quand même un peu confus et contient notamment pas mal de <section> dont l'utilité est douteuse. Tu peux encapsuler chaque <h2> suivi de sa liste d'articles dans une seule <section> (là, c'est normal, une <section> devant dans le cas général commencer par un <hn> suivi de son contenu), mais retirer les autres balises <section> qui trainent autour de tes balises <article>. On obtient alors :
<main>
<h1>Citations</h1>
<section>
<h2>...</h2>
<article>...</article>
<article>...</article>
...
</section>
<section>
<h2>...</h2>
<article>...</article>
<article>...</article>
...
</section>
...
</main>
Et on vire tout le reste (en particulier toutes ces <section> intermédiaires) qui ne sert à rien ou presque !
Le bas de page
On y met :
<footer>
<a href="https://jardindescitations.com/conditions">Conditions d'utilisation</a>
<a href="https://jardindescitations.com/confidentialite">Confidentialité</a>
<a href="https://jardindescitations.com/integrations">Intégrer la citation du jour sur mon blog</a>
<p>© 2024 Jardin des citations. Tous droits réservés.</p>
</footer>
Eventuellement, on peut y rajouter un lien vers une page "plan-du-site". Et on vire le <div> qui ne sert à rien.
Si on fait tout ça, on ne devrait pas être loin du zéro <div>, avoir une utilisation normale des <section> et avoir un site sémantiquement clair.
À propos des balises <img>
Les balises <img>, là, ça fait carrément peur. Les frameworks, parfois, on se demande comment ils en sont arrivés "là" !
Je me suis amusé à regarder en détail la balise de l'image du premier article (des ballons jaunes avec des smileys imprimés dessus).
Le code html de cette seule balise fait ... 3156 octets. Gloups !
Bon, avec tout ce code, sans compter tout le js qui traine dans la page d'accueil, on aurait pu espérer une certaine optimisation. L'image de base pour cette balise (qui s'appelle semble-t-il henri-salvador-quote-article.webp) pèse environ 550 ko et ses dimensions sont de 1920x1270 px. C'est gros, mais si ce n'est pas ce qui est effectivement servi, ce n'est pas trop grave.
Quand je fais "inspecter" sur l'article, je vois que ce n'est pas cette image qui est envoyée par le serveur, mais une autre version (grâce au code savant se trouvant dans le html) de 900x600 px et un poids de 187 ko. Ça devient plus raisonnable, mais ça fait quand même pas mal pour une image dont le rendu ne fait la plupart du temps que de l'ordre de 360px de large (valeur approximative car ça dépend de la largeur de la fenêtre du navigateur, ce qui veut dire qu'on aura téléchargé une image qui de toute façon va être redimensionnée par le navigateur).
Moi je ne comprends rien aux scrset (j'exagère un peu évidemment
). En général, je regarde quelle largeur aura le rendu de l'image "la plupart du temps" et je fabrique une seule image qui fait le double de largeur du rendu. J'ai fait ça pour l'image henri-salvador-quote-article.webp et j'ai obtenu une image de 720x480 px qui pèse ... 53ko. Et en faisant ça, j'aurais pu me contenter d'un code html comme celui qui suit, tout en ayant un rendu pas trop mal dans la plupart des cas :
<img alt="Je voudrais que sur la terre Tout le monde ait des images Commes dans mes rêves bleus Qu'il n'y ait plus d'orages Que Papa soit jamais vieux."
loading="lazy" src="/img/henri-salvador-quote-article-720x480.webp">
On est bien loin des 3156 octets du site actuel.
Bref, il est certain que les scrset peuvent apporter quelque chose, mais ici, ça pose question.
Amicalement,
