Maison >interface Web >tutoriel HTML >Comment comprendre la structure sémantique HTML_HTML/Xhtml_Production de pages Web
Comment comprendre la structure sémantique HTML_HTML/Xhtml_Production de pages Web
- WBOYoriginal
- 2016-05-16 16:42:551242parcourir
Je crois que tout le monde connaît le HTML et le CSS, connaît la séparation entre la structure HTML et les performances CSS, et connaît la sémantique HTML. Ce sont des mots-clés populaires ces dernières années. Le HTML sémantique n'a commencé à être populaire en Chine qu'il y a un an ou deux. En regardant la structure HTML discutée dans le groupe maintenant et les questions d'entretien sur la structure HTML, le HTML sémantique représente une grande partie. Alors pourquoi utiliser le HTML sémantique ? Quels sont les avantages du HTML sémantique ?
HTML fournit la structure contextuelle et la signification du contenu du document Web ; le HTML lui-même n'a aucune représentation. Nous voyons par exemple que
est en gras, avec une taille de police de 2em, et , Ne pensez pas que ce soit la performance du HTML. Ce sont en fait les styles CSS par défaut du HTML. Donc tout d'abord, nous devons savoir que le HTML n'a rien à voir avec les performances de la page. Le rôle du HTML dans la page est la structure et la signification. En termes simples, il s'agit de diviser le contenu.
La structure HTML sémantique doit d'abord mettre l'accent sur la structure HTML
La structure HTML est le squelette de la page. Une page est comme une maison. La structure HTML est composée de murs d'acier et de béton. Si une maison n'a pas de murs d'acier et de béton, ce n'est qu'un tas d'inutiles. des briques et ne peut pas être habité, ne peut pas fonctionner. Le CSS est un matériau décoratif. Il s'agit d'un sol en rondins, de marbre et de peinture. Il est utilisé pour décorer une maison. Inutile de dire que la puissance du CSS n'est pas nécessaire. Si le CSS n'a pas de structure HTML, ce n'est qu'un tas. de planches de bois peintes ensemble, elles n'ont aucune valeur d'usage réelle. CSS s'appuie entièrement sur le document (X)HTML qui le référence. Si vous souhaitez profiter pleinement de la puissance du CSS, il est nécessaire de fournir un HTML avec un contenu à la fois propre et structuré. "Le HTML est la lingua franca pour la publication d'hypertextes sur Internet... HTML utilise des balises pour structurer le texte. . isation »(http://www.w3.org/MarkUp/).
Comment écrire une structure HTML sémantique ?
HTML est une méthode permettant de compléter le contenu d'un texte par une structure et une signification (ou « sémantique »). Il nous dira : « Cette ligne est un titre, ces lignes forment un paragraphe. Ces mots sont une liste d'éléments, et ces mots sont un lien hypertexte vers un autre fichier sur Internet. Il convient de noter que vous ne devez pas autoriser le HTML. nous dit : "Ces textes sont bleus, et ces textes sont rouges. Cette partie du contenu est la colonne la plus à droite, et cette ligne de contenu est en italique." Ces informations liées aux performances sont le travail de CSS. Lorsque vous effectuez du développement front-end, n'oubliez pas : HTML nous indique ce qu'est un élément de contenu (ou sa signification), et non à quoi il ressemble. Lorsque nous parlons de « balisage sémantique », le HTML dont nous parlons doit être complètement séparé des informations de présentation, et les balises qu'il contient doivent définir sémantiquement la structure du document.
La structure sémantique HTML est en fait très simple. Tout d'abord, saisissez la sémantique de chaque balise HTML.
. Attendez... Lorsque vous voyez le contenu, réfléchissez aux balises qui peuvent mieux le décrire et utilisez les balises de votre choix.
Quels sont les avantages de la structure HTML sémantique ?
Nous savons que HTML5 a de nouvelles balises, telles que et
1. Lorsque le style est supprimé ou perdu, la page peut présenter une structure claire :
Le HTML lui-même n'a aucune performance. Nous voyons par exemple que
est en gras, avec une taille de police de 2em, et . Ce sont en fait les valeurs par défaut du HTML. Le style CSS est à l'œuvre, donc lorsqu'il est supprimé ou perdu, la page peut présenter une structure claire. Ce n'est cependant pas un avantage de la structure HTML sémantique. styles par défaut.Le style par défaut a également pour but de mieux exprimer le HTML. On peut dire que le style par défaut du navigateur et la structure sémantique HTML sont indissociables.
2. Les lecteurs d'écran (si le visiteur est malvoyant) "liront" votre page entièrement en fonction de votre balisage .
Par exemple, si vous utilisez un balisage sémantique, les lecteurs d'écran « épelleront » votre mot plutôt que d'essayer de le prononcer dans son intégralité.
3. Les PDA, les téléphones mobiles et autres appareils peuvent ne pas être en mesure de restituer les pages Web comme les navigateurs informatiques ordinaires (généralement parce que ces appareils ne prennent pas en charge CSS
).
L'utilisation du balisage sémantique garantit que ces appareils affichent les pages Web de manière significative. Idéalement, l'appareil de visualisation est chargé de rendre les pages Web cohérentes avec les conditions de l'appareil lui-même.
Le balisage sémantique fournit les informations pertinentes nécessaires à l'appareil, vous évitant ainsi d'avoir à considérer toutes les situations d'affichage possibles (y compris les appareils existants ou nouveaux à l'avenir). Par exemple, un téléphone mobile peut choisir d'utiliser un texte de titre de balisage. affiché en gras. Un ordinateur de poche peut l'afficher dans une police plus grande. Quoi qu'il en soit, une fois que vous avez marqué le texte comme titre, vous pouvez être sûr que l'appareil de lecture le lira de manière appropriée selon ses propres termes.
4. Les robots des moteurs de recherche s'appuient également sur des balises pour déterminer le contexte et le poids des mots-clés individuels
.
Dans le passé, vous n'aviez peut-être pas considéré que les robots des moteurs de recherche sont également des « visiteurs » du site Web, mais ils sont désormais en fait des utilisateurs extrêmement précieux. Sans eux, les moteurs de recherche ne pourront pas indexer votre site Web, et alors. les utilisateurs ordinaires seront très tristes de visiter.
5. Il est très important que votre page soit facile à comprendre pour les robots d'exploration, car les robots ignoreront en grande partie le balisage utilisé pour les performances et se concentreront uniquement sur le balisage sémantique
.
Par conséquent, si le titre du fichier de la page est balisé au lieu d'être balisé, alors cette page peut être positionnée plus bas dans les résultats de recherche. En plus d'améliorer la facilité d'utilisation, le balisage sémantique facilite l'utilisation correcte du CSS et du JavaScript car il. lui-même Fournit de nombreux « crochets » pour appliquer le style et le comportement de la page
Le référencement dépend principalement du contenu de votre site Web et des liens externes.
6. Faciliter le développement et la maintenance de l'équipe
Le W3C a établi une bonne norme pour nous. Tous les membres de l'équipe suivent cette norme, ce qui peut réduire de nombreuses choses différenciées, faciliter le développement et la maintenance, améliorer l'efficacité du développement et même réaliser un développement modulaire.
Si vous avez des opinions ou des ajouts différents, veuillez laisser un message pour en discuter.
Merci à frère Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar et le CSS Forest Group pour la discussion
Déclaration：Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
HTML est une méthode permettant de compléter le contenu d'un texte par une structure et une signification (ou « sémantique »). Il nous dira : « Cette ligne est un titre, ces lignes forment un paragraphe. Ces mots sont une liste d'éléments, et ces mots sont un lien hypertexte vers un autre fichier sur Internet. Il convient de noter que vous ne devez pas autoriser le HTML. nous dit : "Ces textes sont bleus, et ces textes sont rouges. Cette partie du contenu est la colonne la plus à droite, et cette ligne de contenu est en italique." Ces informations liées aux performances sont le travail de CSS. Lorsque vous effectuez du développement front-end, n'oubliez pas : HTML nous indique ce qu'est un élément de contenu (ou sa signification), et non à quoi il ressemble. Lorsque nous parlons de « balisage sémantique », le HTML dont nous parlons doit être complètement séparé des informations de présentation, et les balises qu'il contient doivent définir sémantiquement la structure du document.
Quels sont les avantages de la structure HTML sémantique ?
Nous savons que HTML5 a de nouvelles balises, telles que
1. Lorsque le style est supprimé ou perdu, la page peut présenter une structure claire :
Le HTML lui-même n'a aucune performance. Nous voyons par exemple que
est en gras, avec une taille de police de 2em, et . Ce sont en fait les valeurs par défaut du HTML. Le style CSS est à l'œuvre, donc lorsqu'il est supprimé ou perdu, la page peut présenter une structure claire. Ce n'est cependant pas un avantage de la structure HTML sémantique. styles par défaut.Le style par défaut a également pour but de mieux exprimer le HTML. On peut dire que le style par défaut du navigateur et la structure sémantique HTML sont indissociables.
2. Les lecteurs d'écran (si le visiteur est malvoyant) "liront" votre page entièrement en fonction de votre balisage .
Par exemple, si vous utilisez un balisage sémantique, les lecteurs d'écran « épelleront » votre mot plutôt que d'essayer de le prononcer dans son intégralité.
3. Les PDA, les téléphones mobiles et autres appareils peuvent ne pas être en mesure de restituer les pages Web comme les navigateurs informatiques ordinaires (généralement parce que ces appareils ne prennent pas en charge CSS
).
L'utilisation du balisage sémantique garantit que ces appareils affichent les pages Web de manière significative. Idéalement, l'appareil de visualisation est chargé de rendre les pages Web cohérentes avec les conditions de l'appareil lui-même.
Le balisage sémantique fournit les informations pertinentes nécessaires à l'appareil, vous évitant ainsi d'avoir à considérer toutes les situations d'affichage possibles (y compris les appareils existants ou nouveaux à l'avenir). Par exemple, un téléphone mobile peut choisir d'utiliser un texte de titre de balisage. affiché en gras. Un ordinateur de poche peut l'afficher dans une police plus grande. Quoi qu'il en soit, une fois que vous avez marqué le texte comme titre, vous pouvez être sûr que l'appareil de lecture le lira de manière appropriée selon ses propres termes.
4. Les robots des moteurs de recherche s'appuient également sur des balises pour déterminer le contexte et le poids des mots-clés individuels
.
Dans le passé, vous n'aviez peut-être pas considéré que les robots des moteurs de recherche sont également des « visiteurs » du site Web, mais ils sont désormais en fait des utilisateurs extrêmement précieux. Sans eux, les moteurs de recherche ne pourront pas indexer votre site Web, et alors. les utilisateurs ordinaires seront très tristes de visiter.
5. Il est très important que votre page soit facile à comprendre pour les robots d'exploration, car les robots ignoreront en grande partie le balisage utilisé pour les performances et se concentreront uniquement sur le balisage sémantique
.
Par conséquent, si le titre du fichier de la page est balisé au lieu d'être balisé, alors cette page peut être positionnée plus bas dans les résultats de recherche. En plus d'améliorer la facilité d'utilisation, le balisage sémantique facilite l'utilisation correcte du CSS et du JavaScript car il. lui-même Fournit de nombreux « crochets » pour appliquer le style et le comportement de la page
Le référencement dépend principalement du contenu de votre site Web et des liens externes.
6. Faciliter le développement et la maintenance de l'équipe
Le W3C a établi une bonne norme pour nous. Tous les membres de l'équipe suivent cette norme, ce qui peut réduire de nombreuses choses différenciées, faciliter le développement et la maintenance, améliorer l'efficacité du développement et même réaliser un développement modulaire.
Si vous avez des opinions ou des ajouts différents, veuillez laisser un message pour en discuter.
Merci à frère Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar et le CSS Forest Group pour la discussion
Le référencement dépend principalement du contenu de votre site Web et des liens externes.