Qu'est-ce que la sémantique des balises HTML5

En HTML5, la sémantique des balises fait référence à la capacité de comprendre plus intuitivement les utilisations et les fonctions des balises et des attributs ; la sémantique des balises peut être plus facile à lire pour les utilisateurs, et lorsque les styles sont perdus, la page peut avoir une structure claire, ce qui est propice au développement et à la maintenance, les balises sémantiques courantes incluent "

", "

", "

" et ainsi de suite.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

Qu'est-ce que la sémantique des balises HTML5 ?

L'introduction de balises sémantiques est une bonne solution à la mise en page div plein écran, comme son nom l'indique, permet aux utilisateurs de voir la fonction et la signification de chaque balise en un coup d'œil, et utilise des balises avec une sémantique appropriée, afin que la page ait une bonne structure, que les éléments de la page aient un sens et puissent être facilement compris par les moteurs de recherche. Une image peut clairement montrer le rôle des balises sémantiques, ce qui est vraiment bien, on a l'impression de construire le tout pièce par pièce.

« Sémantique » : fait référence à la capacité des machines à rechercher et à collecter des informations avec moins d'intervention humaine ; permettre aux pages Web d'être comprises par les machines nous sera finalement bénéfique.

Sémantique des balises HTML : Elle permet à chacun de comprendre intuitivement le but et la fonction des balises (balisage) et des attributs (attribut).

1. Il est évident que la série Hx ressemble beaucoup à un titre car elle a des polices en gras et des tailles de police plus grandes.

2. , sont utilisés pour renforcer le ton.

3. Selon la structure du contenu (sémantique du contenu), sélectionnez les balises appropriées (sémantique du code) pour faciliter la lecture des développeurs et écrire du code plus élégant tout en permettant aux robots et aux navigateurs de bien l'analyser.

Voici les balises sémantiques courantes et leurs fonctions

<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> 
<title>           <!--：页面主体内容。-->
<hn>             <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>              <!--：无序列表。-->
<li>               <!--：有序列表。-->
<small>         <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>            <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>         <!--：使用黄色突出显示部分文本。-->
<figure>        <!--：规定独立的流内容（图像、图表、代码等等）（默认有40px左右margin）。-->
<cite>           <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>                <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>           <!--：datetime属性遵循特定格式，文本必须是合法的时间格式。-->
<abbr>          <!--：简称或缩写。-->
<dfn>             <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>     <!--：作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>             <!--：移除的内容。-->
<ins>             <!--：添加的内容。-->
<code>         <!--：标记代码。-->
<meter>        <!--：定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

Résumez les avantages de la sémantique :

Facile à lire pour les utilisateurs, et cela peut donner à la page une structure claire lorsque le style est perdu.

Bon pour le référencement, les moteurs de recherche déterminent le contexte et le poids des mots-clés individuels en fonction des balises.

Pratique à analyser pour d'autres appareils, tels que les lecteurs aveugles rendant des pages Web basées sur la sémantique

Procifique au développement et à la maintenance, la sémantique est plus lisible, les codes sont mieux entretenus et la relation avec CSS3 est plus harmonieuse.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!