HTML < article> 标签

小灰灰 2020-05-15 18:03 932阅读 1赞

HTML `<article>` 标签

`<article>`是HTML5新增的语义化标签之一。

**一.标签作用：**

此标签表示一个相对独立与完整的内容块，具有比较完整的语义。

比如页面中的一篇文章，或者文章底部一条完整的评论。

`<article>`标签除去包括内容外，通常还会包括标题（通常会放在`<header>`中）或者`<footer>`页脚。

**二.代码片段：**

下面通过简单代码片段对此标签的应用做一下介绍。

```html
<article>
  <h1>HTML语义化布局</h1>
  <p>文章内容</p>
  <footer>
    <p><small>版权：前端教程，作者：蒲公英云</small></p>
  </footer>
</article>
```

代码分析如下：

（1）.`<article>`标签包括生成一篇文章，很明显这是一个相对独立的内容区域。

（2）.`<h1>`定义文章的标题，前面说过标题通常会放入`<header>`中，这并非硬性规定，需要灵活应用。

（3）.`<p>`元素中放置的是文章的内容。

（4）.文章的版权信息放置于`<footer>`标签中。

对上面的代码做一下修改：

```html
<article>
  <header>
    <h1>HTML语义化布局</h1>
    <p>发布时间：<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章内容</p>
  <footer>
    <p><small>版权：前端教程，作者：蒲公英云</small></p>
  </footer>
</article>
```

上面代码中，标题用`<header>`标签包括起来就比较恰当了，前一个代码完全没有必要。

```html
<article>
  <header>
    <h1>HTML语义化布局</h1>
    <p>发布时间：<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章内容</p>
  <article>
    <h2>评论</h2>
    <article>
      <header>
        <h3>评论者: 蒲公英云</h3>
        <p><time datetime="2019-8-1">一分钟前</time></p>
      </header>
      <p>评论内容</p>
     </article>
  </article>
</article>
```

`<article>`内部可以嵌套`<article>`，内层的内容与外层内容相关。

上面代码中，外层是文章主体部分，被嵌套的`<article>`中是文章的评论。

其实上面的代码还可以再改进一下，代码如下：

```html
<article>
  <header>
    <h1>HTML语义化布局</h1>
    <p>发布时间：<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章内容</p>
  <section>
    <h2>评论</h2>
    <article>
      <header>
        <h3>评论者: 蒲公英云</h3>
        <p><time datetime="2019-8-1">一分钟前</time></p>
      </header>
      <p>评论内容</p>
     </article>
  </section>
</article>
```

`<article>`与`<section>`功能比较类似，`<article>`标签强调独立性，语义更加明确。

可以认为`<article>`是一个特殊的`<section>`，能用`<article>`地方也可以用`<section>`。

将评论用`<section>`标签包裹起来，虽然用`<article>`也没什么不妥，但是`<section>`更加合适。

`<section>`语义没有`<artice>`明确，更强调对一个完整内容进行分区，比如文章的段落。

评论区中的每一条评论可以看做一个完整的内容，所以可以用`<article>`标签包裹。