:watermark(https://f.pmo.ee//logos/4133/bb989514d16b88b940b51f02e07642d0.png,-2p,-2p,0,18,none):format(webp)/nginx/o/2025/09/05/17125716t1hfe3b.jpg)
9
Structure globale:
Détails de l’image (répétés pour chaque image):
* meta itemprop="url": Contient l’URL de l’image. Il y a deux URL par image: une pour la taille d’affichage standard (768 × 0) et une pour une version plus grande et à écran complet (2560 × 2560).
* figure-fullscreen: Un composant personnalisé (probablement Vue.js basé sur :image-id) qui gère la fonctionnalité d’image complète. Il prend l’ID d’image et l’URL comme accessoires.
* figure__image-wrapper: Un emballage div Autour de figure__image-loadingqui est supprimé par le onload événement du
* img: La balise d’image réelle.
* onclick et onkeydown: Les deux gestionnaires d’événements déclenchent le triggerEvent fonction avec les mêmes données. Cela rend l’image cliquable avec une souris et accessible via le clavier (en utilisant la touche Entrée). les données transmises à triggerEvent Comprend:
* id: L’ID unique de l’image (par exemple, 17125712).
* focus: Réglé sur «Image unique», indiquant probablement que l’image se concentre sur.
* focusIndex: Le même que l’ID d’image.
* role="button" et tabindex="0": Ces attributs font que l’image se comporte comme un bouton d’accessibilité, ce qui lui permet d’être focalisé et activé à l’aide du clavier.
* data-focus-from="single-image" et data-focus-index="17125712": Ces attributs de données stockent probablement les détails de la façon dont l’image a reçu une orientation.
* src: L’URL de l’image à afficher.
* alt: Fournit un texte d’option pour l’image, important pour l’accessibilité (lecteurs d’écran) et le référencement. Dans ce cas, c’est «écrit la photo».
* figcaption: Contient la légende de l’image.
* aria-hidden="true": Cache la légende des lecteurs d’écran, car la légende est probablement purement décorative.
* figure__caption--name: Style le texte de la légende.
* span class="notranslate": Empêche le texte de la légende «AP / ScanPix» d’être traduit automatiquement par les navigateurs.
Observations clés:
* Accessibilité: Le code est bien structuré pour l’accessibilité, avec role="button", tabindex="0", alt attributs et attributs ARIA appropriés.
* Fonctionnalité à écran complet: Le figure-fullscreen Le composant suggère une fonctionnalité intégrée pour afficher les images dans un format plus grand.
* État de chargement: Le figure__image-loading classe et onload Le gestionnaire d’événements fournit un moyen d’indiquer le chargement de l’image.
* Gestion des événements: Le triggerEvent La fonction est utilisée pour gérer à la fois des événements Click et Entrée des événements de la pression, offrant un moyen cohérent d’interagir avec les images.
* Optimisation d’image: L’utilisation de Webp format (filters:format(webp)) suggère un effort pour optimiser les images pour les performances Web.
* Schema.org Marquage: L’utilisation du vocabulaire schema.org aide les moteurs de recherche à comprendre le contenu de la page.
Comprendre les structures d’image HTML dans les articles
Q: Quel élément sémantique est utilisé pour envelopper des images individuelles?
UN: Les images sont généralement enfermées dans
Q: Que fait le figure--align-wider Classe suggère ces images?
UN: Cette classe implique que les images sont distinguées par la conception, destinées à afficher avec une largeur dépassant la colonne de texte standard.
Q: Comment les moteurs de recherche comprennent-ils que ces images sont réellement des images?
UN: Les moteurs de recherche obtiennent un signal clair à partir d’attributs comme itemprop="image", itemscopeet itemtype="http://schema.org/ImageObject". Ce taggage explicite les aide à reconnaître le contenu comme une image.
Q: Où peut-on trouver le lien direct vers une image?
UN: L’URL de l’image est stockée dans un étiqueter. Il peut y avoir deux URL fournies: une pour la visualisation standard et une autre pour une option plus grande et complète.
Q: Quel composant gère l’expérience d’image en plein écran?
UN: Un composant personnalisé, souvent nommé figure-fullscreengère l’écran complet. Il reçoit un ID d’image et une URL pour fonctionner.
Q: Comment l’état de chargement d’une image est-il géré visuellement?
UN: UN figure__image-wrapper Div transporte initialement la classe figure__image-loading. Cette classe est supprimée une fois que l’image se charge complètement, indiquant sa présence.
Q: Y a-t-il des tailles spécifiques mentionnées pour les images intégrées?
UN: Oui, le texte source mentionne deux tailles d’URL: une pour l’affichage standard (768 × 0) et une plus grande pour l’écran complet (2560 × 2560).
Explorez ces éléments structurels pour mieux apprécier la façon dont le contenu Web est présenté et compris.
https://www.youtube.com/watch?v=qtiw5sucriu