语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
HTML文本 语义化,就是让 HTML元素 能够表明其内部 内容的意义 。其主要目的是 让机器能读懂你的网页 。
用户在浏览网页的时候,已经是通过浏览器渲染后的图片、文字,排版,等等视觉信息。而机器(搜索引擎)看到的并非浏览器渲染后的信息,而是HTML代码。如何让机器理解我们的网页从面达到更好的SEO效果呢?通过将 HTML元素 自身具备意义,机器就可以知道,每一个 HTML元素的含义。
一般的网页结构基本上可分为:
<header>
头部栏(如:Logo,标题)<nav>
导航栏(如:各个部分的链接)<article>
文章内容(如:独立的一篇文章)<figure>
流内容(如:图像、图表、照片、代码)<aside>
侧边栏(如:相关信息,广告)<section>
表示文档中的一个区域(或节)(如:内容中的一个专题组)<footer>
底部栏(如:作者信息,联系信息)
这几个标签,比较容易混淆的是、,所以这里特别说明:通俗来说就是 比
更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。
非语义化HTML代码
<div id="header">
<div id="nav"></div>
</div>
<div id="article">
<div id="figure"></div>
</div>
<div id="aside"></div>
<div id="footer"></div>
语义化HTML代码
<header>
<nav></nav>
</header>
<article>
<figure></figure>
</article>
<aside></aside>
<footer></footer>
常用的HTML语义标签
<title>
:页面主体内容。<hn>
:h1~h6,分级标题,*<h1>
与 *<title>
协调有利于搜索引擎优化。<ul>
:无序列表。<ol>
:有序列表。<header>
:页眉通常包括网站标志、主导航、全站链接以及搜索框。<nav>
:标记导航,仅对文档中重要的链接群使用。<main>
:页面主要内容,一个页面只能使用一次。如果是Web应用,则包围其主要功能。<article>
:定义外部的内容,其中的内容独立于文档的其余部分。<section>
:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。<aside>
:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。<footer>
:页脚,只有当父级是body时,才是整个页面的页脚。<small>
:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。<strong>
:和 em 标签一样,用于强调文本,但它强调的程度更强一些。<em>
:将其中的文本表示为强调的内容,表现为斜体。<mark>
:使用黄色突出显示部分文本。<figure>
:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。<figcaption>
:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。<cite>
:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。<blockquoto>
:定义块引用,块引用拥有它们自己的空间。<q>
:短的引述(跨浏览器问题,尽量避免使用)。<time>
:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。<abbr>
:简称或缩写。<dfn>
:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。<del>
:移除的内容。<ins>
:添加的内容。<code>
:标记代码。<meter>
:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)<progress>
:定义运行中的进度(进程)。