0%

Web语义化

什么是语义化?

语义化说白了,它是给机器看的,就是让机器能读懂你的内容,让机器知道你哪里是标题,哪里是段落。正因为如此。语义化最大的优点就是利于搜索引擎的抓取和建立索引也就是俗称SEO。除此之外,正确的使用语义化标签能够清晰的展示网页的结构,对开发者也更加友好,除此之外语义化还可以支持读屏软件使一些视障人士也可以无障碍的使用我们的网站。

语义化初步

我们来写一个最简单布局,这个布局就包括,头部,内容,和尾部从上到下依次排列。这也是最常见的网页布局。在没有语义化得时候,我们通常是使用div和给一个相对含义的className或者id的形式来布局

1
2
3
<div id="header></div>
<div class="section"></div>
<div id="footer"></div>

我们用语义化的形式来改写它。

1
2
3
<header></header>
<section></section>
<footer></footer>

这样看起来结构就清楚了很多。通过上面的例子我们也可以很容易看出,语义化可以使我们写出一致的代码。在不使用语义化标签的时候一个header就有很多种写法<div class="header"><div id="header">等等,这完全取决于每个开发者个人的风格。而使用语义化标签后,就让代码一致性变得更加的容易。

语义化标签介绍

<header> 和 <hgroup>

header标签很好理解,一般都在文档的最顶部。通常包含标题以及导航和搜索工具。它不一定非得是网页的头部,也可以是任意section或者article的头部部分。它也没有个数限制。
我们知道h1-h6是最基本的标题,表示文章中不同层级的标题。但有时候我们想让副标题在同一个层级中,这是我们就需要用到hgroup标签。hgroup标签实际就是一个标题组。

<nav>

nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。导航部分的常见示例是菜单,目录和索引。

1
2
3
4
5
6
7
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<section> 和 <article>

article它表示具有一定独立性质的文章,它的特点就是独立和可重用。每个article里面都可以有自己的header、section、footer。

1
2
3
4
5
6
7
<article>
<h1>你好,我是这边文章的标题</h1>
<p>你好,我是文章的内容</p>
<footer>
<p>最终解释权归XXX所有</p>
</footer>
</article>

section的主要作用是按主题分段。也就是说section中的内容跟大的主题是相关的。而且在section中会自动给标题h1-h6降级。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article>

<h1>web语义化</h1>
<p>什么是语义化?</p>

<section>
<h2>语义化详解</h2>
<p>语义化就是。。。</p>
</section>

<section>
<h2>语义化特点</h2>
<p>语义化特点就是。。。</p>
</section>

</article>

<aside>

aside一般是跟文章主题不相关的部分,可能包含导航或者广告之类的东西。一般在aside中的nav多数是关联页面,它与header中的nav有些许不同。

一般有header标签,也会有footer标签。通常他都是在文档的最后,通常都是放一些作者信息,版权信息,友情链接之类的。

<small>

<small>标签呈现的小号字体的效果,表示注释和附属细则,一般在footer中,包裹着版权信息。

1
<footer><small>&copy;Company A</small> Date</footer>

<time>

在出现日期的地方,我们可以加上

1
<time datetime="2020-11-08T11:21:00+08:00">2020年11月8日,星期二</time>

<figure> 和 <figcaption>

当图片不是独立的出现,当它与主文章相关,我们就可以使用figure标签。这种插入不限于图片,也可以是代码、表格等。figcaption表示内容的标题。

1
2
3
4
<figure>
<img src="#" />
<figcaption>title</figcaption>
</figure>