你遇到的大多数网页都是通过HTML(万维网的标记语言)呈现给你的。在本文中，我将与您分享20种HTML最佳实践，它们将导致干净和正确的标记。拥有合适的HTML结构允许不同的工具和设备正确地显示内容。
这意味着，正确的HTML格式可以决定是令人愉快的用户体验，还是从你的网站快速反弹。在我们开始之前，我们先来了解一下HTML和HTML5之间的区别是什么?这些也是HTML5的最佳实践吗?
HTML5是HTML的第五个版本，提供了更好的web应用程序和网站内容管理。这些技巧适用于HTML和HTML5。
1.总是声明一个Doctype
doctype声明应该是HTML文档中的第一件事。doctype声明告诉浏览器您将使用的XHTML标准，并帮助浏览器正确读取和呈现标记。我建议使用XHTML 1.0严格的文档类型。
一些开发人员认为这是一个艰难的选择，因为这个特殊的标准比松散或过渡的文档类型声明更不宽容，但它也确保您的代码严格遵守最新的标准。
<！-//W3C//< >强严格DTD XHTML 1.0/ / EN " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
2.使用有意义的标题标签
的<标题>标签有助于使网页更有意义和搜索引擎友好。控件中的文本<标题>标签会出现在谷歌的搜索引擎结果页面，以及用户的网页浏览器栏和标签中。以下面的例子为例:
<标题>六次修订- Web开发和设计信息> /标题>
上面的例子出现在谷歌的搜索引擎结果页面上，如下图所示:
3.使用描述性元标签
元标签使您的网页更有意义的用户代理，如搜索引擎蜘蛛。
描述元属性
的描述元属性描述你的网页的基本目的(网页包含的摘要)。对于每个网页，你应该在元描述标签内放置一个简洁和相关的摘要。例如，这个描述:
显示在谷歌的搜索引擎结果页面如下:
不要试图把你的描述发送垃圾邮件重复的单词和短语，因为搜索引擎足够智能，可以检测到。
相反，在解释你的网页的目的时要尽量简单明了。
关键字元属性
的关键字元属性包含一个逗号分隔的关键字和短语列表，与您的网页。这些关键词让你的网页更有意义。就像描述元属性，避免词语重复;只要提到几个词，适当地描述和分类您的网页。
4.使用div将你的布局划分为主要部分
考虑把你的网页分成几个主要部分，这是构建网站设计的第一步。
从一开始就这样做可以促进代码的整洁和整齐缩进。它还将帮助您避免混淆和过度使用div，特别是在您正在编写复杂和冗长的标记时。
5.将内容与表示分开
HTML就是内容。CSS提供内容的可视化表示。没有混合。
不要在HTML中使用内联样式。总是为样式创建一个单独的CSS文件。这将帮助您和将来可能处理您的代码的开发人员更快地更改设计，并使用户代理更容易理解您的内容。
糟糕的做法:内联样式
在下面，您可以看到一个段落元素，它使用风格属性。它会起作用，但这是一种糟糕的做法。
< p风格= "颜色:#美国广播公司(abc);字体大小:14 px;无衬线字体类型:arial;我讨厌把我的内容和展示分开
6.精简和统一CSS
一个简单的网站通常有一个主要的CSS文件，可能还有其他一些类似的东西CSS重置特定和修复。但是每个CSS文件必须发出一个HTTP请求，这会降低速度网站加载时间．这个问题的一个解决方案是缩小(去掉不需要的字符，如空格、换行符和制表符)所有的代码，并尝试将可以合并到一个文件中的文件统一起来。
这将改善您的网站加载时间。这种方法的一个问题是，您必须“取消缩减”(因为读取未格式化的代码很困难)，然后每次需要更新代码时都要重新执行缩减过程。所以最好是在制作周期的末尾进行这项工作。
在线工具来缩小和优化CSS可以在这个列表中找到CSS优化器．此外，总是将样式表引用链接放在<头> < / >头标签，因为它将帮助您的网页感觉更敏感，而加载。
7.最小化、统一和下移JavaScript
和CSS一样，永远不要使用内联JavaScript，尽量减少和统一你的JavaScript库，以减少生成一个网页所需的HTTP请求的数量。但与CSS不同的是，外部JavaScript文件有一个非常糟糕的地方:浏览器不允许并行下载，这意味着浏览器在下载JavaScript时不能下载任何东西，导致页面看起来加载缓慢。因此，这里的最佳策略是最后加载JavaScript(即最后加载JavaScript)。
在CSS加载后)。为此，尽可能将JavaScript放在HTML文档的底部。最佳实践建议在交易结束前做这件事身体< >标签。
例子
8.明智地使用标题元素
学习使用<标题>来<编辑>元素来表示HTML的内容层次结构。这有助于使您的内容对屏幕阅读软件和搜索引擎，以及其他用户代理更有意义。
例子
这是最上面的标题
这是最上面标题下面的子标题。
这是h2标题下面的一个小标题
对于博客，我非常推荐使用<标题>元素为博客文章的标题而不是网站的名称，因为这是搜索引擎最重要的事情。
WordPress代码示例
< h1类= "条目标题" > < ?php标题();这样h1 ? > < / >
9.在正确的地方使用正确的HTML元素
了解所有可用的HTML元素，并正确地将它们用于语义和有意义的内容结构。使用< em >为< em >新兴市场事物之某一面,< >强为< >强沉重的重点,而不是<我>或< b >(弃用)。
例子
强调文本 强烈强调文本
使用< p >的段落。不要使用< br / >在段落之间加一条新线;使用CSS的边距和/或填充属性。对于一组相关元素，请使用:
< ul >(无序列表)当列表项的顺序不重要时< ol >(有序列表)当列表项的顺序很重要时< dl >(定义列表)用于项目/定义对
不要使用< blockquote >缩进的目的;在引用文本时使用它。
10.不要在任何事情上都使用div
有时候，开发人员最终会进行包装< div >标签在多个< div >包含更多的标签< div >标签，创建了一堆div。下W3C HTML规范的最新草案,一个< div >是一个毫无意义的元素，应该“在没有其他元素合适的时候，作为最后的手段”使用。但是很多人甚至在一些简单的事情上使用它，比如将内联元素显示为块元素(而不是显示:块;CSS属性)。避免创造山的divs使用节制和负责任。
11.使用无序列表()进行导航
导航是网站设计中非常重要的一个方面< ul >元素与CSS的结合使你的导航菜单具有语义性(因为，毕竟导航菜单是一个链接列表)和美观性。此外，按照惯例，导航菜单的无序列表是可接受的标记。
无序列表的一个例子
李< ul id = " main_nav " > < > < a href = " # "类=“活跃”>家< / > < /李> <李> < a href = " # " >对< / > < /李> <李> < a href = " # " >组合< / > < /李> <李> < a href = " # " >服务< / > < /李> <李> < a href = " # " >博客< / > < /李> <李> < a href = " # " >联系我们< / > < /李> < / ul >
将无序列表样式设置为水平导航栏
# main_nav{:绝对;右:30 px;} #main_nav li{浮动:左;margin-left: 2 px;} #main_nav li a{字体大小:16px;颜色:# fff;文字修饰:没有;填充:8 px 15 px;-moz-border-radius: 7 px;-webkit-border-radius: 7 px; border-radius:7px;} #main_nav li a.active, #main_nav li a:hover{ background-color:#0b86cb; }
输出
12.闭上你的标签
关闭所有标记是W3C规范。有些浏览器仍然可以正确地呈现页面(在Quirks模式下)，但不关闭标签在标准下是无效的。
例子
13.使用小写标记
保持较低的加价是行业标准做法。将你的标记大写将会起作用，并且可能不会影响你网页的呈现方式，但是它会影响代码的可读性。
不好的做法
良好的实践
14.对图像使用Alt属性
使用有意义的alt属性与< img >元素是编写有效的语义代码的必要条件。
不好的做法
< img id = "标志" src = "图片/ bgr_logo.png " / >
<！——有一个Alt属性，它将被验证，但Alt值是无意义的——>< img id = "标志" src = "图片/ bgr_logo.png”< >强alt= " brg_logo.png "/>
良好的实践
< img id = "标志" src = "图片/ bgr_logo.png”< >强alt= " Six Revisions标志"/>
15.使用Title Attributes with Links (When Needed)
使用一个标题当正确使用时，锚元素中的属性将提高可访问性。重要的是要理解标题属性应该用来增加锚标记的意义。
不好的做法
<！——冗余标题属性——>< a href = " http://blog.com/all-articles "< >强标题=“点击这里”< / > >点击这里。
当屏幕阅读器读取锚标记时，侦听器必须听两次相同的文本。更糟糕的是，它没有解释所链接的页面是什么。如果你只是重复锚的文本或不打算描述被链接的页面，最好不要使用标题在所有。
良好的实践
< a href = " http://blog.com/all-articles "< >强标题=“所有文章的列表。”< / > >点击这里。
16.在Web表单中使用字段集和标签
使用<标识>元素来标记输入字段。将输入字段划分为使用的逻辑集<自定义字段>．说出一个<自定义字段>使用<传奇>．
所有这些都将使用户更容易理解您的表单，并提高代码的质量。
例子
17.使用模块化IE修复
如果你的网页有问题，你可以使用条件注释来针对Internet Explorer。
IE 7例
<！——[if IE 7]>
IE 6的例子
<！——[if IE 6]> <脚本类型="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"> <脚本类型="text/javascript"> DD_belatedPNG.fix('#logo');< /脚本> < !(endif)——>
然而，尝试让你的补丁模块化，以适应未来的工作，这样当旧版本的IE不再需要支持时，你只需要在一个地方更新你的网站(例如，去掉对IE -6.css样式表的引用)。顺便说一下，为了在IE6中渲染PNG透明度，我推荐使用dd_late PNG脚本(上面引用的JavaScript方法)。
18.验证您的代码
确认不应该是对好工作和坏工作的最终评估。仅仅因为您的工作是有效的这并不意味着它就是好的代码；相反，没有完全验证的工作并不意味着它是坏的(如果您不相信我，可以尝试自动验证谷歌或Yahoo!)但是自动验证服务，比如免费的W3C标记验证Service是一个有用的调试器，可以帮助您识别呈现错误。
在编写HTML时，养成频繁验证的习惯;这将使你避免在工作完成后难以确定(或重做)的问题。
19.编写一致格式的代码
一个写得干净、缩进良好的代码库显示出您的专业性，以及对可能需要使用您的代码的其他人的考虑。从一开始就正确地写缩进干净的标记;它会增加你的作品的可读性。
20.避免过度的评论
在记录代码时，目的是使其更容易理解，因此注释代码逻辑对于PHP、Java和c#等编程语言是一件好事。但是标记非常自解释，注释每一行代码在HTML/XHTML中没有意义。如果您发现自己经常对HTML进行注释，以解释发生了什么，那么您应该检查您的工作，以了解语义和适当的命名约定．
对这些HTML最佳实践感到不知所措?
当您考虑更改HTML时，可能会感到有些不知所措。我们可以帮助!
了解更多关于我们的网站维护和支持计划，在线联系我们或者今天打电话给我们< >强888-256-9448和一个战略家谈话!
相关内容
关于作者
Saqib萨瓦尔是一个拥有超过7年网页开发经验的自由网页开发者。他擅长XHTML、CSS、PHP和WordPress的开发。他喜欢编写结构良好、干净的验证代码。
通过萨奇布的自由职业业务/博客与他取得联系，960年发展并在Twitter上以@的身份关注他saqibsarwar．
