HTML article 标签

HTML article 语法

在 HTML 中，article 标签用于定义独立的内容块，比如博客文章、新闻报道、论坛帖子等。

语法：

<article>
    ……
</article>

说明：

任何合法的 HTML 元素都可以包含在 article 标签内。

注意:

在严格意义上，每一个 article 元素内部都应该有一个 header 元素。
article 标签的内容应该是独立且有意义的，即使脱离上下文也能被理解。例如，一篇博客文章、一篇新闻报道、一个用户评论、一个产品卡片或任何其他独立的内容项。
当 article 元素嵌套时，内层的 article 元素代表与外层 article 元素相关联的独立内容。例如，博客文章中的用户评论可以放在嵌套的 article 元素中。

HTML article 摘要

属于	HTML 语义化
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML article 示例

接下来，我们通过一个简单的例子来讲解一下 HTML article 标签是如何使用的。

示例：article 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <article>
        <header>
            <h1>HTML是什么？</h1>
            <p>作者、点赞、评论、浏览……</p>
        </header>
        <p id="content">文章内容……</p>
        <footer>
            <a href="#">上一篇</a> | <a href="#">下一篇</a>
        </footer>
    </article>    
</body>
</html>

页面效果如下图所示。

HTML article标签示例

HTML5 语义化标签

HTML5 新增了非常多结构性的语义化标签，以提高代码的可读性和利于 SEO，主要包括：