只需稍加努力，我们就可以使标记更有意义。但是为什么要投入额外的时间和资源来实现语义HTML呢?大多数用户不阅读我们的HTML。

他们只关心屏幕上的内容。语义HTML实际上只适用于机器。他们不像你和我那么聪明，所以我们需要帮助他们。

受益于语义HTML的机器的一个例子是搜索引擎。当搜索引擎索引我们的网站时，他们会根据我们的标记来解释我们网页的内容。这是谷歌所说的使用语义HTML(重点是我的):

谷歌(和其他搜索引擎)可以使用该数据更好地索引你的内容，在搜索结果中更突出地显示它，并将其呈现在语音应答、地图和谷歌Now等新体验中。

使用结构化数据标记提升您的内容

像Facebook、Pinterest和Twitter这样的社交媒体网络服务都喜欢语义标记。特别是当我们的用户在上面分享我们的内容时。这些web服务将我们的部分文章显示在它们的平台上。

如果我们使用语义HTML，他们就能做得更好。语言翻译工具检查我们的标记，以便将文章转换为另一种语言。好的HTML标记可以产生更准确的翻译。

例如，美式英语和英式英语之间有细微的区别。人们可以很容易地理解辨证差异和习惯差异。但机器可能不会。

语义HTML还增强了网页的可访问性。像屏幕阅读软件这样的辅助技术可以解析和解释我们的HTML。使用语义HTML，有特殊需求的人将能够更容易地阅读和浏览我们的文章。这只是冰山一角。

还有无数其他机器在看我们的HTML并试图理解它。因特网是由一堆机器组成的。它们是网络的重要组成部分。

我们应该尽力为他们提供更多有意义的数据。好了，现在，我希望你能理解。现在您需要使用语义HTML。也许在你的博客上。

或者在CMS开发项目中。查看下面的样板文件。

HTML模板

这是一个网页内容的语义HTML模板。这是一个很好的起点/样板。

填空就行了。它足够通用，可以处理许多类型的文本内容。博客文章、新闻文章、随笔等等。

更新:2015年4月8日控件的错误使用导致该模板被更改主要而且总结HTML元素。看到这样的评论在下面。

<！DOCTYPE html>   
   
  
 
 
 < a itemprop="author" href="">
 
 
  

HTML标记模板使用语义HTML元素(即。文章，头,页脚）.

此外，它使用来自Schema.org的结构化数据标记。特别是文章而且网页模式。Schema.org是谷歌、Bing和Yahoo的一个联合项目。

该项目的目标是为搜索引擎提供一种更好地理解我们内容的方法。

例子

下面是一个填写好的例子:

<！DOCTYPE html>   
 < meta itemprop="author" name="author" content=" author name "> 
  
 
 
文章的标题
  1990年11月12日 
By 作者名
 
 
文章摘要。这可以是导语、摘录、摘要或介绍段。
 
 
文章的主体在这里。
 
  
  

视图的例子

细节

让我们讨论一下HTML模板的各个部分。

指定内容类型、语言和文本方向

的超文本标记语言元素有四个属性:

• itemscope表示Article模式在整个HTML文档中使用。
• itemtype包含正在使用的模式的web地址。
• 朗给出关于内容用何种语言编写的信息。W3C说我们应该现在使用列出的语言代码IANA语言子标签注册表．

  例如，如果页面是用德语编写的，我们应该分配朗属性的值德．

• dir提供关于文章的文本方向的信息。你有两个选择。dir是从“左到右”(当你)或“从右向左”(rtl）.

  如果您想让浏览器为您决定，请取出dir属性。

HTML语义结构

为了有意义地组织我们的内容，我们根据W3C规范使用以下HTML元素。

元素	描述
文章	的文章元素表示一个独立的内容。在样板文件中，它包含了我们所有可见的内容。
头	类的子元素是介绍性内容的最佳结构头元素。在文章的上下文中，介绍性内容可以是文章的标题、发表日期和作者姓名。
页脚	“页脚通常包含其部分的信息，例如作者，相关文档的链接，版权数据，等等。”- - -4.3.8 footer元素

BBC在所有的文章中都使用引导句。

结构化数据

样板文件使用微数据来加强我们的语义HTML结构。

而且，如果您担心使用新的HTML5元素，那么您可以将它们替换为受良好支持的元素，例如div年代和跨度S，并且仍然能够用微数据提供语义信息。下面是HTML模板中使用的微数据的简短描述。

微数据	描述
的名字	此属性指向项的名称。在我们的例子中，item是冠词。 的的名字我们文章的主要特点是网页标题，用HTML表示标题元素。这是一个常见的做法，网页标题是唯一的(因为SEO)，所以标题元素的值在大多数情况下是我们文章的好名称。
标题	这篇文章的人可读的标题。的值使用一个简短的、富含关键字的值<标题>元素，然后是描述文章主题的较长的标题。
描述	简要说明这篇文章的内容。属性的赋值< meta name = "描述" >标签在大多数情况下工作良好。
作者	内容创建者的名称。 在HTML模板中，它用于< meta name = "作者" >标签和文章的可见内容。
datePublished	这个属性允许我们显式地声明<时间>元素中的头包含文章发布的日期。
关于	这应该用于描述文章主题的文本。它非常适用于开头句/段落。
articleBody	此属性表示文章的主体。
dateModified	你可能想让人们知道文章最后一次被审查和更新是什么时候。如果我们想给机器同样的礼貌，我们需要使用dateModified财产。这也给了web服务一个提示，它们应该更新它们的索引，因为内容已经改变了。
relatedLink	此属性用于与文章相关的链接。的relatedLink财产的一部分网页模式所以我们必须在父元素中声明项目类型。

使用更有意义的标记

如前所述，HTML模板只是一个通用的起点。

考虑使用额外的微数据(和其他语义HTML元素)使您的内容更有意义。org为各种各样的内容类型提供了大量模式。下面是一些例子:

• 博客:博客模式
• 评论部分：UserComments模式
• 新闻报道:NewsArticle模式
• 对于发布大量代码示例的网站:代码模式

请参阅可用模式的完整列表在这里．

提示

一旦对语义HTML结构感到满意，就可以使用谷歌对其进行测试和验证结构化数据测试工具．

此外，HTML模板使用HTML5元素。如果您支持许多使用过时浏览器的用户，则需要使用诸如Modernizr或HTML5 Shiv．或者，您可以用通用元素替换模板中的HTML5元素，例如div的年代。保留微数据。

相关内容

• 通用HTML5模板
• HTML5 Web存储介绍
• HTML5下载属性指南

雅各Gube是Six Revisions的创始人。

他是前端开发人员。与他联系推特．