你真的明白HTML标签的语义化吗？为什么不能都使用div标签

魔法小白呀哈哈 12-22 24

前言：

今天姐妹们对“html语义化的作用”可能比较关怀，姐妹们都想要了解一些“html语义化的作用”的相关知识。那么小编同时在网摘上汇集了一些对于“html语义化的作用””的相关内容，希望姐妹们能喜欢，看官们一起来学习一下吧！

（一）HTML语义化

语义化可以总结为根据内容选择标签，用最恰当的标签来标记内容

例如网页中的标题使用<h1>~<h6>这样的标签，而不是使用<div>+css

（二）语义化好处使HTML结构变得清晰，有利于维护代码和添加样式通常语义化HTML会使代码变的更少，使页面加载更快即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫可以依赖于标签来确定上下文和各个关键字的权重（三）注意语义化编写尽可能少的使用无语义的标签<div>和<span>不要使用纯样式标签，如<b>是纯样式标签，而<strong>的语义为加粗在<lable>标签中设置for来让说明文本和相对应的<input>关联起来表单域要用<fieldset>标签包起来，并用<legend>标签说明表单的用途需要强调的文本，可以包含在strong或者em标签中，<strong>默认样式是加粗，<em>是斜体使用表格时，标题要用<caption>，表头用<thead>，主体部分用<tbody>包围，尾部用<tfoot>包围。表头和一般单元格要区分开，表头用<th>，单元格用<td>

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程，还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

（四）常用语义化标签<h1>~<h6> 定义页面的标题，<h1>-<h6>元素等级依次降低。<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。<nav> 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。<main> 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。<article> 专注于单个主题的博客文章，报纸文章或网页文章。<address> 提供了一个或多个人员或组织的联系信息。<section> 表示HTML文档中包含的独立部分。<aside> 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。<footer> 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。<hgroup> 表示文档部分的多级标题，它对一组<h1>~<h6>元素进行分组。<ul> 表示项目的无序列表，通常呈现为项目符号列表。<ol> 表示项目的有序列表，通常呈现为编号列表。<li> 表示列表中的项目。<strong> 表示强调突出重点内容，浏览器通常以粗体显示内容。<em> 标记强调重点的文本，可以嵌套<em>元素，嵌套的每个级别都表示强调程度更高。<small> 代表旁注和小字体，例如版权和法律文本，独立于其样式表示。<abbr> 表示缩写或首字母缩写词。<cite> 用于描述对引用的创意作品的引用，并且必须包括该作品的标题。<figure> 表示独立的内容，可能带有可选的标题，该标题使用<figcaption>元素指定。<figcaption> 表示说明其父<figure>元素的其余内容的标题或图例。<blockquote> 定义块引用，可以使用<cite>元素提供文本表示<mark> 表示被标记或突出显示以供参考或标记目的的文本。<time> 表示特定的时间。<data> 表示特定的日期。<dfn> 用于表示在定义短语或句子的上下文中定义的术语。<code> 计算机代码的简短片段的方式显示其内容的样式。<samp> 输出的示例或引用的内联文本或样本文本。<kbd> 表示文本是从键盘上键入的，它经常用在与计算机相关的文档或手册中。<del> 表示已从文档中删除的文本范围。<ins> 表示已添加到文档中的文本范围。<menu> 表示用户可以执行或激活的一组命令，例如上下文菜单等。<dialog> 表示对话框或其他交互式组件，例如检查器或子窗口。<summary> 元素为<details>元素的显示框指定摘要，标题或图例。<details> 描述文档或文档某个部分的细节。（五）弃用的HTML元素