我们都知道前端的三驾马车：HTML、css、javaScript,其中虽然javascript现在也是愈发完善，水涨船高。但是并不代表html、css不重要，在开发中不求你写的绚丽夺目但是也得说得过去，最起码得让浏览器能好好理解、让同事知道你写了什么。本文简单谈谈html的语义化，不足之处还希望不吝改正。
HTML文档结构
在说语义化之前先简单了解一下标准的文档结构。
- 文档声明，告诉浏览器当前文档使用的是哪一种规范，方便浏览器在解析的时候选择正确的解析规范，文档声明必须放在第一行。如果没有文档声明的话，浏览器在解析的时候会向后兼容，即去兼顾旧版本的规范，进而出现怪异模式。
<!DOCTYPE html>：html 5版本的声明方式，因为html5不再基于SGML，所以不再需要引用DTD。其中SGML是指定义电子文档和内容描述的标准，DTD是SGML的一部分，规定了文档的类型和规则。- html5之前的版本都是需要书写DTD的、即需要手动引入具体的规则。例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - html版本还有很多感兴趣的小伙伴可以查阅文档了解了解w3cSchool。
- 根元素：
<html lang="en"></html>,每个文档只能有一个根元素。但是HTMl5没有规定必须得写该元素，浏览器会自动添加。以图为证：
可以发现，虽然浏览器会自动添加但是缺少了语言标识，所以还是写上吧。
<head></head>:文档头部，里边网页title、内联样式、也可以写一些元数据,比如：针对搜索引擎优化的TDK。<body></body>:文档体，我们要在页面展示的内容放这里就可以了。
语义化
- 什么是语义化？
语义化直接的理解就是在写html元素的时候使用“合适的元素”。比如：<header></header>、<footer></footer>等等。每个html元素都有自己的含义，不可为了使用元素自身的展示效果来代替css。比如可能只是为了让字体加粗字号变大就用h1，这对浏览器来说是及其不友好的。总之一句话：选择什么元素取决于自身的含义，而不是展示的效果。
-
为什么要语义化？
- 有利于SEO:有利于搜索引擎优化、让浏览器更容易理解网站的内容。在展示上如果是自然排名的话网站排名也可以更靠前。
- 开发维护的体验会更好：别人拿到你的文档不至于一头雾水。
- 用户体验更好：比如使用alt属性来解释图片的信息
- 更好的访问性：比如在爬虫的时候可以用标签来确定关键字的权重，获取信息，获得更高的解析效率。
- 方便其他设备的解析：比如盲人阅读器
ps：简单解释一下SEO中的TDK：其实就是title、description、keyWord,分别代表网页标题、网页简单描述、和网站的关键字。
-
怎么语义化？
- 首先不要通篇都是div,要尽可能的减少无意义的div和span
- 可以添加属性增强语义化，如
<a href="" rel="这是到百度的链接"></a> - 不要因为元素本身的展示效果而去选择它，展示效果应由css决定
- 需要强调的文本可以用strong而不是b
ps：这里简单列举几个，还有很多的例子比如img添加alt等等一系列的。其实不只是html需要语义化，css、javascript等等，在设置类名、变量、函数等的时候也要语义化。
微格式
英文：Microformats，它是html用来标记某些实体的小模式，包括人、组织、地点等等。能迅速提供一套可以让搜索引擎等其他工具使用的数据格式。原理就是通过扩展HTMl元素或者属性、添加语义注解、结构化类名以此来增强HTML的语义化，增强人机可读性等。是由WHATWG(网页超文本应用技术小组)制定的一种规范。 例如：hCard就是通过类名来对数据进行标记。
这是本人了解的一些基本知识，不足之处还请指出，谢谢各位看官。
