【前端开发从零学起】HTML标签与搜索引擎的人机交互

在《【前端开发从零学起】HTML页面布局常用的基础标签》中讲到过HTML的常用标签。其实HTML中包含许多的标签，并且标签所呈现出文字与布局的样式都各不相同。在真正的前端开发中，为了避免布局样式出现一些不必要的BUG，对一些特殊标签的使用都比较少，因为标签的各类样式都可以通过CSS进行定义，使基础的div标签可以实现各式各样的外观形式。

但是不是这样一来，HTML中的各色标签就失去意义了呢？答案当然是否定的，存在即有它的意义。很多前端开发者只是为了实现页面而写代码，忽视了HTML页面中标签对于机器的意义。可能你现在会有疑问了；会有机器人来阅读我的HTML文档吗？实际上像百度、谷歌、bing、360等搜索引擎，他们都是通过爬行蜘蛛对网站的HTML文档内容进行抓取与解译，然后将页面内容收录到数据库中，供搜索的人查阅。因此我们需要将HTML写的更利于搜索引擎理解，从而让网站在搜索引擎中获得更大的流量。

由于HTML标签每个自身都含有一定的意义，这种含义会被搜索引擎记住，并按照这些含义解读HTML文档中的内容。从而识别出哪些是这个页面的主题，哪些是正文，哪个部分是重要内容，哪个部分是次要内容。如果我们没有做这些特殊标记辅助蜘蛛理解页面内容，可能蜘蛛就会按照自己的想法胡乱猜想了，其结果就不解释了，你懂的。

基本的概念理解以后，本课就来为大家列出一些常用的人机交互的标签。

HTML 标题

HTML标题是页面最重要的部分，在该标签内的内容会被定义为该页面的重要部分。

HTML标题是由<h1>至<h6>标签组成，h1 为主标题（最重要的）， h2（次重要的），再其次是 h3、h4、h5、h6以此类推。

请记住，页面标题heading只用在标题部分，不要用来框选大量的文本。也不要因为它可以使文字变得粗大而拿它来布局。

HTML 水平线

<hr /> 可以在HTML页面中创建水平线，其意义是作为内容小节的分段。其对于搜索引擎的意义不大，重要是提高文章的可读性，提升阅读者的体验，可以根据情况使用。

HTML 注释

HTML文档中，处于注释标记中的代码不会在页面中显示出来。书写方式为“<!– 这是一段注释的演示 –>”

其主要作用是便于代码编写人员快速理解某部分代码的含义。大家在书写代码的时候最好能够养成良好的注释习惯，便于他人快速的、读懂代码与页面的修改维护。

HTML 折行

<br />在前面的课程中有提到过，其功能是使文档或布局换行。

在HTML中，直接在代码中使用“回车”是无法使一行文字换行的。因此我们需要在文档需要换行的地方使用<br />进行换行。

之前的文章中提到过，尽量避免使用<br>的写法，而使用<br />的写法更加符合规范。

HTML强调

<strong>强调，在文档中也可以理解为加重语气。

使用strong标签的文字会与b标签一样，字体变为粗体。但是请不要仅仅是为了页面布局而随意的使用strong，因为strong标签会被搜索引擎理解，认为这部分是被强调的内容。因此策略性的使用strong标签是有必要的。

格式化文本标签

计算机代码标签

引用和术语定义

结语：通过本节的学习，希望大家对HTML中的人机交互形成一定的概念。

为了尽量的避免使用标签而影响布局的BUG，建议将代码开发工作分为两个阶段。第一步，使用纯DIV对页面进行布局，每个对应的特殊样式都使用class定义来实现（关于class的定义本节只需了解，相应内容会在后面的课程中讲到）。第二步，根据SEO的需求，策略性的将div标签更换为对用于人机交互的特殊标签。

通过以上两个步骤，使页面适合用户浏览的同时也更适合搜索引擎理解。这样的HTML代码才是优质、合格的HTML前端代码。

作者：品味人生 来源：前端开拓者（www.frontopen.com）