什么是 html 语义化
说 HTML 语义化就要先说说 HTML 到底负责的什么? 下面摘自维基百科:
超文本标记语言 (英语: HyperText Markup Language, 简称: HTML) 是一种用于创建网页的标准标记语言. HTML 元素是构建网站的基石. HTML 允许嵌入图像与对象, 并且可以用于创建交互式表单, 它被用来结构化信息 -- 例如标题, 段落和列表等等, 也可用来在一定程度上描述文档的外观和语义. 关于对于语义化的理解顾轶灵: 如何理解 web 语义化? https://www.zhihu.com/question/20455165 这里讲的很清楚了我就简单说一下我的理解: 通俗的来讲就是从代码上来展示页面的结构, 而不是从最终视觉上来展示结构. 单纯的 HTML 代码是不带任何样式的只是用来标记这一段是标题, 这一块是代码, 那一个是要强调的内容等等, 但是为什么我们只写 HTML 在浏览器中不同的标签也是有不同的样式呢? 那是因为各个浏览器都自带的有相应标签的默认样式, 为了方便在没有设定样式的情况下友好的展示页面. 良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容.
为什么要使用 HTML 语义化标签
为什么要使用语义化标签? 我用 DIV+CSS 也能做出来一样的效果, 确实单纯看效果两者并没有什么区别, 但是页面不止是给人看的, 机器也要看爬虫也要看. 网页结构更清晰方便开发维护:
另外, 在网络或其他原因页面样式文件丢失的时候, 满是 div 组成的页面和良好语义结构组成的页面那个对用户更友好?
优点
标签语义化有助于构架良好的 HTML 结构, 有利于搜索引擎的建立索引, 抓取. 简单来说, 试想在 H1 标签中匹配到的关键词和在 div 中匹配到的关键词搜索引擎会吧那个结果放在前面.
有利于不同设备的解析 (屏幕阅读器, 盲人阅读器等) 满是 div 的页面这些设备如何区分那些是主要内容优先阅读?
有利于构建清晰的机构, 有利于团队的开发, 维护.
大厂都是怎么做的?
看一下大厂的操作, 打开淘宝的页面查看它首页的源码发现, 全局只有一个 h1 标签就是他的 LOGO.
再往下看主题分栏的标题是 h2
再往下看, 分栏都是用的 h3 标签, 并且内部使用了一个隐藏的 < em></em > 专门强调处理.
尽管这些东西都是用 div+css 就能搞出来的, 但是它还是专门使用了相应的语义化标签来强调作用.
写语义化代码应该注意什么
尽可能少的使用无语义的标签 div 和 span; 在语义不明显时, 既可以使用 div 或者 p 时, 尽量用 p, 因为 p 在默认情况下有上下间距, 对兼容特殊终端有利;
不要使用纯样式标签, 如: b,font,u 等, 改用 css 设置. 需要强调的文本, 可以包含在 strong 或者 em 标签中(浏览器预设样式, 能用 CSS 指定就不用他们),strong 默认样式是加粗(不要用 b),em 是斜体(不用 i);
使用表格时, 标题要用 caption, 表头用 thead, 主体部分用 tbody 包围, 尾部用 tfoot 包围. 表头和一般单元格要区分开, 表头用 th, 单元格用 td;
表单域要用 fieldset 标签包起来, 并用 legend 标签说明表单的用途; 每个 input 标签对应的说明文本都需要使用 label 标签, 并且通过为 input 设置 id 属性, 在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来.
常用的一些语义化标签
<h1>~<h6> , 作为标题使用, 并且依据重要性递减,<h1> 是最高的等级.
<p > 段落标记, 知道了 <p> 作为段落, 你就不会再使用 <br /> 来换行了, 而且不需要 <br /> 来区分段落与段落.<p> 中的文字会自动换行, 而且换行的效果优于 <br />. 段落与段落之间的空隙也可以利用 CSS 来控制, 很容易而且清晰的区分出段落与段落.
<ul>,<ol>,<li>,<ul> 无序列表, 这个被大家广泛的使用,<ol> 有序列表不常用. 在 Web 标准化过程中,<ul> 还被更多的用于导航条, 本来导航条就是个列表, 这样做是完全正确的, 而且当你的浏览器不支持 CSS 的时候, 导航链接仍然很好使, 只是美观方面差了一点而已.
<dl>,<dt>,<dd>,<dl> 就是 "定义列表". 比如说词典里面的词的解释, 定义就可以用这种列表. dl 不单独使用, 它通常与 dt 和 dd 一起使用. dl 开启一个定义列表, dt 表示要定义的项目名称, dd 表示对 dt 的项目的描述.
<em>,<strong>,<em> 是用作强调,<strong> 是用作重点强调.
<table>,<thead>,<tbody>,<td>,<th>,<caption>, 就是用来做表格不要用来布局
HTML5 新增的那些
HTML5 标准更加的讲究语义化了, 借用一张网上的图来说明这些新标签
header 元素: header 元素代表 "网页" 或 "section" 的页眉.
footer 元素: footer 元素代表 "网页" 或 "section" 的页脚, 通常含有该节的一些基本信息, 譬如: 作者, 相关文档链接, 版权资料.
hgroup 元素:
nav 元素: nav 元素代表页面的导航链接区域. 用于定义页面的主要导航部分.
aside 元素: aside 元素被包含在 article 元素中作为主要内容的附属信息部分, 其中的内容可以是与当前文章有关的相关资料, 标签, 名次解释等.(特殊的 section)
section 元素: section 元素代表文档中的 "节" 或 "段","段" 可以是指一篇文章里按照主题的分段;"节" 可以是指一个页面里的分组. section 通常还带标题, 虽然 html5 中 section 会自动给标题 h1-h6 降级, 但是最好手动给他们降级.
article 元素: article 元素最容易跟 section 和 div 容易混淆, 其实 article 代表一个在文档, 页面或者网站中自成一体的内容, 其目的是为了让开发者独立开发或重用. 譬如论坛的帖子, 博客上的文章, 一篇用户的评论, 一个互动的 widget 小工具.(特殊的 section)除了它的内容, article 会有一个标题(通常会在 header 里), 会有一个 footer 页脚.
推荐看原博主的博客: 传送门 http://www.html5jscss.com/html5-semantics-section.html
参考链接
- https://www.zhihu.com/question/20583492/answer/260535796
- https://www.zhihu.com/question/20455165
- https://www.zhihu.com/question/20583492
- https://www.cnblogs.com/freeyiyi1993/p/3615179.html
- http://www.html5jscss.com/html5-semantics-section.html
- https://segmentfault.com/a/1190000004179484
来源: https://juejin.im/post/5ae029bcf265da0b7155f15d