HTML语义：div和span不是够用了吗？
语义类标签
常见到的section、nav、p。
语义是我们说话表达的意思，多数情况下语义都是由文字承载的。语义类标签则是纯文字的补充。
为什么要用语义？
很多前端工程师写起代码，通常是div和span走天下。按正确的套路，应该说是不好的，但是在很多情况下，答案肯定是好。
因为在实际业务场景，“软件界面”多于“富文本”，而软件界面里的东西，实际上几乎没有没有语义的。比如购物车中的加入购物车这个按钮，一定要用button吗？
实际是没必要，因为在这个场景里，跟表单里的button，其实已经相差很远了。所以在“软件界面”的场景里，直接使用div和span。
不过，在很多工作场景里，语义类标签也有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处。
语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有CSS的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。
不过，不恰当的使用语义标签，反而会造成负面作用。举个错误的例子：
比如ul无序列表，ol有序列表，但是实际是像这样使用的(来自HTML标准)：
I have lived in the following countries:
Switzerland
Norway
United Kingdom
United Statesul多数出现在行文中间，它的上下文多数在提示：要列举某些项。如果所有并列关系都用ul，会造成大量冗余的标签。
所以，对于语义标签，我的态度是：“用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。
几种重要的语义化场景：
作为自然语言延伸的语义类标签
作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义。
ruby：类似于注音或是意思的注释。在HTML5中，就引入了这个表示ruby的标签，它由ruby、rt、rp三个标签来实现。
还有一种情况是，HTML的有些标签实际上就是必要的，甚至必要的程度可以达到：如果没有这个标签，文字会产生歧义的程度。
em：表示重音。在没有上下文的情况下，通过em标签，我们可以消除这样的歧义：
昨天我吃了一个香蕉。
今天我吃了一个<em>苹果</em>。
昨天我吃了两个苹果。
今天我吃了<em>一个</em>苹果。
作为标题摘要的语义类标签
文章的结构。
语义化的HTML能够支持自动生成目录结构，HTML标准中还专门规定了生成目录结构的算法，即使我们并不打算深入实践语义，也应该尽量在大的层面上保证这些元素的语义化使用。
例如：
<h1>HTML语义</h1>
<p>balah balah balah balah</p>
<h2>弱语义</h2>
<p>balah balah</p>
<h2>结构性元素</h2>
<p>balah balah</p>
......
h1-h6是最基本的标题，它们表示了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用hgroup标签。
// 无hgroup的对比：
//JavaScript对象
// 我们需要模拟类吗？
// ...
<h1>JavaScript对象</h1>
<h2>我们需要模拟类吗？</h2>
<p>balah balah</p>
// 有hgroup的对比：
// JavaScript对象——我们需要模拟类吗？
// ...
<hgroup>
<h1>JavaScript对象</h1>
<h2>我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>从HTML 5开始，我们有了section标签，这个标签可不仅仅是一个“有语义的div”，它会改变h1-h6的语义。section的嵌套会使得其中的h1-h6下降一级，因此，在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>HTML语义
弱语义
结构性元素
......作为整体结构的语义类标签
随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性越来越重要。
应用了语义化结构的页面，可以明确提示出页面信息的主次关系，它能浏览器很好的支持“阅读视图功能”，还可以让搜索引擎命中率提升。同时对视障用户读屏软件更友好。
正确使用整体结构的语义类标签，可以让页面对机器更友好。比如：
<body>
<header>
<nav>
......
</nav>
</header>
<aside>
<nav>
......
</nav>
</aside>
<section>......</section>
<section>......</section>
<section>......</section>
<footer>
<address>......</address>
</footer>
</body>还有article，article是一种特别的结构，它表示具有一定独立性质的文章。所以article和body具有相似的结构，同时，一个html页面中，可能有多个article存在。典型的多文章结构：
<body>
<header>......</header>
<article>
<header>......</header>
<section>......</section>
<section>......</section>
<section>......</section>
<footer>......</footer>
</article>
<article>
......
</article>
<article>
......
</article>
<footer>
<address></address>
</footer>
</body>header：头部的内容，导航或者是介绍性内容
footer：通常在尾部，包含一些作者信息，相关链接，版权信息
aside：表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。
header和footer一般都是放在article或者body的直接子元素，但标准中并没有明确规定。
如何运用语义类标签来呈现Wiki网页？
通过一篇Wiki的文章用到的语义类标签，进一步理解语义的概念。
https://en.wikipedia.org/wiki/World_Wide_Web
http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html
blockquote, q, cite
blockquote表示段落级引述内容q表述行内的引述内容cite表示引述的作品名
figure, figcaption
figure也是我们的一种标签（用于表示与主文章相关的图像、照片等流内容）。在这里，figcaption表示内容的标题，当然，也可以没有标题。dfndfn标签是用来包裹被定义的名词。
pre, samp, code
pre标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。因为是一段计算机程序的示例输出，所以可以使用samp标签：
<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>因为同时是代码，我们还需要加上code标签。最后的代码是pre标签包裹了code标签，code标签包裹了HTML代码。
<pre><code>
<html>
<head>
<title>Example.org – The World Wide Web</title>
</head>
<body>
<p>The World Wide Web, abbreviated as WWW and commonly known ...</p>
</body>
</html>
</code></pre>还有一些其他的标签补充：
此文章为7月Day16学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。