在中,可以在之内吗?
问题描述:
比方说,我有这个,在<article>中,<figure>可以在<header>之内吗?
<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>
它是语义正确的把里面的<header>
<figure>
?
该规范定义<figure>
如,
的内容的单元,任选地与一个标题,即是自包含的, ,其通常引用作为单个单元从 文档主流动
如果把里面<header>
将是使<figure>
属于<article>
的头部,而不是属于<article>
本身?试图环顾四周,但我还没有找到答案。
答
该数字仍然是文章的一部分。它恰好在文章标题中,如果您的图形实际上是文章标题的一部分而不是文章的主要内容,那很好。
如果您在分区方面提出要求,<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>
产生相同的轮廓。
小细节,但你缺少一个figcaption,因为你的img没有alt属性。 – BoltClock
@BoltClock有趣。但是,这并不妨碍这个人物在形象和形象上都具有正确性? – deathlock
不,你仍然可以同时拥有 - figcaption提供了图像的描述,而alt文本的目的是作为图像不可用时的文本替换。它们可以是相同的文本,也可以是不同的,具体取决于您希望如何反映替代文本。看到一个例子在这里:https://www.w3.org/TR/html5/embedded-content-0.html#images-that-include-text – BoltClock