HTML语义化

168 阅读3分钟

1、什么是HTML语义化?

<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、语义化标签的特点

代码结构清晰,方便阅读,有利于团队合作开发。

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。

有利于搜索引擎优化(SEO)。

便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

3、写HTML代码时应注意什么?

尽可能少的使用无语义的标签div和span;

在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

不要使用纯样式标签,如:b、font、u等,改用css设置。

需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);

使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

表单域要用fieldset标签包起来,并用legend标签说明表单的用途;

每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

4、常见的语义化标签

因此我们在写页面结构时,应尽量使用有 语义的HTML 标签

<title>:页面主体内容。

<hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。

<ul>:无序列表。

<ol>:有序列表。

<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。

<nav>:标记导航,仅对文档中重要的链接群使用。

<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。

<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

<footer>:页脚,只有当父级是body时,才是整个页面的页脚。

<small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。

<strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。

<em>:将其中的文本表示为强调的内容,表现为斜体。

<time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。

<abbr>:简称或缩写。

<dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。

<del>:移除的内容。

<ins>:添加的内容。

<code>:标记代码。