In HTML5, tag semantics refers to the ability to more intuitively understand the uses and functions of tags and attributes; tag semantics can make it easier for users to read, and can give the page a clear structure when the style is lost. It is conducive to development and maintenance. Common semantic tags include "1aa9e5d373740b65a0cc8f0a02150c53", "c787b9a589a3ece771e842a6176cf8e9", "61b85035edf2b42260fdb5632dc5728a" and so on.
The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer .
What is html5 tag semantics
The introduction of semantic tags is a good solution to the full-screen div layout. Semantic, as the name suggests, allows people to see the role of each tag at a glance. And meaning, use semantically appropriate tags to make the page have a good structure, and the page elements have meaning, which can be easily understood by both search engines and search engines. A picture can clearly show the role of semantic tags, which is really good. It feels like building the whole thing piece by piece.
"Semantic": refers to the ability of machines to research and collect information with less human intervention; allowing web pages to be understood by machines will ultimately benefit us.
HTML tag semantics: It allows everyone to intuitively understand the purpose and function of tags (markup) and attributes (attribute).
1. It is obvious that the Hx series looks a lot like the title because it has bold font and larger font size.
2. 8e99a69fbe029cd4e2b854e244eab143,907fae80ddef53131f3292ee4f81644b are used to strengthen the tone.
3. According to the structure of the content (content semantics), select appropriate tags (code semantics) to facilitate developers to read, and write more elegant code while making crawlers and browsers better ground analysis.
The following are common semantic tags and their functions
<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> <!--：定义运行中的进度（进程）。-->
Summary of the advantages of semantics:
Easy for users to read, Styling can give the page a clear structure when it's lost.
Conducive to SEO, search engines determine the context and weight of each keyword based on tags.
Convenient for other devices to parse, such as blind readers rendering web pages based on semantics
It is conducive to development and maintenance, semantics are more readable, codes are better maintained, and the relationship with CSS3 is more harmonious.
(Learning video sharing: css video tutorial, html video tutorial)
The above is the detailed content of What is html5 tag semantics. For more information, please follow other related articles on the PHP Chinese website!