重学前端:深入理解section标签

凯哥 2020-03-09 06:54:53 1214℃ 0条

页面结构

前面详细讲述了article标签的使用,并列举了几个示例。本文主要描述的是section标签,在讲述section标签的使用要点之前,先介绍一个HTML5轮廓检查工具。

HTML5轮廓检查工具

http://gsnedders.html5.org/outliner/
http://h5o.github.io

上面这两个链接都是的,这个工具主要作用就是提取页面的结构。下面以腾讯网作为示例。
在中间的URL里面输入

https://www.qq.com/

然后点击Outline this按钮,我们就可以得到如下图所示的页面结构:
腾讯网页面结构

section标签的使用

section标签用来对web页面上的内容进行分块或者对文章进行分段,一个section标签通常由内容及其标题组成。但section标签并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div标签而非section。下面是一个示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>section_demo</title>
	</head>
	<body>
		<section>
			<h1>标题</h1>
			<p>正文内容</p>
		</section>
	</body>
</html>

我们再写一个demo,将标题去掉,代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>section_demo</title>
	</head>
	<body>
		<section>
			<p>正文内容</p>
		</section>
	</body>
</html>

然后用上面提到的HTML5轮廓检查工具检查。
section
untitiled section意思就是没有标题的section,所以没有标题的section就有可能使用不当。

nav标签和aside标签没有标题是合理的

一个注意点就是不要将section标签与“有着自己的完整的、独立的内容”的article标签混淆。

下面是article标签与section标签结合使用的示例。

示例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>section_demo</title>
	</head>
	<body>
		<article>
			<h1>汽车</h1>
			<p>汽车是一种交通工具。</p>
			<section>
				<h2>五菱宏光</h2>
				<p>五菱宏光是神车。</p>
			</section>
			<section>
				<h2>特斯拉</h2>
				<p>特斯拉有自动驾驶。</p>
			</section>
		</article>
	</body>
</html>

“汽车”是独立的、完整的内容使用article标签。里面分成三段,“五菱宏光”和“特斯拉”每一段都有一个独立的标题,因此使用了两个section标签,对文章分段的工作也是使用section标签完成的

为什么没有对第一段使用section标签?

事实上第一段是可以使用section标签包裹的,但是demo的结构比较清晰,分析器是可以识别第一段内容在一个section标签里,所以可以将第一个section标签省略,但是如果第一段里还要包含子section标签或子article标签,那么第一段的section标签不能省略。

示例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>section_demo</title>
	</head>
	<body>
		<section>
			<h1>汽车</h1>
			<article>
				<h2>五菱宏光</h2>
				<p>五菱宏光是神车。</p>
			</article>
			<article>
				<h2>特斯拉</h2>
				<p>特斯拉有自动驾驶。</p>
			</article>
		</section>

	</body>
</html>

“汽车”是一篇文章中的一段,因此没有使用article标签。但是在这一段中,可以分为几块独立的内容,因此嵌入了几个独立的article标签。

在HTML5中,article标签可以看成是一种特殊种类的section标签。section标签强调分段或分块,而article强调独立性。如果一块内容相对来说比较独立完整的时候,应该使用article标签,但是如果想将一块内容分成几段的时候,应该使用section标签进行分段。

关于section标签的使用注意总结如下:

  • 不要将section标签用作设置样式的页面容器,而是采用div标签来包裹设置;
  • 如果article、aside或nav标签更符合使用情况,不要使用section标签;
  • 不要为没有标题的内容区块使用section标签。
标签: HTML, CSS

非特殊说明,本博所有文章均为博主原创。

评论啦~