Question

我无法弄清楚我的主页内容是否应该在文章元素中。我觉得它不应该是因为它是主要页面内容 - 如果它应该在文章元素中，搜索引擎如何确定哪个文章是实际页面内容？第一个？

以下两个例子中的哪一个是正确使用还是不正确？

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>Competitor</header>
    <main>
        <div>
            <h1>t’s Time To Run Your First Ultramarathon!</h1>
            <p>As marathons continue to gain popularity, so to do ultramarathons. Are you ready to move up?</p>
            <h2>Journey into the Unknown.</h2>
            <p>You may have mastered-or at least plateaued in-the marathon.</p>
        </div>
        <section>
            <h1>Trail News</h1>
            <article>
                <h1>Obstacle course racing goes big time!</h1>
                <p>Huge participation numbers and TV contracts are increasing exposure</p>
            </article>
        </section>
    </main>
</body>
</html>

或者这（文章控件中的主体内容）：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>Competitor</header>
    <main>
        <article>
            <h1>t’s Time To Run Your First Ultramarathon!</h1>
            <p>As marathons continue to gain popularity, so to do ultramarathons. Are you ready to move up?</p>
            <h2>Journey into the Unknown.</h2>
            <p>You may have mastered-or at least plateaued in-the marathon.</p>
        </article>
        <section>
            <h1>Trail News</h1>
            <article>
                <h1>Obstacle course racing goes big time!</h1>
                <p>Huge participation numbers and TV contracts are increasing exposure</p>
            </article>
        </section>
    </main>
</body>
</html>

Answer 1

<article>只是网页上的一段文字，它本身就是有意义的。您可以随意在<main>标记内放置该页面唯一的内容，因为抓取工具和网络浏览器会将<main>标记内的任何内容解释为网页的主要内容。

<article>标记通常用于博客和新闻帖子，以区分不同的新闻文章（因此称为<article>）

您可以使用以下任意一种：<div> <p> <span> <article> <h1>和其他人。

当您想要自定义网页中文字的位置时，您只需要使用<div>标签。

有关<main>代码的详情，请访问 link 。

Answer 2

主要元素可以用作另一个元素的主要内容的容器。

WHATWG spec

WHATWG对元素的描述相当抽象，所以让我们来看看W3C规范：

主要元素代表a的主体内容   文件或申请。主要内容区域由内容组成   这与a的中心主题直接相关或扩展   文档或应用程序的中心功能。主要内容   文档区域包括该文档特有的内容   并排除在一组文件中重复的内容   作为网站导航链接，版权信息，网站徽标和   横幅和搜索表单（除非文档或应用程序主要   功能是搜索表单的功能。）

W3C spec

如果您的内容代表文档的主要主题，并且该内容对于该文档而言是唯一的，那么您一定要使用main。

请注意，W3C规范有一些限制：

每个文档只有一个main
它不能用作<article>，<aside>，<footer>，<header>或<nav>元素的后代。

article元素表示文档，页面，应用程序或站点中的完整或自包含的组合，并且原则上可独立分发或可重用，例如，在联合组织。

WHATWG

＆＃39; ...一个完整的，或独立的......＆＃39;内容意味着当所有周围的内容被剥离时，它本身就有意义。请注意，此内容也适用于联合发布。

当页面的主要内容（即不包括页脚，标题，导航块和侧边栏）都是一个独立的组合时，该内容可能会被标记为文章，但在这种情况下技术上是多余的（因为不言而喻，页面是一个单一的组合，因为它是单个文档。）

WHATWG

如有必要，主要元素可以包含多个文章元素。

重要提示：

主要元素与section和article元素不同，主要元素对文档大纲没有贡献。

HTML5 - 主页面内容语义

2 个答案: