html5 article & section

html5 article & section

关于 article & section

关于 article 和 section 的区别也是老生常谈的事了

但是你确定自己已经了解它们了吗?

你确定自己已经可以很好的运用它们了吗?

学习过程

这里通过 html5 outliner 工具来进行学习

通过一系列的例子,我们来看下文档大纲的变化

首先是一个最简单的例子

<body>
    <h1>文章列表</h1>
    <article>
        <header>
            <h1>文章1 title</h1>
            <p>文章1 描述</p>
        </header>

        <h2>文章1 小节1 title</h2>
        <p>文章1 小节1 内容</p>

        <h2>文章1 小节2 title</h2>
        <p>文章1 小节2 内容</p>
    </article>

    <article>
        <header>
            <h1>文章2 title</h1>
            <p>文章2 描述</p>
        </header>

        <h2>文章2 小节1 title</h2>
        <p>文章2 小节1 内容</p>

        <h2>文章2 小节2 title</h2>
        <p>文章2 小节2 内容</p>
    </article>
</body>

这是一个最简单的例子,一个文章列表,以及2篇文章

我们先看下 outliner 的结果:

通过这个小例子,感觉 outliner 很不智能,感觉就是搜索 hN然后进行缩进

然后,尝试在第1篇文章添加评论列表,如下:

<article>
    <header>
        <h1>文章1 title</h1>
        <p>文章1 描述</p>
    </header>

    <h2>文章1 小节1 title</h2>
    <p>文章1 小节1 内容</p>

    <h2>文章1 小节2 title</h2>
    <p>文章1 小节2 内容</p>

    <h2>文章1 评论列表</h2>
    <article>
        <header>
            <h1>文章1 评论1 title</h1>
        </header>
        <p>文章1 评论1 内容</p>
    </article>

    <article>
        <header>
            <h1>文章1 评论2 title</h1>
        </header>
        <p>文章1 评论2 内容</p>
    </article>
</article>

先看结果,看图说话

这里会发现,评论也用了 article,但是这些评论的结构和外面是同级的,这样看起来就很奇怪了

于是,我们尝试添加 section

<article>
    <header>
        <h1>文章1 title</h1>
        <p>文章1 描述</p>
    </header>

    <h2>文章1 小节1 title</h2>
    <p>文章1 小节1 内容</p>

    <h2>文章1 小节2 title</h2>
    <p>文章1 小节2 内容</p>

    <section>
        <h2>文章1 评论列表</h2>
        <article>
            <header>
                <h1>文章1 评论1 title</h1>
            </header>
            <p>文章1 评论1 内容</p>
        </article>

        <article>
            <header>
                <h1>文章1 评论2 title</h1>
            </header>
            <p>文章1 评论2 内容</p>
        </article>
    </section>
</article>

结果如下:

可以看到,只是简单的给评论列表添加了一个 section 元素,文档结构变得明朗起来

如果添加包裹的不是 section,而是 div 元素的话,结果是和没有包裹一样的!

小结

纵观我们项目的页面,文档大纲都是惨不忍睹

所以这些基本功感觉还是要捡起来的~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

react diff 原理

React diff 作为 Virtual DOM 的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源...

4990
来自专栏程序员互动联盟

C语言和C++本质区别在哪?

疑惑一 做网站前端开发需要具备哪些基础知识? 做网站开发分为前端和后台,如果从事前端开发需要学习哪些基础知识呢?现在为大家总结一下。 html: ...

2463
来自专栏前端架构

重谈react优势——react技术栈回顾

现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文。

1053
来自专栏华仔的技术笔记

React Native 初探

3126
来自专栏互联网杂技

Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Ang...

32810
来自专栏葡萄城控件技术团队

TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集...

3135
来自专栏王磊的博客

IEPNGFix:Unclickable children of element 解决办法

以前我有写过一篇关于让IE6支持png半透明图片的方法,这期间这一神器一直发挥了很大的作用,并且没有出现过什么差错,直到昨天。 昨天同事做的一个项目因为设计图的...

34610
来自专栏IMWeb前端团队

react diff 原理

本文作者:IMWeb 王少飞 原文出处:IMWeb社区 未经同意,禁止转载 React diff 作为Virtual DOM的加速器,其算法上的改进优...

1926
来自专栏西枫里博客

Ajax处理success回调函数返回的json数据。

站长最近在项目中用调用一个分类的子数据,由于表单要填写的数据较多,为了实现无刷新的选择操作,就使用ajax做了异步查询。查询的结果因为是多条数据,一直以来动用a...

502
来自专栏大闲人柴毛毛

爬虫其实很简单!——网络爬虫快速实现(一)

今天我来带领大家一起学习编写一个网络爬虫!其实爬虫很简单,没有想象中那么难,也许所有学问都是这样,恐惧源自于无知。废话不多说,现在开始我们的爬虫之旅吧。 爬虫是...

5177

扫码关注云+社区