code前端网什么是 HTML 语义标签？ HTML5有哪些新功能以及各大厂商是如何做的？
什么是HTML语义
要讲HTML语义，首先要讲一下HTML负责什么？以下内容摘自维基百科：
超文本标记语言（英语：HyperText Markup Language，缩写：HTML）是一种用于创建网页的标准标记语言。 HTML 元素是构建网页的构建块。 HTML 允许嵌入图像和对象，并且可用于创建交互式表单。它用于结构化信息——例如标题、段落、列表等，也可以在某种程度上用于描述文档的外观和语义。关于顾轶灵的语义：如何理解网络语义？这里已经很清楚了，所以我简单解释一下我的理解：通俗地说，它是从代码上展示页面的结构，而不是从最终的视觉角度展示页面的结构。纯 HTML 代码是没有样式。它只是用来标记该部分为标题，该部分为代码，哪一部分下划线为内容等。但为什么我们只在浏览器中编写HTML呢？不同的标签是否也有不同的风格？这是因为每个浏览器都为相应的标签提供了自己的默认样式，以便于无需设置样式即可友好地显示页面。有了好的语义代码，你可以直接从代码中看出内容应该表达什么。
为什么 HTML 使用语义标签？
为什么要使用语义标签？我也可以使用DIV + CSS来达到同样的效果。单纯看效果两者其实没有什么区别，但是页面不仅是给人看的，也是给机器和爬虫看的。网站的结构更加清晰，更容易开发和维护：
另外，如果由于网络或者其他原因导致页面样式文件丢失，这样更方便，使用div或div等方式制作的页面。一个由良好语义结构组成的页面？
好处
- 语义标签有助于构建良好的 HTML 结构，有利于搜索引擎索引和爬行。简单来说，如果你想到H1标签中匹配的关键字和div中匹配的关键字，搜索引擎就会将该结果放在第一位。
- 方便不同设备（屏幕阅读器、盲人阅读器等）进行解析。当页面充满 div 时，这些设备如何区分哪些设备首先读取主要内容？
- 有利于建立清晰的组织，有利于团队的发展和维护。
大厂商是如何做到的？
看看大厂的运作，打开淘宝页面查看其首页源码发现全世界只有一个h1标签就是它的LOGO。
再往下看，主题栏目标题是h2
再往下看，栏目全部使用h3标签，内部使用了一个隐藏的 虽然这些东西可以用div+css来创建，但它仍然使用适当的语义标签来强调功能。 HTML5标准更加语义化。我从互联网上借用了一张图片来说明这些新标签。 作者：CodeDeer。 特别强调加工。 , ♓> 被广泛使用，编写语义代码时要注意什么
一些常用的语义标签
~用作标题，按重要性降序排列，为最高级别。 段落标记，知道 作为段落，您不再使用
表示 中的文字会自动换行，换行效果比、，l ， ， 。例如，这种类型的列表可以用于词典中单词的解释和定义。 dl 不单独使用，通常与 dt、dd 一起使用。 dl 打开定义列表，dt 代表要定义的项目名称，dd 代表 dt 项目的描述。 >,, 、、 用于重音， 用于强调。 、、> ，它是用来制作表格的，不是用于布局的 HTML5中新添加的
标题元素：标题元素表示“网页”或“部分”的标题。 Footer元素：footer元素代表“网页”或“章节”的页脚，通常包含该章节的一些基本信息，例如：作者、相关文档链接、版权信息等。 hgroup元素：nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。 aside 元素：side 元素包含在文章元素中，作为主要内容的辅助信息部分。内容可以包括与当前文章相关的相关信息、标签、排名说明等。（特殊节） 节元素：节元素表示文档中的“节”或“章节”。 “节”可以指文章中基于主题的小节； “部分”可以指页面上的组。章节通常也有标题。尽管 HTML5 中的部分会自动降级标题 h1-h6，但最好手动降级。 Article元素：article元素最容易与section和div混淆。事实上，文章代表了文档、页面或网站中的独立内容，其目的是让开发者能够独立开发或使用。例如，论坛帖子、博客上的文章、用户评论或交互式小部件。 （特殊部分）除了内容之外，文章还有标题（通常在页眉中）和页脚。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
