HTML语义

div和span不是够用了吗？

对于语义化标签，“用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。
可以提高代码可读性，优化搜索引擎，优化屏幕阅读器使用

作为标题摘要的语义类标签

h1-h6标签可以对文档的结构有一个简单的表示

h1-h6 是最基本的标题，它们表示了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用 hgroup 标签。

在 hgroup 中的 h1-h6 被视为同一标题的不同组成部分。即h1作为主标题，其他作为副标题或次级副标题。

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
通过section标签可以将文档分成多块和多层区域，因此，在 HTML5 以后，我们只需要 section 和 h1 就足以形成文档的树形结构：

<section>
    <h1>HTML语义</h1>
    <p>balah balah balah balah</p>
    <section>
        <h1>弱语义</h1>
        <p>balah balah</p>
    </section>
    <section>
        <h1>结构性元素</h1>
        <p>balah balah</p> 
    </section>
......
</section>

作为整体结构的语义类标签

应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。

article 是一种特别的结构，它表示具有一定独立性质的文章。一个 HTML 页面中，可能有多个 article 存在。

• 一个典型的场景是多篇新闻展示在同一个新闻专题页面中，这种类似报纸的多文章结构适合用 article 来组织。

---

如何运用语义类标签来呈现Wiki网页？

pre, samp, code

• pre 标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。
• 一段计算机程序的示例输出，我们可以使用 samp 标签
• 如果是代码，我们还需要加上 code 标签。最后的代码是 pre 标签包裹了 code 标签，code 标签包裹了 HTML 代码。
• 一些在行内的 code，比如 title 和 p 括起来的内容，这些也都应该使用 code 标签。