很久之前的一篇文章： 如何理解 web 语义化？
在构建一个Web网站时，拿到UI图，我们第一件做的事就是确定布局架构，然后书写HTML结构。HTML结构是整个document文档的骨架，曾经听过那么一句话，优雅的使用HTML标签和合理的结构层次，就算没有CSS样式，也能够让人一言能看清楚基本的页面结构。
诚然，HTML5标准一出，各种极富语义化的标签一出，我们创建Web文档时候就有了更多更可用的新标签当作构建页面的锐利武器。
结构标签：(块状元素) 有意义的div
<article>标记定义一篇文章<header>标记定义一个页面或一个区域的头部<nav>标记定义导航链接<section>标记定义一个区域<aside>标记定义页面内容部分的侧边栏<hgroup>标记定义文件中一个区块的相关信息<figure>标记定义一组媒体内容以及它们的标题<figcaption>标签定义 figure 元素的标题。<footer>标记定义一个页面或一个区域的底部<dialog>标记定义一个对话框(会话框)类似微信
下面是这样的一张流程图：
