Web前端代码中，HTML是根本，CSS和JavaScript也是围绕着既有的HTML结构来构建，所以良好的HTML代码结构，除了提高了HTML代码的可读性，可维护性和执行性能之外，也可以让相对应的CSS和JavaScript代码更好的构建。距前面两篇探讨JavaScript（前端代码标准最佳实践：JavaScript篇）和CSS（前端代码标准最佳实践：CSS篇）之后，我们今天来探讨Web前端HTML的一些最佳实践。

（1）HTML代码的基本规范

1. HTML的命名和格式

任何代码的混乱都是从命名和格式的混乱开始的，所以一定要有统一和规范的命名和格式，以下是一些基本的规范。

HTML代码所有的标签名和属性应该都为小写，虽然HTML代码是大小写不敏感的，但是W3c的规范建议为小写；属性值应该用双引号包括。

给所有的关键元素定义元素的id和class，便于和CSS，JavaScript的交互；id名称中的关键词用下划线（_）连接，class的关键词用中划线（-）连接，根据实际的意义和Dom树的层级关系定义合适的名称。

HTML代码的层级缩进为4个空格；值为空的元素定义应该单独占用一行；包含子元素的元素的起始标签和闭合标签分别单独占用一行。

例子：

<div id="info_container" class="info-container">
    <div class="container-top"></div>
    <article>
         ...
    </article>
    <div class="container-bottom"></div>
</div>

2 CSS代码和HTML代码分离

样式可以直接写在标签的style属性里面，也可以写在页面head区域的style标签里面，这两种方式都是不好的方式，尤其第一种方式。应该把样式单独写到css样式文件中，方便代码的重用和维护。

3. 写标准的HTML代码

所有的HTML标签应该正确闭合；所有的元素定义都要有起始和闭合标签，即使元素的值为空，除了如下这些标签，如下的标签是可以自闭合：<br/><hr/><input/><img/>等。

停止规范不支持的标签，如下的标签规范已经不推荐使用，尽管浏览器可以正确的解析：<center><font><s><strike><u><menu>等。

停止使用规范不支持的属性，如下的属性已经不推荐使用：body的background属性，某些标签的align属性，td和th上的nowrap属性，某些标签的width和height属性等。其实这些规范不推荐的标签和属性都是一些影响外观的标签和属性，都可以通过CSS样式来设置。

应该经常验证代码的标准性，可以使用w3c提供的验证工具:Unicorn。

（2）高可读性的HTML代码

1. 合适的地方用合适的标签

HTML代码不是纯粹为了让浏览器展现，也需要良好的可读性，方便代码的检查和维护，更重要的是各种搜索引擎也能更好地识别页面内容，所以要写有语义的HTML代码，即经常提到的HTML标签语义化。

div和span是两个典型的没有任何语义的标签，所以使用这两个标签之前先确认，是否有更具有语义的标签可以代替。

<h1>~<h6>

h1到h6是作为标题的，h1是最高级别的标题，网页中显示标题的地方应该使用这些标题标签。

<em>和<strong>

这两个标签的语义是强调和重点强调，代替了没有任何语义的标签<i>和<b>。

<table>

table标签最早是经常用于布局，至今还有大量的页面是由table来布局的，table布局遭到了前端工程师们的一致唾弃，使得很多新手不敢使用这个标签了，这里要强调的是table的语义是表格，如果需要列出一些统计数据等，table标签是首选。

<ul>，<ol>，<li>

<ul>是无序列表，<ol>是有序列表，所以网页的导航菜单最合适用ul，而一些有序的列表，比如章节列表等，则应该用ol标签。

不好的例子：

<div class="title">文章标题</div>

<p>
正文内容，<b>需要强调的内容</b>
</p>

<div class="main-menu">
    <span>导航1</span>
    <span>导航2</span>
    <span>导航3</span>
</div>

规范的例子：

<h1>文章标题</h1>

<p>
正文内容，<strong>需要强调的内容</strong>
</p>

<ul class="main-menu">
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
</ul>

2. 给页面添加必要的meta

meta信息描述有关页面的信息，放在页面的head部分，用于搜索引擎更友好的识别。如下是常用的一些定义：

<meta name="author" content="John Doe">
<meta name="copyright" content="&copy; 1997 Acme Corp.">
<meta name="keywords" content="corporate,guidelines,cataloging">
<meta name="date" content="1994-11-06T08:49:37+00:00">

3. 不要省略某些标签的属性