Was ist die HTML5-Tag-Semantik?

In HTML5 bezieht sich Tag-Semantik auf die Fähigkeit, die Verwendung und Funktion von Tags und Attributen intuitiver zu verstehen. Die Tag-Semantik kann für Benutzer einfacher zu lesen sein, und wenn Stile verloren gehen, kann die Seite eine klare Struktur haben Zu den gängigen semantischen Tags gehören „

“, „

“ und so weiter.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, Dell G3-Computer.

Was ist HTML5-Tag-Semantik?

Die Einführung semantischer Tags ist eine gute Lösung für das Vollbild-Div-Layout. Wie der Name schon sagt, können Benutzer die Funktion und Bedeutung jedes Tags auf einen Blick erkennen Verwendet Tags mit geeigneter Semantik, damit die Seite eine gute Struktur hat, die Seitenelemente eine Bedeutung haben und für Suchmaschinen leicht verständlich sind. Ein Bild kann die Rolle semantischer Tags deutlich machen, was wirklich gut ist, als würde man das Ganze Stück für Stück aufbauen.

„Semantik“: bezieht sich auf die Fähigkeit von Maschinen, Informationen mit weniger menschlichem Eingreifen zu recherchieren und zu sammeln, was uns letztendlich zugute kommt.

HTML-Tag-Semantik: Sie ermöglicht es jedem, den Zweck und die Funktion von Tags (Markup) und Attributen (Attribut) intuitiv zu verstehen.

1. Es ist offensichtlich, dass die Hx-Serie einem Titel sehr ähnelt, da sie fette Schriftarten und größere Schriftgrößen aufweist.

2. , werden verwendet, um den Ton zu stärken.

3. Wählen Sie entsprechend der Struktur des Inhalts (Inhaltssemantik) geeignete Tags (Codesemantik) aus, um Entwicklern das Lesen zu erleichtern und eleganteren Code zu schreiben, während Crawler und Browser ihn gut analysieren können.

Im Folgenden sind gängige semantische Tags und ihre Funktionen aufgeführt.

<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>   <!--：定义运行中的进度（进程）。-->

Fassen Sie die Vorteile der Semantik zusammen:

Einfach für Benutzer zu lesen und kann der Seite eine klare Struktur verleihen, wenn der Stil verloren geht.

Gut für SEO, Suchmaschinen ermitteln den Kontext und die Gewichtung einzelner Keywords anhand von Tags.

Bequem für andere Geräte zum Parsen, z. B. für blinde Leser, die Webseiten basierend auf Semantik rendern

Förderlich für Entwicklung und Wartung, Semantik ist besser lesbar, Codes werden besser gepflegt und die Beziehung zu CSS3 ist harmonischer.

(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas ist die HTML5-Tag-Semantik?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!