5568 sujets

Sémantique web et HTML

Demande d'aide : parallèle structures HTML et document

Bonjour,

J'essaie de mettre à jour une petite infographie dont je me sers depuis longtemps pour vulgariser rapidement HTML et amener quelques concepts propres à l'organisation d'une "page de contenu" (article, fiche produit, offre d'emploi, petite annonce...). Je n'avais pas mis à jour cette infographie depuis HTML5 (!). Avant que je ne l'utilise j'aimerais beaucoup recueillir l'avis éclairé des membres du forum qui voudront bien me filer un coup de pouce.

upload/1579632784-4453-image-aide-forum.png

N'existe-t-il pas de balises sémantiquement plus adaptée pour la section que j'appelle "Corps de page" ?

Des éléments qui vous arrachent peut-être les yeux et que vous me conseilleriez d'éditer ?

Merci d'avance pour votre aide ! Toutes vos remarques sont les bienvenues. Smiley smile
Merci gcyrillus. Cet article, bien référencé @Google, ne m'avait pas échappé. Smiley cligne Ce que j'ai dessiné me semble plutôt en phase avec ce que j'ai compris de l'article.

Je veux bien un avis critique.
Merci !

Pas "article", car le document que je cherche à décrire est plus générique. Comme je l'écrivais, le document peut aussi bien être un article, qu'une fiche produit, ou une petite annonce, par exemple. Si j'ai bien compris, "article" vise plutôt à désigner un contenu éditorial. D'ailleurs, si tu as un lien vers une doc officielle spécifiant l'utilité d'"article", je suis preneur !

