大部分时候写代码都是用div布局，自从html5发行之后，也主动去了解过Web语义化，但是针对多种标签到底应该怎么用，什么时候用还是一知半解。最近参加了百度前端学院，根据偷学review别人代码，终于把标签的顺序和位置理清了，在此记录一下以备后用。
<main></main>标签，文档中只可以存在一个，不应该是可重复使用的标签的子标签，<article>,<aside>,<header>,<footer>,<nav>。<header></header>标签，用于表示网站开头或者文章开头，可以包含网站标题，或者文章标题等信息，在一个html文档中可以重复出现。<footer></footer>标签，用于表示网站结尾或者文章页脚，包含一些尾部的描述信息。同<header>标签一样可以多次出现。<article></article>标签，用于表示独立的信息，内部可以包含一篇独立的文章，帖子，评论等内容的全部信息，所以可以包含帖子的作者，发布时间，标题和页脚等。<section></section>标签，用于表示文章的章节，页眉，页脚等信息，但是我们有了<header>表示页眉，<footer>表示页脚，所以可以用<section>单独表示文章的章节，突出语义。<figure></figure>标签，包含了流式内容(图片、音频、视频、代码、图表等)，内容应该与主体内容相关，但是如果被删除，不应该对主体内容造成影响。我的理解就是我们应该将图片，视频，图表等信息放在这个标签里，如果相应的图片，视频等被删除，也不会对文档造成其他影响。<figcaption></figcaption>标签，用于给<figure>标签的内容添加标题。<aside></aside>标签，用于表示网站或者文章的侧栏。用于对文章或者网站进行描述，应该与其主体有一定的关系。
综合上面的标签，给出一个html文档的大致概览
<!doctype html>
<html>
<head>
...
<title>标题</title>
...
</head>
<body>
<header>
...网站标题等
</header>
<!-- 主体内容 -->
<main>
...
<!-- 独立内容 -->
<article>
<header>
...标题等
</header>
<!-- 文章、帖子、评论等主要内容 -->
<section>
...
<figure>
<!-- 这里可以放入图片，视频等流媒体 -->
<figcaption>标题</figcaption>
...
</figure>
...
</section>
<aside>
... 这里是文章的侧栏
</aside>
<footer>
...这里是文章的页脚
</footer>
</article>
...
</main>
<aside>
...
这里是网站的侧栏
</aside>
<footer>
...
这里是网站的页脚
</footer>
</body>
</html>
