浅谈HTML语义化

2018-04-27 本文已影响12人 solfKwolf

写好HTML最重要的一点就是要写“语义化”的代码，即HTML标签、结构要符合所表示的语义。以下是个人拙见。

在html5到来之前，我们的布局更多选择div+css，语义化的标签相对而言比较少。好在html5带来了改变，更多的语义化标签加入到html里替代原来无语义的div。
"语义化"，即根据页面内容的结构，选择与之对应的标签，便于开发者阅读和编写更加规范的代码，同时也有利于浏览器的解析（很重要）。
伴随着语义网的提出

传统的Web由文档组成，W3C希望通过一组技术支撑“数据的Web”，即Web of Data，将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环，帮助人们创建数据并存储在Web上，创建相关的词汇表及数据的处理规则。 —— w3.org

这里不知不觉就写成对各个标签语义的理解，若有误解请指出！谢谢！

遵循 "样式与结构分离 " 的原则
一个良好的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> // 预格式化文本。保留文本固有的换行和空格。