Concernant "section", je reconnais avoir hésité (je le voyais plus pour distinguer plusieurs parties d'un document), mais à y réfléchir (un peu plus) je crois que ça peut être plus adapté que "div" effectivement. Pour "main", là, je suis franchement emballé ("L’élément HTML <main> représente le contenu majoritaire du <body> du document".). Merci beaucoup !

Pendant que tu me répondais, je faisais de la place dans mon infographie pour caler "aside". Excellente idée aussi ! Surtout que dans le reste de l'infographie, je représente un layout type... avec une sidebar évidemment. Smiley smile
Administrateur
Bonjour,

+1 pour main

Notre outil https://schnaps.it ('fin par "notre" je veux dire Raphaël, Rodolphe et ancienne stagiaire de l'agence Smiley smile ) propose des gabarits qui respectent pas mal la sémantique HTML. Choisir par exemple "simple entête, sidebar, contenu fluide, footer" et inspecter ou télécharger le Zip.

Notes :
- ne pas abuser de section. Article récent de B. Lawson sur section vs article que l'on trouve dans https://css-tricks.com/the-deal-with-the-section-element/ (pas lu mais il connaît son affaire)
- dans ton infographie ce n'est AMHA pas clair ce qui est de 1er niveau et ce qui est imbriqué. Perso j'ai beaucoup l'habitude d'indenter pour marquer la différence.
- j'éviterais h1 dans l'entête s'il y en a un dans le contenu (page article, h1 = titre de l'article). Mais OK par exemple dans la page d'accueil s'il y a 6 blocs de même importance alors je peux les baliser avec des titres de niveau 2 et le niveau 1 sera le nom du site dans le header. Ça reste un cas particulier.
- quand on peut, nav devrait être entre le header de la page et main. Mais il y a beaucoup d'occasions où l'on ne peut pas (parce que sur mobile le menu burger est un élément parmi d'autres de l'entête, parce que sur desktop il y a un mélange sur la même ligne entre navigation et formulaire de recherche voire d'autres éléments, etc) et là bah il faut se rabattre sur nav dans header
- en 1ère ligne de l'infographie je rajouterais "<!doctype html>, comme de toute façon il n'y en a plus d'autres et qu'il est court autant le montrer en entier Smiley lol
- entre autres guides édités par la DINUM ex-DINSIC https://disic.github.io/guide-integrateur/1-gabarit-general.html est une très bonne ressource (il faut juuuste s'habituer à trouver le sommaire Smiley langue )

EDIT 3:
- object existe certes toujours mais euh Flash est mort donc je parlerais plutôt de <video> et <audio> directement (object ne disparaîtra pas de sitôt et ce n'est pas du tout prévu mais par contre son usage lui va disparaître sauf cas super particulier).
- selon le public formé, Opquast càd les Bonnes Pratiques de la Qualité Web (avec son référentiel et sa certification) est un must. Err je sais pas pourquoi je précise "selon le public formé" parce que je ne vois pas pour qui ce ne le serait pas Smiley biggol
Modifié par Felipe (22 Jan 2020 - 11:28)
Bonjour Felipe,

Il me semble que j'étais déjà tombé il y a longtemps sur cet outil à consommer sans modération. Smiley smile Merci pour ce rappel. J'ai bien reconnu le layout que je vise désormais.

- Vu pour "section".
- Je ne cherchais pas à montrer l'imbrication côté HTML, mais finalement cela ne va pas me coûter tant que ça d'amener cette idée également sur ce plan. Et le parallèle avec la structure documentaire est pour le coup intéressant. J'indente ! Merci pour l'idée.
- Pour le H1 dans l'en-tête, j'ai voulu faire un effort pour aller dans le sens de HTML5, mais je vais suivre ton conseil. Je parle d'effort, car je ne recommande d'ordinaire pas de mettre en forme via des balises Hn hors du bloc de contenu principal ("main" dans notre exemple). Mettre un H1 dans l'en-tête du site sur la page d'accueil, pour ne plus le mettre ensuite sur les pages profondes nécessite une règle de gestion "coûteuse" dont on peut largement se passer, justement en ne mettant pas de H1 ailleurs que dans le bloc de contenu principal. Smiley smile
- Vu pour "nav". Je tiens compte de ta remarque dans mon schéma. Merci !
- Pour le Doctype, ok, je dévoile tout son être. lol Thanks.
- Merci pour le gui... la mine d'or ! Je découvre qu'on peut placer des footers dans des sections (je ne dis pas que je le ferais). Ah !
- Vu pour "object" vs "video" et "audio".
- Oui, je connais Opquast et ses bonnes pratiques, mais merci.

Je poste l'image mise à jour, si jamais vous aviez encore quelques bons conseils à "distiller".
upload/1579710283-4453-capture.png
Modifié par karnabal (22 Jan 2020 - 17:24)
Bonjour Jean-Pierre,

Il s'agit d'un dessin vectoriel, donc fait au tracé.
Modérateur
Bonjour, l'utilité et le bon endroit pour utiliser article n'est pas toujours très évident.

Il ne faut pas vouloir le réserver trop précautionneusement ni le servir à toutes les sauces Smiley smile

Dans la doc il est dit:
a écrit :
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

En gros c'est un ensemble cohérent d'informations qui se suffit à lui-même, que l'on pourrait extraire du site pour le mettre dans un autre contexte, sans que cela pose problème. C'est une définition bien plus large qu'un article de contenu éditorial. Une fiche produit, une recette de cuisine ou une offre d'emploi sont des <article>s.
Par contre cela présuppose d'avoir un minimum de contenu organisé: un titre, du textes, quelques données ou documents, etc.
Souvent le contenu principal d'une page est un article, à l'exception des pages qui servent à la navigation (listing, menus, etc. n'ont pas ou peu de raison d'être hors contexte). Les résumés d'articles ne sont généralement pas des articles eux-mêmes.

a écrit :

Pas "article", car le document que je cherche à décrire est plus générique. Comme je l'écrivais, le document peut aussi bien être un article, qu'une fiche produit, ou une petite annonce, par exemple.

En effet, mais une fiche produit ou une annonce sont complètement des articles.

Jean-Pierre-Bruneau a écrit :

Mais WC3 me sort 30 warning

Ici c'est le contraire de Karnabal, l'utilisation d'article est trop généreuse, une photo avec un lien sur une page n'est pas un article, c'est le contenu de cette page qui est un article.
Sujet clos
Aller à