写好HTML最重要的一点就是要写“语义化”的代码，即HTML标签、结构要符合所表示的语义。以下是个人拙见。
我理解中的语义化
- 在html5到来之前，我们的布局更多选择div+css，语义化的标签相对而言比较少。好在html5带来了改变，更多的语义化标签加入到html里替代原来无语义的div。
- "语义化"，即根据页面内容的结构，选择与之对应的标签，便于开发者阅读和编写更加规范的代码，同时也有利于浏览器的解析（很重要）。
- 伴随着语义网的提出
传统的Web由文档组成，W3C希望通过一组技术支撑“数据的Web”，即Web of Data，将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环，帮助人们创建数据并存储在Web上，创建相关的词汇表及数据的处理规则。 —— w3.org
语义化的好处
- 良好的页面结构
在没有添加css样式时，页面也能呈现清晰的结构。 - 提高用户体验
- 有利于SEO优化，语义化更有利于搜索引擎爬取页面信息。
- 兼容更更多的设备（屏幕阅读器， 盲人阅读器， 移动设备）
- 代码规范化，便于维护和开发。
如何编写"语义化"的HTML
这里不知不觉就写成对各个标签语义的理解，若有误解请指出！谢谢！
-
遵循 "样式与结构分离 " 的原则
一个良好的HTML结构往往是一个页面的重中之重。样式在这个基础上去去增强页面的表达和用户体验！不要用b、font、u这类纯样式标签！ -
根据文档的上下文结构合理选用标签
-
尽可能少的使用无语义的标签<span>和<div>
-
提高关键词的密度，如图片添加alt属性，连接说明title
-
正确使用内容选择器
-
需要强调的文本可以包含在strong和em标签中
-
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td
-
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
-
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
一个清晰良好的页面结构往往能提高开发速度与优化布局。
// 搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。
<title></title>
<hn></hn> //h1~h6分级标题，用于创建页面信息的层级关系。
// 对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1。
<header></header> //页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav></nav> // 标记导航，仅对文档中重要的链接群使用。
<main></main>
// 页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article></article>
// 具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块
<section></section> 具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
// 如果只是为了添加样式。请用div
<aside></aside> // 指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
<footer></footer> // 页脚，只有当父级是body时，才是整个页面的页脚。
<small></small> // 指定细则，输入免责声明、注解、署名、版权。
<strong></strong> // 表示内容重要性
<em></em> //标记内容着重点（大量用于提升段落文本语义）。
<mark></mark> // 突出显示文本（yellow），提醒读者。
<figure></figure> // 创建图（默认有40px左右margin）
<figcaption></figcaption> // figure的标题，必须是figure内嵌的第一个或者最后一个元素。
<cite></cite> //指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。
<blockquoto></blockquoto> // 引述文本，默认新的一行显示。
<time></time> // 标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
不再相关的时间用s标签。
<abbr></abbr> //解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。
<dfn></dfn> // 定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address><address> // 作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
如果提供整个页面的作者联系信息，一般放在页面级footer里。不能包含文档或者文档等其他内容。
<del>移除内容<del>
<ins></ins> //添加内容
<code></code> //标记代码
<pre><pre> // 预格式化文本。保留文本固有的换行和空格。
网友评论