在<article>中,<figure>可以在语义上放在<header>中吗?

时间:2016-12-26 05:22:59

标签: html html5 semantic-markup

让我说我有这个,

<article>
    <header>
        <h1>Article title</h1>
        <p>Article kicker</p>
        <figure>
            <img class="featured-image" src="http://article.com/featured/image.jpg">
        </figure>
    </header>
    <div class="content">
        <p>Bla bla</p>
        <p>Bla bla</p>
    </div>
    <footer>
        <p>About author</p>
    </footer>
</article>

<figure>置于<header>

内是否在语义上正确

规范将<figure>定义为

  

内容单元,可选地带有标题,是独立的,   通常从主要流程中引用为单个单元   文件

如果它放在<header>内会使<figure>属于<article>的头部,而不属于<article>本身?试着环顾四周,但我没有找到答案。

1 个答案:

答案 0 :(得分:1)

这个数字仍然是文章的一部分。它恰好出现在文章标题中,如果您的数字实际上是文章标题的一部分而不是文章的主要内容,那就没问题了。

如果您要求切片,<header><footer>不是切片元素,那么该图仍将是文章大纲的一部分。也就是说,删除或评论<header><footer>代码:

<article>
    <!-- header -->
        <h1>Article title</h1>
        <p>Article kicker</p>
        <figure>
            <img class="featured-image" src="http://article.com/featured/image.jpg">
        </figure>
    <!-- /header -->
    <div class="content">
        <p>Bla bla</p>
        <p>Bla bla</p>
    </div>
    <!-- footer -->
        <p>About author</p>
    <!-- /footer -->
</article>

产生相同的轮廓。