HTML : mise en page sémantique. Structure sémantique pour les pages HTML5. Sémantique en HTML5

Donnons maintenant un exemple de la façon dont la disposition div est remplacée par la disposition sémantique.

Un exemple de disposition typique :

Titre du message Texte du message

Remplacement par un sémantique :

Titre du message

Publier du texte

Ici, nous avons utilisé des balises de mise en page sémantique : section, article, h1, p.

Les styles sont généralement écrits dans un fichier séparé (dans le cas de WordPress dans style.css) comme suit :

en-tête (largeur : 90 % ; marge : auto ; ) h1 ( alignement du texte : centre ; taille de la police : 2em ; ) nav ( arrière-plan : #f1f1f1 ; couleur : #777 ; )

Dans le cas d'une mise en page avec un div, cette description ressemblerait à ceci :

div.header (largeur : 90 % ; marge : auto ; ) div.header span (text-align: center ; taille de police : 2em ; ) div.menu ( background : #f1f1f1 ; couleur : #777; )

Cependant, tous les avantages de la disposition sémantique n'excluent pas la possibilité d'utiliser des développements anciens. Il est important d'aborder judicieusement la construction du balisage du texte, afin que chaque élément s'intègre dans la structure globale.

Afin de mieux comprendre le sujet d'aujourd'hui, considérons quelques balises utilisées dans la présentation sémantique en HTML5. Et puis mettez-les en pratique.

— précise l'en-tête d'un site ou d'une section ; il comprend généralement un titre, et d'autres balises peuvent être placées à l'intérieur, en plus de celles situées plus haut dans la hiérarchie (html, body, head, etc.)

— une balise qui renferme les éléments de l'article : texte lui-même, images, commentaires

— divise un document Web en sections sémantiques, il est possible d'imbriquer une balise de section dans une autre

— le pied de page du site, qui contient des informations sur les contacts, adresses, liens, paternité, etc.

— balise html5 pour la navigation sur le site ; les liens les plus prioritaires y sont placés, bien qu'il soit acceptable d'utiliser plusieurs balises sur une page.

— un bloc de contenu non essentiel, généralement une barre latérale (sidebar) : unités publicitaires, catégories, balises, etc.

Maintenant, connaissant les balises ci-dessus, voyons comment elles fonctionnent dans l'exemple ci-dessous.

Nous écrivons le code suivant dans l'éditeur ou le Bloc-notes :

En-tête du site Navigation

• Lien 1
• Lien 2

Contenu

Exécutons maintenant le document sous forme de fichier HTML.

Ensuite, nous devons définir des styles pour chaque élément. Dans notre cas, nous ajouterons une balise avec des descriptions au fichier html déjà créé. Si vous apportez des modifications à un site WordPress, ajoutez des modifications au fichier style.css.

Ainsi, l’apparence générale de notre fichier style.css sera la suivante :

en-tête (text-align:center; background:#FF0000; ) nav ( float:right; width:300px; background:#3CB371; ) section ( float:right; margin:10px auto; width:1250px; background:#808080 ) section h1 ( couleur : #800000 ; remplissage : 10px ; texte-align : centre ; ) article ( float : gauche ; largeur : 595px ; marge : 5px ; remplissage-gauche : 5px ; texte-align : centre ; arrière-plan : #800080 ; ) article h2 ( largeur : 250 px ; marge : 10 px auto ; alignement du texte : centre ; arrière-plan : #D2691E ; ) pied de page ( clair : les deux ; hauteur : 40 px ; remplissage : 10 px ; arrière-plan : #00FFFF ; ) pied de page p ( police- taille : 14 px ; alignement du texte : centre)

Après avoir étudié le code donné en détail, vous verrez que pour chaque balise (en-tête, section, article, pied de page) l'emplacement, la largeur, la couleur de remplissage ou la couleur de la police sont précisés.

Le même type de page Web pourrait être obtenu en présentant le document à l'aide de balises, mais en utilisant des balises de mise en page sémantique, nous avons clairement découvert ses avantages. Après avoir visualisé le code, la signification d'un bloc particulier devient immédiatement claire, ce qui permet aux développeurs Web de travailler plus efficacement avec les documents. À son tour, la disposition sémantique structurée permet aux robots de recherche de traiter rapidement les pages, ce qui donne une longueur d'avance dans le classement de la ressource ainsi créée.

En plus des balises HTML5 de base ci-dessus pour la présentation sémantique, il existe également de nombreuses balises spéciales qui remplissent un objectif important. Voici une courte liste des balises sémantiques les plus utilisées en html5 :

• — lecture et gestion vidéo ;
• — ajouter et gérer l'audio sur la page ;
• — une zone de création d'images et d'autres objets Javascript ;
• — un bouton ou un interrupteur à l'intérieur d'une balise ;
• — créer un menu et un conteneur pour la balise ;
• — une liste d'options disponibles après avoir saisi un champ de texte (un exemple d'une telle liste est les astuces Google) ;
• — regrouper des éléments (par exemple, des images avec légendes) ;
• - regrouper les titres et sous-titres ;
• — mise en évidence sémantique du texte ;
• — sortie de valeurs dans une plage donnée, généralement des données numériques ;
• - ajouter une annotation au dessus ou en dessous du texte principal (exemple - transcription sous les mots) ;
• — insertion d'un fichier audio ou vidéo à l'intérieur des balises audio, vidéo ;
• — le texte à l'intérieur de la balise prend le sens de date et d'heure ;

Enfin, regardez une leçon vidéo informative sur les bases du html5, ses balises et des exemples de leur utilisation :

Avec la bonne détermination, vous serez certainement en mesure de maîtriser les connaissances nécessaires. Croyez en vous.

• Traduction

Je vais faire une prédiction audacieuse. Bien après vous et moi, le HTML sera là. Non seulement dans des milliards de pages d’archives de notre époque, mais aussi en tant qu’organes respiratoires vivants. Trop d’efforts, d’énergie et d’investissement ont été consacrés au développement d’outils, de protocoles et de plateformes Web pour que tout cela soit facilement abandonné.

Arrêtons-nous pour réfléchir à notre responsabilité. Malheureusement, dans l’histoire, nous sommes associés au développement d’un outil important pour notre civilisation qui sera utilisé pour la communication pendant des décennies. Ainsi, lorsque nous nous concentrons, oisivement ou sérieusement, sur l'amélioration du HTML, nous devons comprendre l'ampleur des conséquences de nos décisions.

HTML 5, pour lequel le W3C a récemment redoublé d'efforts pour façonner la prochaine génération de HTML, a pris un essor considérable au cours de la dernière année. Il s'agit d'un énorme projet qui couvre non seulement la structure HTML, mais également l'analyse de modèles, les modèles de gestion des erreurs, le DOM, les algorithmes d'extraction de ressources, le contenu multimédia, les graphiques 2D, les modèles de données, les modèles de sécurité, les modèles de chargement de pages, le stockage de données côté client et bien plus.

Il existe également des changements dans la structure, la syntaxe et la sémantique du HTML, dont certains ont été décrits par Lachlan Hunt dans l'article « HTML 5 Présentation » ().

Mais dans cet article, examinons uniquement la sémantique du HTML. C'est quelque chose qui m'intéresse depuis de nombreuses années et je pense que c'est très important pour l'avenir du HTML.

La BBC a récemment annoncé qu'elle réduirait la proportion du microformat hCalendar dans son guide de programmes TV, en faveur de l'accessibilité et de la commodité du modèle de conception abbr. Cela montre que nous avons, sans aucun doute, poussé les capacités sémantiques du HTML bien au-delà de ce qui avait été prévu, et qui est effectivement possible pour le langage. Nous sommes tout simplement à court d'éléments et d'attributs HTML susceptibles d'améliorer la sémantique d'un document. Si nous continuons à tricher avec les constructions HTML existantes, de plus en plus de problèmes de ce type surgiront. Parce que HTML souffre d'un défaut fondamental en tant que langage de balisage sémantique : sa sémantique est fixe et non extensible.

Ce n’est pas seulement un problème théorique. Des centaines de milliers de développeurs utilisent class et id pour créer un balisage plus sémantique (ils les utilisent également comme « crochets » pour les styles CSS, mais c'est une autre affaire). Presque toujours, ces développeurs utilisent des vocabulaires spéciaux dont ils créent eux-mêmes les significations, plutôt que celles des schémas existants. Il s’agit au mieux d’un balisage pseudo-sémantique.

De nombreuses pages sur Internet utilisent des microformats pour ajouter une sémantique plus structurée que ce qui est possible avec l'ensemble pauvre d'éléments et d'attributs HTML. Dans ce cas, les valeurs utilisées pour l'attribut class sont cohérentes avec des vocabulaires, parfois issus d'autres standards comme vCard, parfois de vocabulaires nouvellement créés où il n'existe pas de standard rigide existant (comme c'est le cas avec hReview).

Mais il n'est pas si simple de trouver un mécanisme permettant de créer davantage de sémantique dans le contenu HTML : toute solution présente des limites importantes. Le plus important est peut-être la rétrocompatibilité. La solution ne peut pas perturber les centaines de millions d’appareils de visualisation utilisés aujourd’hui et qui le seront dans les années à venir. Toute solution non compatible ne sera pas largement acceptée par les développeurs de peur de perdre des lecteurs. Il sèchera rapidement sur la vigne.

La solution doit également être rétrocompatible. Pas dans le sens où cela devrait fonctionner dans les futurs navigateurs - c'est une tâche pour les développeurs de navigateurs, mais cela devrait être extensible. Nous ne pouvons pas nous attendre à ce qu’une solution unique que nous développerons maintenant réponde à tous les besoins imaginables et inimaginables de la sémantique à l’avenir. Nous pouvons développer des solutions qui peuvent être étendues pour répondre aux besoins futurs à mesure qu’ils se présentent.

Ces difficultés, prises ensemble, constituent un énorme défi. Mais dans le contexte d’une langue dont les itérations majeures se produisent tous les dix ans et dont l’importance en tant que plate-forme mondiale de communication est primordiale, c’est un problème qui doit être résolu.

Alors, comment HTML 5 résoudra-t-il ce problème ? HTML 5 introduit un certain nombre de nouveaux éléments. J'ai appelé certains "structurels" - section, navigation, côté, en-tête et pied de page. L'élément de dialogue est similaire en type et en contenu à blockquote. Il existe également un certain nombre d'éléments de données, tels que le compteur, qui est « une mesure scalaire dans une plage connue ou une valeur fractionnaire, telle que l'utilisation du disque » ; et un élément time (http://www.w3.org/html/wg/html5/#the-time), qui représente une date et/ou une heure.

Bien que ces éléments puissent être utiles et se soient révélés d'un certain intérêt, leur capacité à réellement résoudre ce problème dépendra des limites de compatibilité ascendante et rétrocompatible.

Regardons chaque obstacle

Section (couleur : rouge)
... La plupart des navigateurs cités gèrent cela, mais pas IE7 (et surtout 6).

Nous avons donc un problème de rétrocompatibilité avec 75% des navigateurs actuellement utilisés. Compte tenu de la demi-vie d’Internet Explorer, nous pouvons prédire que la majorité des utilisateurs utiliseront IE6 et IE7, même dans quelques années.

Si HTML 5 introduit de nouveaux éléments, quelle est la probabilité qu'ils soient utilisés par la grande majorité des développeurs - étant donné qu'ils ne sont pas compatibles avec la plupart des navigateurs utilisés ?

Examinons la compatibilité ascendante, qui constitue le prochain problème.

En ajoutant ces éléments, nous considérons la nécessité d’augmenter le potentiel de la sémantique HTML, mais seulement dans un cadre restreint. Quel que soit le nombre d’éléments que nous introduisons, nous penserons toujours à ajouter davantage de sémantique HTML. Et ajouter autant d’éléments que nous le souhaitons ne résoudra pas le problème. Nous n'avons pas besoin d'ajouter des termes spécifiques au vocabulaire HTML, nous devons ajouter un mécanisme pour permettre d'étendre la sémantique du document selon les besoins. En termes techniques, nous devons rendre le HTML extensible. HTML 5 n'offre pas de mécanisme d'extensibilité.

Ainsi, HTML 5 remplit une fonction qui tuera un pourcentage important de navigateurs modernes et empêchera complètement l'ajout de sémantique de langage.

J'ai encore quelques questions sur les nouveaux éléments. D'où viennent les noms des nouveaux éléments ? Comment a-t-on décidé que l'élément de navigation devait s'appeler « nav » ? Pourquoi les termes niveau page, niveau site et niveau méta-site sont-ils utilisés dans la navigation ?

Pourquoi ne pas adopter un dictionnaire existant tel que DocBook ? Son vocabulaire sur la structure des documents est plus riche et s'est enrichi au fil des années de publications spécialisées. Ce n'est pas un argument en faveur de DocBook, mais le fait est que la tâche extrêmement importante de préparation d'un mécanisme permettant de fournir la sémantique HTML est réalisée avec peu d'attention à la pratique dans le cadre d'un travail commencé il y a plus de 30 ans. (Les travaux originaux sur GML ont commencé au début des années 1970)

Si l'ajout de nouveaux éléments n'est pas abordé, du moins dans cette discussion, les attributs sont un autre domaine logique du HTML, concentrons-nous là-dessus. Après tout, nous utilisons les attributs class et id comme mécanismes pour étendre la sémantique HTML depuis près d'une décennie. De nombreux développeurs le connaissent déjà et se sentent à l’aise. Le projet microformats a montré que les attributs existants ne suffisent pas pour être utilisés comme mécanisme d'extension de la sémantique HTML. Ainsi, si nous voulons utiliser des attributs pour résoudre un problème, nous devons introduire un ou plusieurs nouveaux attributs. Avant d'entrer dans les détails de la manière dont cela pourrait fonctionner, il est juste de soumettre cette proposition aux mêmes exigences que les nouveaux éléments de HTML 5. La chose la plus importante lors de l'introduction de nouveaux attributs est de savoir si HTML sera rétrocompatible. Si tel est le cas, cela fournit-il un mécanisme viable pour étendre la sémantique en HTML ?

Inventons un nouvel attribut. Appelons cela « structure », mais le nom n'a pas d'importance. Nous pouvons l'utiliser comme ceci :

Voyons comment nos navigateurs l'apprécient.

Bien entendu, tous nos navigateurs afficheront l’élément CSS suivant.

Div (couleur : rouge)
Que diriez-vous de ceci :

Div (poids de la police : gras)
En fait, presque tous les navigateurs, y compris IE7, traiteront un style div avec un attribut de structure, même si cet attribut n'existe pas. Malheureusement, notre bonheur disparaît car il n'y a pas d'IE6. Mais on peut utiliser cet attribut en HTML et tous les navigateurs existants le reconnaîtront. Nous pouvons même utiliser des styles CSS pour notre HTML, en utilisant l'attribut dans tous les navigateurs modernes. Et si nous voulons contourner les anciens navigateurs, nous pouvons ajouter une classe avec une valeur de style. Par rapport à la solution HTML 5, qui ajoute de nouveaux éléments qui ne fonctionnent pas dans Internet Explorer 6 ou 7, on voit qu'il s'agit certainement d'une solution plus rétrocompatible.

Ces nouveaux attributs peuvent être utilisés comme attribut de classe : pour donner la sémantique d'un élément, pour décrire le caractère de l'élément ou pour les métadonnées d'un élément.

Ce n'est pas différent des rôles d'attribut dans XHTML, où nous avons un attribut pour toutes les sémantiques d'éléments, nous devons définir les différents types de sémantiques d'éléments et les séparer.

Par exemple, l'attribut de rôle XHTML fonctionne comme ceci :

* Ce code source a été mis en évidence avec Source Code Highlighter.

Pourquoi ne pas accepter l'attribut role tel quel ? Après tout, il existe d’autres types de sémantique pour lesquels la définition du rôle n’est pas applicable. Par exemple:

C'est une personne fantastique.

Voici un autre exemple. Il est de plus en plus clair que le HTML ne dispose pas d'une représentation lisible par l'homme d'une valeur lisible par une machine, telle qu'une date. C'est là le cœur du problème de la BBC avec le microformat hCalendar, dont nous avons parlé plus tôt. Bien que le 1er mai de l’année prochaine n’ait vraiment aucun sens, le 1er mai de l’année prochaine existera par analogie.

Encore une fois, lorsque nous utilisons le terme spécifique « équivalent » comme attribut ou autre pour désigner ce type de sémantique, cela ne pose pas de problème. Il est important de noter que cela n’est pas aussi simple que d’utiliser un attribut de classe ou de rôle, où tout un ensemble d’éléments sémantiques de l’information sont placés dans un seul élément. Pour une solution correctement extensible qui offrira une compatibilité ascendante et une flexibilité suffisante, cela vaut la peine d’explorer dans cette direction.

J'ai intitulé cette section « Quelques idées de solutions » car une quantité importante de travail doit être effectuée afin de créer une solution vraiment réalisable. Les questions ouvertes sont les suivantes.

• combien d'attributs sémantiques différents devrait-il y avoir. Ces catégories seront-elles extensibles, et si oui, comment ?
• Comment définir un dictionnaire ?
• Devons-nous simplement inventer les termes que nous voulons de la même manière que les développeurs ont utilisé le sens de classe, ou les valeurs possibles doivent-elles être définies par une spécification standardisée ?
• Si nous avons un conflit entre deux dictionnaires, par exemple, deux termes identiques sont définis par deux dictionnaires différents, comment résoudre ce problème ?
• Un espace de noms est-il nécessaire ou existe-t-il un autre mécanisme ?

Au lieu de me précipiter pour répondre à ces questions, j’ai mis en lumière les problèmes qui doivent être résolus et le dialogue entamé. Les ramifications et la portée des décisions prises en HTML 5 sont trop grandes pour prendre ces décisions, il est nécessaire de sensibiliser à la linguistique, à la sémantique, à la sémiotique et aux domaines connexes.

J'espère qu'il est clair que le simple fait d'introduire de nouveaux éléments dans HTML n'est pas une solution au problème de l'extension de la sémantique en HTML.

Ne nous précipitons pas vers une solution de facilité : avec le changement « climatique », tout cela fera peser le problème sur nos petits-enfants, comme c'est le cas aujourd'hui. À tout le moins, laissons-leur le meilleur HTML possible.

Balises :

• HTML5
• xhtml
• sémantique
• navigateurs

La mise en page sémantique est une mise en page qui utilise des balises pour structurer les documents HTML, qui divisent le code en blocs logiques (montrant explicitement leur rôle et leur contenu dans la structure de la page Web). Ce type de mise en page est devenu disponible avec l'avènement du HTML5, ses nouveaux éléments jouent un rôle important dans la création d'une structure logique explicite du document.

Pour commencer, afin de mieux comprendre l'utilisation de ces éléments, nous vous proposons d'étudier l'une des mises en page possibles :

La mise en page sémantique diffère de la mise en page en bloc uniquement par les éléments utilisés dans la structuration de la page, mais contrairement aux balises sémantiques utilisées dans la mise en page sémantique, la balise div, qui est l'élément principal utilisé dans la mise en page en bloc, ne transmet pas de signification claire sur le contenu qu'elle contient. contient, puisqu'il ne s'agit que d'un conteneur permettant de regrouper du contenu.

Examinons de plus près les éléments qui ont été utilisés dans la mise en page :

Malheureusement, le code CSS présenté ne pourra pas aider Internet Explorer 8 et ses versions antérieures à afficher correctement les éléments sémantiques. Pour gérer correctement les nouveaux éléments sémantiques dans toutes les anciennes versions d'IE, nous devrons recourir à JavaScript. Ajoutez simplement le code suivant à l'élément et les anciennes versions d'IE géreront correctement les nouveaux éléments :

document.createElement("section");

document.createElement("en-tête");

document.createElement("nav");

document.createElement("article");

document.createElement("à part");

document.createElement("pied de page");

Avec un petit effort, nous pouvons rendre notre balisage plus expressif.

Mais pourquoi consacrer plus de temps et de ressources à fournir la sémantique HTML ? La plupart des utilisateurs ne lisent pas votre code HTML. Et ils ne se soucient que de ce qui se passe à l’écran.

Le HTML sémantique améliore également l'accessibilité des sites Web. Les technologies d'assistance, telles que les lecteurs d'écran, analysent et interprètent votre code HTML. Grâce au HTML sémantique, les personnes ayant des besoins particuliers pourront lire et naviguer plus facilement dans nos articles.

Ce n'est que la pointe de l'iceberg. Il existe d'innombrables autres machines qui examinent notre code HTML et tentent de le comprendre. Bon sang, Internet est constitué d’un tas de machines. Ils constituent une grande partie du Web. Nous devons tout mettre en œuvre pour leur fournir des données plus significatives.

D'accord, j'espère maintenant que vous êtes d'accord et que vous souhaitez utiliser le HTML sémantique. Peut-être sur votre blog ou lors du développement d'un CMS.

Regardez le modèle ci-dessous.

Voici un modèle HTML sémantique pour le contenu Web. C'est un bon point de départ/modèle. Remplissez simplement les espaces vides. Il s'agit d'un modèle général qui peut fonctionner avec de nombreux types de contenu textuel : articles de blog, articles de presse, essais, etc.

Le balisage HTML du modèle utilise des éléments sémantiques (c'est-à-dire un article, un en-tête et un pied de page).

Il utilise également le balisage de données structurées Schema.org. En particulier, les diagrammes et la page Web. Schema.org est un projet commun entre Google, Bing et Yahoo !. L'objectif du projet est de fournir aux moteurs de recherche un moyen de mieux comprendre le contenu des pages.

Voici un exemple complété :

Titre de la page de l'article Titre de l'article 12 novembre 1990

Écrit Nom de l'auteur

La partie principale de l’article se trouve ici.

Cet article a été mis à jour le 30 mars 2015

Articles connexes

Autres articles connexes

Parlons des différentes parties d'un modèle HTML.

Un élément HTML possède quatre attributs :

• itemscope indique que le schéma Item est utilisé dans tout le document.
• itemtype contient l’adresse du schéma à utiliser.
• lang donne des informations sur la langue dans laquelle le contenu de la page est écrit. Le W3C dit que nous devrions utiliser les balises de langue répertoriées dans le registre des sous-balises de langue de l'IANA. Par exemple, si la page est écrite en allemand, nous définirions l'attribut land sur de .
• dir contient des informations sur la direction du texte de l'article. Vous avez deux options. Soit de gauche à droite (ltr), soit de droite à gauche (rtl). Si vous souhaitez que le navigateur décide cela à votre place, ne l'utilisez pas.

Pour une structuration significative, nous utilisons les éléments HTML suivants conformément aux spécifications du W3C.

La BBC utilise une phrase d'accompagnement pour tous ses articles.

Le modèle utilise des microdonnées pour améliorer la structure HTML sémantique.

Si vous souhaitez utiliser les nouveaux éléments HTML5, vous pouvez les remplacer par des éléments entièrement pris en charge tels que div ou span. cependant, vous pouvez garantir leur signification sémantique à l’aide de microdonnées.

Vous trouverez ci-dessous une brève description des microdonnées utilisées dans le modèle HTML.