display:none。若是您思考下，（你会明白）这在应用程序中预加载视图是种颇有用的模式：建立一个新的
<mian hidden>，获取用户可能接下来查看的一些内容（例如：系列文中的下一篇，下一张幻灯图放映等），而后，当用户点击
连接/按钮加载该视图时，经过在二者上切换
隐藏属性，将当前的
<main>切换到预加载的（那个）。
在继续以前，咱们暂停下并查看上面的示例。若是咱们使用<header>，<main>和<footer>做为文章的主要结构，它的外观以下：
<header>
<h1>Super duper best blog ever</h1>
...
</header>
<main>
<h2>Why you should buy more cheeses than you currently do</h2>
...
</main>
<footer>
Contact us!
<div class="contact-info">this.is.us@example.com</div>
</footer>
复制代码
那真的很棒！可是，还有不少工做要作。
分解：<section>
所以，咱们为页面提供了一个基本大纲：页眉，页脚和主要内容区域。如今是时候添加些美妙的内容了。
一般，你会但愿将你的内容分解为多个部分，尤为是对像本文这样的大量文本内容，由于没人喜欢阅读这些难以理解的文本墙。
<section>派上用场了。这是在系列规则中最简单的一个：从结构上讲，它基本上只是一个具备特殊含义的<div>。一个<section>开始一个新的"sectioning content"区域，所以它能够有本身的<header>和<footer>。
那么，<section>和普通的旧<div>之间有什么区别，而后，你应该在何时使用它们呢？好吧，容许我再次引用规范：
笔记：
元素不是通用容器元素。当一个元素仅是用于样式目的或为脚本编写提供便利的时候，鼓励做者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。通常规则是 元素仅在元素内容在文本[大纲](https://www.w3.org/TR/html5/sections.html#outline)中明确列出时候才适用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)
你知道，概述来讲，HTML5规范其实是可读的。它是那个比较可读的规范之一。每当我浏览它以获取快速答复时，我都不可避免地学到一些意想不到的和有用的东西，尤为是当我开始点击连接的时候。有时（你也）试试吧！
简而言之，若是要在目录中列出文档的一部分，请使用<section>。若是没有，请使用<div>或其它元素。
内容指标
很好，咱们已经获得了一个坚固的页面结构。咱们已经明确标记了页面的主要内容区域，而不只仅是单独调整<div>，咱们已经调整出了页眉，页脚和章节。可是，确定还有比咱们的文档更多的语义。
让咱们来谈谈HTML5中添加的一些元素，它们传达的内容语义而不是结构。
总体：<article>
<article>元素用于表示彻底独立的内容区域，这些内容能够从页面中提取出来并放入另外一个内容中，而且仍然有意义。这多是文字文章或博客，但也可用于社交媒体帖子，如推特或脸书的墙贴。
HTML5规范建议文章总有一个标题，标识它是什么，理想的状况下使用标题元素(<h1>-<h6>)。<article>也能够有<header>，<footer>和<section>元素，所以你可使用它来嵌入一个完整的文档片断，其中包含其它页面中所需的全部结构。
从上面的方式返回到示例，咱们使用<article>和咱们讨论的其它一些元素来重写带class="article-*"的元素。
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
复制代码
这不是比原来更具可读性吗？并且，不只更容易阅读，它对辅助技术更有用；机器人不能老是弄清楚你的特定类名模式，可是它们能够遵循这种结构。
使用：<nav>
这个元素比其它元素更有名。<nav>旨在清楚地识别页面上的主要导航块，帮助用户围绕站点其他部分找到路径的连接组（例如站点地图或标题中的连接列表）或当前页面（例如目录）。
在咱们的示例顶部，让咱们将<nav>应用于标题中的那组连接。
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
复制代码
根本不改变结构，但你知道它是什么，一目了然而不须要在<div>上读物和处理类名来找到它，更重要的是机器人也能够找到它。
接触：<address>
咱们要讨论的最后一个元素是<address>。这个元素旨在调出联系信息，它一般在主页<footer>中用于标记企业的邮寄地址，电话号码，客户服务邮箱地址等等。
有趣的是，如何在<address>元素中标记内容的规则是开放的。规范提到有几个其它规范能够解决这个问题，而且提供这种级别的粒度可能超出了HTML自己的范围。
常见的解决方案是RDFa，也是W3C规范，它使用标签上的属性来标记数据的不一样组件。下面是咱们示例中的页脚在标记<address>元素和RDFa时可能看起来的样子：
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
复制代码
无疑，RDFa有点冗长，但它对于标记数据很是方便。若是你有兴趣了解有关RDFa的更多信息，请点击如下连接：
- The W3C's RDFa primer
- A description of schemas and links to a bunch of them on schema.org
- The LocalBusiness schema used above
总结
好了，咱们已经介绍了不少，咱们已经看到不少零零散散的元素应用到咱们的例子中。那么，让咱们把它们放在一块儿看看它的样子。
<header>
<h1>Super duper best blog ever</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
</main>
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
复制代码
若是你问我（怎么看改造后的内容？），那这比原始例子的可读性高100倍，并且对于搜索引擎优化和可访问性目的而言，其效率将提升100倍。
这些毫不是HTML中惟一的语义元素。有不少其它元素能够帮助你标记和构建你的文本内容，嵌入媒体资源等等。若是你喜欢这个而且但愿深刻挖掘，这里有一些（标签）能够查看下。你可能认识一些：
这只是一个开始！就像我说的，当你开始阅读HTML规范时，很难停下来。它是种很是丰富的语言，我认为人们常常会低估这种语言。