HTML的语义化｜ 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
「HTML」(Hyper Text Markup Language):超文本标记语言。
「所谓超文本，有2层含义：」
- 因为它可以加入图片、声音、动画、多媒体等内容 （超越文本限制 ）
- 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接 （超级链接文本）
Semantics（语义）
在编程中，语义指的是一段代码的含义。
HTML中的元素、属性及属性值都拥有某些含义。
举个栗子："这个 HTML 的元素有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么？"。）
HTML中的语义化
语义化， 指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。
开发者应该遵循语义来编写HTML
举几个栗子：
- 有序列表用 ol
- 无序列表用 ul
- lang 属性表示内容所使用的语言
- …
为什么要关注语义化
谁在使用我们写的HTML
- 开发者- 修改、维护页面
- 浏览器- 展示页面
- 搜索引擎- 提取关键词、排序
- 屏幕阅读器- 给盲人读页面内容
语义化的好处：
- 方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析，如盲人阅读器根据语义渲染网页
被滥用的语义化标签
以下是一些广泛被滥用的语义化标签：
<blockquote>：块级引用元素：某人通过使用<blockquote>标签使文本达到缩进的目的，因为引用默认会进行文本缩进。但如果某人仅仅是想使文本达到缩进目的，而文本自身并非引用，那么就用CSS margin来代替更加合适。p：某人可能会用<p> </p>来为标签自检增加额外的空白段落，这里应该使用CSS margin/padding来实现。ul：某人往<ul>中添加文本来达到文本缩进的目的，这种做法即不符合语义化要求，同样也是非法的HTML实践。<ul>标签中只能有<li>标签。
简单地说，我们要通过HTML传达的是内容，而非样式，用正确的标签做正确的事。
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
语义化标签介绍
简单了解，可以看这篇文章 《初探 · HTML5语义化》
详细了解，可在MDN或者W3C上进行具体的查询。
