为什么要语义化？
- 代码结构：使页面没有 css 的情况下，也能够呈现出很好的内容结构；
- 有利于 SEO： 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息；
- 提升用户体验：例如 title、alt 可以用于解释名称或者解释图片信息，以及 label 标签的灵活运用；
- 便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更加理解你的 html 结构，减少差异化；
- 方便其他设备解析：如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页；
语义化标签的由来
在 HTML5 出来之前，用 div 来表示页面头部，章节，页脚等，但是这些 div 都没有实际意义；
各大浏览器厂商分析了上百万的页面，从中发现了 div 名称的通用 id 名称大量重复；
例如，很多开发人员喜欢使用 div id=footer 来标记页脚内容，所以 Html5 元素引入了语义化标签（一组新的片段类元素）；
HTML5 常用的语义元素
header：用于定义页面的头部区域，通常包括网站 logo、主导航、全站链接以及搜索框；
nav：定义页面的导航链接部分区域；
main：定义文档的主要内容，该内容在文档中应当是独一无二的；
article：定义页面独立的内容，它可以有自己的 header、footer、sections 等，专注于单个主题的博客文章，报纸文章或网页文章；
section：表示文档中的一个区域（或节），比如，内容中的一个专题组；
aside：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体，通常表现为侧边栏或嵌入内容；
footer：定义最近一个章节内容或者根节点元素的页脚，一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息；
更多的语义化标签可以参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element
无障碍网页
什么是无障碍网页
W3C 在 1997 年发起了一项 WAI（Web Accessibility Initiative）的计划，该计划的目标是提升网站的易用性(accessibility)，而其中有一个很重要的指标，那就是能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站；
HTML5 在无障碍方面进行了加强，加入了无障碍属性；
所谓 HTML5 无障碍属性，主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文；而 HTML5 无障碍属性就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！
关于无障碍的更多说明，可以参阅 MDN：https://developer.mozilla.org/zh-CN/docs/Web/Accessibility
常见的无障碍属性
WAI-ARIA 是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性，以下是规范中三个主要的特性：
- 角色：这定义了元素是干什么的；许多「标志性的角色」，其实重复了 HTML5 的结构元素的语义价值。例如
role="navigation"(nav) 或者role="complementary"(aside)。- 属性：我们能通过定义一些属性给元素，让他们具备更多的语义;例如：
aria-required="true"意味着元素在表单上是必填的；然而aria-labelledby="label"允许在元素上设置一个 ID ，用于 labelledby 引用作为屏幕阅读器指定的 label 内容 ，多个也可以；- 状态：用于表达元素当前的条件的特殊属性，例如
aria-disabled="true"，屏幕阅读器就会这个表单禁止输入；状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它；关于 WAI-ARIA 属性重要的一点是它不会对 Web 页面有任何影响，除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍 API)，这也是屏幕阅读器这一类软件的信息源；WAI-ARIA 不会影响网页的结构，以及 DOM 等等，尽管这些属性可用于作为 CSS 选择器；
更多无障碍属性可以参阅：https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics
SEO
什么是 SEO？
SEO 由英文 Search Engine Optimization 缩写而来，中文意译为 搜索引擎优化；
其实叫做针对搜索引擎优化更容易理解。它是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的目标。
内部优化
合理的 TDK
title：浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到，搜索引擎在抓取网页时，最先读取的就是网页标题，所以 title 是否正确设置极其重要；title 一般不超过 80 个字符，而且词语间要用英文 - 隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高；
description：也就是网页的内容摘要，这是对于一个网页的简要内容概况；description 一般不超过 150 个字符，描述内容要和页面内容相关；
keywords：主要作用是告诉搜索引擎本页内容是围绕哪些词展开的；因此 keywords 的每个词都要能在内容中找到相应匹配，才有利于排名；keywords 一般不超过 3 个，每个关键词不宜过长，而且词语间要用英文 , 隔开，尽量将重要的关键字靠前放；
非装饰性图片必须加 alt
img 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容，例如：
<img src="/xxx.jpg" alt="海尔官网-双门冰箱" />alt 标签的作用：
- 增强内容相关性：它是可以利用汉字介绍文章内容的，对于一些特定的企业产品，由于视觉的体验，它往往是少文字的；
- 提高关键词密度：在操作企业站的时候，我们经常遇到是站点首屏一个大的横幅 banner ，几乎占用了首页的大部分页面，为了有效的提高首页核心关键词密度，我们只能利用一切办法增添关键词，比如：在图片的 alt 标签中添加；
对于不显示的对象谨慎使用 display:none
对于不想显示的文字内容，应当设置 z-index 或设置到浏览器显示器之外；
因为搜索引擎会过滤掉 display:none 其中的内容；
重要内容 HTML 代码放在最前
索引擎抓取 HTML 顺序是从上到下，所以我们尽量将重要的内容放在前面，保证重要内容一定会被抓取；
少用 iframe
少用或者尽量不用 iframe ，因为搜索引擎不会抓取 iframe 中的内容；
外部优化
外部优化主要是指放友情链接和外链；
好的友情链接可以快速的提高网站的权重，高质量的外链，会给你的网站提高源源不断的权重提升；
另外，就是要向各大搜索引擎登陆入口提交尚未收录站点；
属性篇：拖拽
上一篇
