1.语义元素

• article: 表示一篇任何形式的文章，类似新闻报道等独立的内容区块；
• aside: 表示独立于页面主内容的一个完整的内容快。比如：附注栏；
• figure: 表示一幅插画。其中<figcaption>元素标注图题，而< figure>元素标注<figcaption>和插入图片的<img>元素。目标是反映图片与图题之间是关联的；
• footer: 表示页面底部的页脚。比如：版权声明，简单链接；
• header: 表示增强型标题，可以包含 HTML 标题和其他内容；
• nav: 表示页面中重要的一组链接；
• section: 表示文档中一个区块或文档，是一个通用容器；
• main: 表示页面主内容
• time: 标注日期和时间
• output: 标注 JavaScript 返回值
• mark: 标注突显文本

2. 其他语义标准

• ARIA （无障碍富因特网应用） 规定了在任意 HTML 元素上使用的属性，而通过这些属性可以为屏幕阅读器提供额外的信息。
• RDFa（资源描述框架）一种使用属性向网页中嵌入详细信息的标准，是一个稳定不变的标准。（格式严格、笨重）
• 微格式是一种在网页中嵌入元数据的简单而又比较合理的方式（比较松散）hCard、hCalendar。
• 微数据是尝试解决语义标记问题的一种选择，拥有自己的属性。（itemprop、itemtype）

搜索引擎使用元数据

SEO 搜索引擎优化，可以让网站更容易被搜索引擎曝光。Rich Snippet 是谷歌推出的一个工具，能够将 RDFa 、微格式和微数据结合起来。使用结构化数据测试工具 https://search.google.com/structured-data/testing-tool/u/0/ 测试网址或代码块中的元数据。

防止谷歌对语义数据视而不见：

• 语义数据不是主要内容，关联性要强；
• 语义数据被隐藏，谷歌不会使用 css 隐藏的语义；
• 网站中只包含很少的语义数据；

3.构建更好的 Web 表单

Web 表单是一组文本框、列表、按钮及其他可以点击的小控件，通过这些小控件可以收集网站的某些信息。

• 通过占位符 placeholder 文本添加提示（水印）注意：并不是所有每个文本框都需要、也不要使用特殊字符。
• 在 input、textare 使用焦点 autofoucs，作为正确的起点，方便填写表单。
• 验证：阻止错误 （required） 两个地方需要验证，客户端验证是为了访客提供方便，数据填写完整性；服务端验证是确保数据正确性。
• 关闭验证，要禁止整个表单的验证功能，可以在<form>元素中添加 novalidate 属性；而单个按钮则可以在 <input>中添加 formnavolidate 属性。
• 验证样式挂钩，required（必填）和 optional（选填）、valid（有效）和 invalid （无效）、in-range（在范围内）和 out-of-range（超出范围）
• 使用正则表达式，pattern
• 自定义验证，oninput
• 使用 Modernizr 检测浏览器对 Web 表单和验证的支持
• 新的输入控件：email、url、search、telephone、number、range、date、tiem、color
• 新元素：datalist（显示输入建议）、progress（进度条）、meter（计量条）、使用 command 和 menu 创建工具条和菜单。