整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者 | Thaís V
译者 | 弯月，责编 | 屠敏
以下为译文：
为了让你的 HTML5 代码引起Google等搜索引擎的注意，你需要在HTML语言规则上下一番功夫，并在编写代码时应用一些策略。编写这样的代码其实并不难，而且还有很多好处。
在本文中，我们将介绍：
HTML5 结构化语义的作用是什么？
为什么这种语义如此重要？
如何才能引起Google等搜索引擎的注意？我会举例说明！
如何善加利用验证工具？
下面，让我们开始吧！
HTML5 结构化语义的作用
HTML5结构化语义的作用是通过语义标签来组织文档的内容，它用到了设计目的各异的若干标签。
语义化的HTML标签旨在描述HTML文档内容的含义，还可以帮助程序员、浏览器和搜索引擎更加清楚地了解这些含义。
因此，语义化的代码可以让用户导航更易于访问、模式化且易于维护。HTML的作用不是构造文档本身，而是通过语义标签赋予内容含义。
正确使用语义元素对于构建现代化、组织化、标准化的网页至关重要，而且还能方便阅读和维护代码。
语义真的很重要吗？
语义是Web平台特有的主要优势之一，因此语义很有必要性。编写具有恰当结构的代码有助于搜索引擎（比如Google）评估网站的内容。除此之外，还有一些有价值的原因值得注意：
正确的标签可以增加网站的竞争力；
正确的标签可以方便有特殊需求的用户访问网站的内容，例如视力障碍者；
正确的标签可以减轻其他开发人员维护网站的压力；
正确的标签可以让你的工作更加专业；
正确的标签甚至可以影响到你的网站是否会出现在Google的搜索结果中。
猜猜看，谁将阅读网站的语义，并决定网站的内容是否与搜索关键字相关？没错，正是Google等搜索引擎！网站在搜索结果中的排名也是由搜索引擎决定。
你是不是应该重视起来了？
而引起等搜索引擎注意的正是主要的语义标签！
下面，我列出了一些主要的语义标签：
<!DOCTYPE html>：<!DOCTYPE>不是HTML的标签。这个标签为浏览器提供了有关HTML版本的信息，在创建HTML时我们首先应该写明的就是这个标签。
<head>：<head>是<title>、<link>、<script>等元素的容器，这些元素不会在浏览器中显示。
<html>：<html>标签是HTML元素的容器，包括那些不会显示在浏览器中的元素。
<nav>：<nav>由一组链接列表组成。
<main>：一个HTML文件应该只有一个<main>，它的作用是组织主要内容，它不应该出现在页脚或文章等其他标签中。
<section>：每个<section>都可以包含一系列有序的文章标题和其他标签。它代表文档的一个部分，例如文档的章节、页脚、旁边或其他信息。
<article>：<article>应该用于标记出一段独立的内容，不需要依赖其他内容。
<aside>：<aside>的内容应该作为对主题的补充。你还可以用它添加与文档主要内容不相关的内容，比如广告。
<figure>：<figure>的出现表明文档中包含图像。
<figcaption>：<figcaption>包含了对图像的说明。
<footer>：<footer>定义了站点的页脚，或某一部分的页脚。这个标签的内容多种多样，例如导航菜单、社交媒体链接、服务条款、隐私政策、商标等等。
如果你有兴趣查看更多标签，那么请访问w3school 在线教程。
验证工具
验证工具可以检查你的代码是否符合结构化语义的规则，还会说明需要修改的地方。
在这里介绍一个工具：Validator W3（https://validator.w3.org/），这个工具使用起来非常简单。首先你需要上传HTML文件，或将代码复制粘贴到网站上。你可以在网站上练习正确的语义结构，并找到最佳实践。
总结
本文提及的实践非常重要。因为这种实践可以提高网站的访问量，提高你的网站在搜索引擎中的排名，而且也可以方便理解和维护你的代码。
我们需要花点心思钻研代码，并让我们的努力更加有价值。让我们一起努力吸引Google等搜索引擎的注意！
原文：https://hackernoon.com/you-and-html5-can-impress-googles-robots-and-be-on-the-first-pages-s5122b8a
本文为 CSDN 翻译，转载请注明来源出处。
页是一个包含HTML标签的纯文本文件
网页制作离不开浏览器和制作网页工具
浏览器推荐【谷歌浏览器】或【火狐浏览器】
制作网页工具用电脑自带的【记事本】即可
六步即可学会最基础的网页制作！
右击桌面，选择新建，选择文本文档
打开新建的文本文档，输入以下内容（建议照敲一遍）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
</body>
</html>上面这些内容就是超文本标记语言，也称为HTML，现在HTML已经发展到第五代——HTML5，上面这些HTML5代码是帮助我们写出网页的基础。
右击文档重命名，修改文件后缀，将文件扩展名修改为.html
什么浏览器打开就会出现什么浏览器图标
如果你看不到文件的扩展名那么就打开此电脑（我的电脑），在菜单栏查看勾选文件扩展名即可。
双击打开它，你会发现一片空白。
但并不是什么都没有，上图中箭头指的那一串字母就叫URL，也称“统一资源定位器”。因为这个文件只是本地文件，所以它现在的作用是定位你的文件存放位置，显示文档地址，说明文档放在什么地方。
忍受不了空空的感觉，那么就开始添加一些东西吧！
右击选择打开方式，选择用记事本打开
点击其他应用可以看到记事本
试试看把标题改成“这是一个标题”，按快捷键ctrl+s保存
刷新一下浏览器，于是标题就变成了“这是一个标题”
那么我们就可以知道，修改<title></title>里面的内容可以改变标题；同时<title>标签是<head>标签中唯一要求包含的东西。
一鼓作气，再添加一些内容吧！
在<body></body>这一对标签里面加上这样一段话：
<p>Hello</p>
<p>World</p>然后保存刷新
Hello World
恭喜你，你已经学会了最基础的网页制作了。
<p>这是什么意思呢？
这些被称为标签，上面出现尖括号的都属于标签，它们通常都是成对的，由开始标签和结束标签（结束标签加上斜杠）构成一组标签，例如<title></title>、<p></p>。
<p>标签定义段落，我们写文章一般是敲一下回车就换一行，但是网页不一样，你敲多少个回车都是不被识别的。
<p>有志者，事竟成，破釜沉舟，百二秦关终属楚;
苦心人，天不负，卧薪尝胆，三千越甲可吞吴!</p>
<p><p></p>可以看到上面的一段话，敲多少个回车都没有用，而下面的一段话，用两个<p>标签就换行了。
av元素是什么？
Nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面或者当前页的其他部分。
Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在Nav元素里面，只需要把最主要的、基本的、重要的放在Nav元素里面即可。
比如说页脚底部如果有个版权声明，不建议使用Nav元素，而建议使用footer元素是最合适的。一个页面中可用多个Nav元素作为整体或者不同部分的导航
示例代码：
Nav元素示例代码
在上面这段代码中，通过在Nav元素内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个Nav元素，作为页面整体或不同部分的导航。
具体来说Nav元素可以用的场景如下：
1.传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。
2.侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。
3.页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。
4.翻页操作：翻页操作切换的是网页的内容部分，可以通过单击“上一页”或“下一页”切换，也可以通过单击实际的页数跳转到某一页。
除此Nav元素也可以用于其他重要的、基本的导航链接组中。并不是所有的链接组都要被放进Nav元素，只需要将主要的和基本的链接放进Nav元素即可。
*请认真填写需求信息，我们会在24小时内与您取得联系。
