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

页面结构

前面详细讲述了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标签。
© 版权声明
THE END
请我喝怡宝
点赞2
分享
评论 共4条
    • 人间不值得
    • 伍子蛇0

      很想邀请你去我网站搜索“一天学网页”,我写了一篇前端入门指导。这些标签真的不用学

      6月前回复
      • 如果这些html5语义化标签没用,w3c为啥要推出,html4的标准就够用了。
        一个简单的界面往往体现的就是前端基本功好不好。

        • 人间不值得
          伍子蛇0

          当然是这样,所有浏览器都用起来能语义化就很好,但作为兴趣不用学,作为前端从业更不用学。非要学的话无非是锻炼自己写适应各个浏览器的能力。就拿以前的angular,现在的vue等各种框架来说,不用造轮子,有很多很好的框架,这可以学,提高生产力。并且前端的基础绝对不是html,是js。拙见

          • 前端三大件:js,css,html。三者在我看来缺一不可 😆 ,其中一个基本功不扎实就是瘸腿,我司前端面试就是html,css,js循序渐进。
            然后框架的话,确实可以提高生产力,但日常有空还是需要深入研究框架源码,这样才可以以不变应万变。