HTML的语义化无非就是内容和结构两个方面，即对文本内容的结构化和选择合乎语义的标签。将HTML语义化一方面可以方便开发人员进行维护和阅读，另一方面也可以让浏览器的爬虫和辅助技术更好地解析，进而提高网站的流量。
就以一个MC的Fabric环境搭建网站为例好了。这个网站相对简单一些，贴元素如下：
这个网站的内容结构化体现在body标签上。其中header、main和footer标签是三个语义化标签，分别对应文档不同的位置。
header对应位置：
header定义了文章的一些介绍信息，比如标题、logo、slogan等。它还包裹目录部分、搜索框、以及一个nav或者任何相关的logo。
main对应位置：
它对应的是文章的主要内容。一个页面只能有一个main，其后代元素常含article。
footer对应位置：
即页脚，通常包含作者、版权信息或者相关链接等。
如此三部分将整个页面模块化（就像下图的样子），让文档富有层次性。
除了这种主要区域的模块化，开发者还用到了其他标签如img、div等进一步细分各个模块。以img标签为例：
这个标签在页面中对应这个部分：
当然div标签也常用于表示页面的章节以及不同模块，不过它并没有语义（即非语义化标签），常常被视为容器处理。
但是div通常应用很广，同样作为非语义化标签的span也是，它们作为默认标签的补充，和语义化标签一样在对应的区域内有着重要作用。语义化是一种优秀的前端开发习惯，虽然在必要的情况下可以使用非语义化标签，但需要注意控制数量，尽量减少使用。同时，在使用非语义化标签时，应该为其添加合适的class和id属性，以便于CSS样式控制。
