【WEB前端开发最佳实践系列】高可读的HTML
一、HTML语义化
HTML5中增加了很多标签都是基于此类原则设计的（article nav header footer）。页面标签语义化的优点是使得搜索引擎以及第三方抓包工具等更容易读懂页面代码、提高可读性。
如果图片是作为网页内容的一部分，则应该使用<img>元素，如果图片仅仅是起装饰作用，则应该使用背景图方式。
给空标签添加隐藏文字，用于说明表情帝额实际功能（使用text-indent达到隐藏文字的目的）。
在页面内容的标题部分使用<hx>标签。
页面中只使用一个<h1>标签。
<hx>标签使用过程中不要跳级。
不要只使用<hx>标签给内容设置样式。
二、如何正确设计表单
<label>用于为输入控件定义文本标签-----即显示在输入控件旁边的说明性文字。
用<label>元素定义的文本标签，从显示上看与其他文本毫无差异，不过它为鼠标用户增强了可用性：当用户点击由<label>元素定义的文本标签时，与该文本标签关联的输入控件将获得焦点。
要为<label>指定关联的输入控件，只需要把相关控件的id赋值给<label>标签的for属性。
使用<fieldset>元素给表单控件分组。
如果有必要，为输入控件设置tab顺序。
一个好的表单设计，还应该包括漂亮的外观、更好的交互体验和更安全的信息提交方式这些要依靠CSS样式、Javascript脚本以及逻辑的配合。
三、精简HTML代码
删除多余的容器。
装饰性的元素使用CSS样式实现。
避免使用table布局。不要使用HTML5中已废弃的标签和属性。
Modernizr框架的原理是自动检测浏览器是否支持新特性，并在<html>标签中添加对应的类，如果浏览器支持某个特性，则会添加一个以特性名称命名的类，反之则添加一个"no-"为前缀加上特性的名称的类。
