在我们的日常开发中好像使用div和span就够了，我认为其中有两个原因：第一，div代表块级元素，可以包含标题、段落、表格章节等；而span是行内元素，前后不会换行，没有结构意义，纯粹应用样式，所以从微观层面来说，span和div能满足基本的使用需求。第二，从使用需求来说，现在的很多的互联网界面，html用于描述软件界面多于富文本，所以很多UI组件并没有什么实际的语义。那么语义标签就不重要了吗？我觉得也不见得。
语义标签赋予了被包裹的文字一定的角色和意义，大概可以分为三类：
- 作为自然语言的延伸：这一类标签是作为纯文本和自然语言的补充，用来表达结构或者是消除歧义。比如
<em>，em是emphasize的缩写，其标签想表达的是某个单词为重音以消除歧义，em不同的位置也会改变句子本身的意思，渲染之后的呈现效果为斜体。很多地方会把<em>和<strong>相比较，但其实strong标签包裹的词语想表达的是强烈的重要性、严重性或者是内容的紧迫性，不同的位置并不会改变句子本身的意思，其渲染的效果也是为粗体。 - 作为标题摘要：语义化的html是支持自动生成目录结构的，它由各个级别的标题组成。h1-h6就是最基本的标题，表示了不同层级的标题。为了避免副标题产生额外的层级，还可以使用
<hrgroup>标签，在hrgroup中的h1-h6被视为同一标题不同的组成部分。值得一提的还有<section>标签，在section中所有的h1-h6都要自降一级。 - 作为整体结构：应用了结构化标签的页面，可以明确地变现出页面内容的分类和大体布局，让浏览器更好地识别页面结构，提升搜索引擎的命中率。常用的标签有
<body>，<header>，<footer>，<section>，<aside>，<article>，<nav>。还有一些标签看起来很类似，但是又有一些区别，比如<section>和<article>。Article的目的是独立分发并且可复用，而Section想表达的是一个内容的主体分组。又比如<header>和<hrgroup>，Header一般出现在文档的头部，包含主标题，导览和搜索栏之类的；Hrgroup则是被使用在一个主标题带着一个或多个副标题的应用场景。
那么使用语义化标签又有什么好处呢？语言类标签对于开发者更为友好、增强了可读性，即使在没有css的情况下，开发者也可以清晰地看到网页结构，便于开发和维护；其次，也十分适合机器阅读，它的文字表现力优秀，更适合搜索引擎（SEO），可以让搜索引擎更好地获取有用的信息，自动生成目录、支持读屏软件，对于视障人士十分友好。
提到可访问性，就不得不提Accessible Rich Internet Applications (ARIA)，它是一套角色和属性，定义了使残障人士更容易访问网页内容和网站应用的方法。ARIA是对html的补充，在没有其他机制的情况下，可以把应用中的交互和结构传递给辅助工具。ARIA使用的第一原则就是如果原生的html元素本身就已经带有内置的行为或是语义，那就不要使用ARIA的角色、状态、属性去重新定义一个元素。
我们可以看下面这个例子，也就是说ARIA使得html的属性变化可以用来理解js组件的状态，让读屏软件等第三方客户端可以更好的理解UI变化。role可以出现在任何一个html元素上，但是ARIA属性不会真实地改变任何一个元素的行为，相应地逻辑还是要通过js来完成的，就相当于ARIA只是对html元素的一种补充，可以让可访问性相关的第三方软件更好地理解文章、窗口、组件的结构并且快速准确地监测到变化。角色类型主要包括widget（可交互的组件）、structure（文档中的结构），window（窗口体）。
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
</span> <label id="chk1-label">Remember me</label>
Reference: www.freecodecamp.org/news/semant… time.geekbang.org/column/arti… time.geekbang.org/column/arti… developer.mozilla.org/en-US/docs/…
