<article> 图片应该放在文章 <header> 中吗?
Should an <article> image go inside article's <header>?
用例是博客 post:
<article>
元素在 <main>
中使用,以包含 post 页面上的文章。
<header>
在 <article>
中使用,包含 <h1>
标题和元数据,包括作者、日期戳等
<article class="card bg-white">
<header>
<div class="card-img-top p-0">
<a href="image.jpg" title="Article title"><img width="1414" height="1011" src="image.jpg 1200w" sizes="(max-width: 1414px) 100vw, 1414px"></a>
</div>
<h1 class="entry-title" itemprop="headline">
<a href="article-url" title="Article title" rel="bookmark">Article title</a>
</h1>
<div class="entry-meta">
<span class="author vcard" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name"><a href="/author/joe-bloggs" title="Posts by Joe Bloggs" rel="author">Joe Bloggs</a></span></span>
<span class="meta-sep"> | </span>
<time class="entry-date" datetime="2022-03-14T14:28:33+00:00" title="March 14, 2022, 2:28 pm" itemprop="datePublished">14 March 2022</time>
<meta itemprop="dateModified" content="14 March 2022">
</div>
</header>
<div class="entry-content" itemprop="mainEntityOfPage">
<meta itemprop="description" content="Excerpt for article">
<p>Article text.</p>
<p>Article text.</p>
<p>Article text.</p>
</div>
</article>
每个 post 都有一张特色图片。此图像在语义上属于 <header>
,还是无关紧要(即 <article>
中的任何地方)?
我希望在元信息上方显示图像,即。现有 <header>
。从视觉上看,我猜它会包含 header 区域(即 post body 之前的内容),但它不一定会传达有关 post 的元信息.如果主图不应该是 <header>
的一部分,这意味着它也在 以上 <header>
.
(尽管页面顶部有一个 <header>
,但多个 in-page <header>
在语义上是 permitted。
然而,发现 documentation 往往与 top-of-page header 单独使用 <header>
有关:
The <header>
element represents a container for introductory content
or a set of navigational links.
A <header>
element typically contains:
- one or more heading elements (
<h1>
- <h6>
)
- logo or icon
- authorship
正如您所引用的那样,header 元素“代表分段元素的介绍性内容”。如果您认为一篇文章的主要图片是其介绍性内容的一部分,那么将它放在 header 元素中是有意义的。
为了便于阅读,我省略了模式结构化数据。
<article>
<header>
<img alt="A kitten." src="/images/kitten.jpg" width="100" height="100">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: <a href="/authors/katrina-whisker/" rel="author">Katrina Wisquer</a></li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<p>There once was a cute kitten who...</p>
</article>
但是,如果您希望在视觉上将图像放在 header 内容之前,但在文档流中仍将其保留在 header 内容之后,您可以使用 CSS 来更改它的渲染位置。一个简单的方法是使用 order
property and CSS Flexbox or CSS Grid。这将改变视觉呈现顺序,但保持文档流不变。辅助技术将按照文档流的顺序呈现内容。
这可能是最好的解决方案,因为通常人们希望首先看到一篇文章的标题,然后才是其他任何事情。
article {
display: flex;
flex-direction: column;
margin: 1rem;
padding: 1rem;
border: 1px solid black;
}
.article-image {
order: 1;
}
.article-header {
order: 2;
}
.article-body {
order: 3;
}
<article>
<header class="article-header">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: <a href="/authors/katrina-whisker/" rel="author">Katrina Wisquer</a></li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<img class="article-image" alt="Kittens." src="https://placekitten.com/200/100" width="200" height="100">
<div class="article-body">
<p>There once was a cute kitten who...</p>
</div>
</article>
补充说明:
- 不要忘记图像上的
alt
属性
- 在无序列表中标记文章元数据比具有跨度的
<div>
更具语义。
- 您似乎过度使用和滥用了
title
attribute
用例是博客 post:
<article>
元素在<main>
中使用,以包含 post 页面上的文章。<header>
在<article>
中使用,包含<h1>
标题和元数据,包括作者、日期戳等
<article class="card bg-white">
<header>
<div class="card-img-top p-0">
<a href="image.jpg" title="Article title"><img width="1414" height="1011" src="image.jpg 1200w" sizes="(max-width: 1414px) 100vw, 1414px"></a>
</div>
<h1 class="entry-title" itemprop="headline">
<a href="article-url" title="Article title" rel="bookmark">Article title</a>
</h1>
<div class="entry-meta">
<span class="author vcard" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name"><a href="/author/joe-bloggs" title="Posts by Joe Bloggs" rel="author">Joe Bloggs</a></span></span>
<span class="meta-sep"> | </span>
<time class="entry-date" datetime="2022-03-14T14:28:33+00:00" title="March 14, 2022, 2:28 pm" itemprop="datePublished">14 March 2022</time>
<meta itemprop="dateModified" content="14 March 2022">
</div>
</header>
<div class="entry-content" itemprop="mainEntityOfPage">
<meta itemprop="description" content="Excerpt for article">
<p>Article text.</p>
<p>Article text.</p>
<p>Article text.</p>
</div>
</article>
每个 post 都有一张特色图片。此图像在语义上属于 <header>
,还是无关紧要(即 <article>
中的任何地方)?
我希望在元信息上方显示图像,即。现有 <header>
。从视觉上看,我猜它会包含 header 区域(即 post body 之前的内容),但它不一定会传达有关 post 的元信息.如果主图不应该是 <header>
的一部分,这意味着它也在 以上 <header>
.
(尽管页面顶部有一个 <header>
,但多个 in-page <header>
在语义上是 permitted。
然而,发现 documentation 往往与 top-of-page header 单独使用 <header>
有关:
The
<header>
element represents a container for introductory content or a set of navigational links.A
<header>
element typically contains:
- one or more heading elements (
<h1>
-<h6>
)- logo or icon
- authorship
正如您所引用的那样,header 元素“代表分段元素的介绍性内容”。如果您认为一篇文章的主要图片是其介绍性内容的一部分,那么将它放在 header 元素中是有意义的。
为了便于阅读,我省略了模式结构化数据。
<article>
<header>
<img alt="A kitten." src="/images/kitten.jpg" width="100" height="100">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: <a href="/authors/katrina-whisker/" rel="author">Katrina Wisquer</a></li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<p>There once was a cute kitten who...</p>
</article>
但是,如果您希望在视觉上将图像放在 header 内容之前,但在文档流中仍将其保留在 header 内容之后,您可以使用 CSS 来更改它的渲染位置。一个简单的方法是使用 order
property and CSS Flexbox or CSS Grid。这将改变视觉呈现顺序,但保持文档流不变。辅助技术将按照文档流的顺序呈现内容。
这可能是最好的解决方案,因为通常人们希望首先看到一篇文章的标题,然后才是其他任何事情。
article {
display: flex;
flex-direction: column;
margin: 1rem;
padding: 1rem;
border: 1px solid black;
}
.article-image {
order: 1;
}
.article-header {
order: 2;
}
.article-body {
order: 3;
}
<article>
<header class="article-header">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: <a href="/authors/katrina-whisker/" rel="author">Katrina Wisquer</a></li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<img class="article-image" alt="Kittens." src="https://placekitten.com/200/100" width="200" height="100">
<div class="article-body">
<p>There once was a cute kitten who...</p>
</div>
</article>
补充说明:
- 不要忘记图像上的
alt
属性 - 在无序列表中标记文章元数据比具有跨度的
<div>
更具语义。 - 您似乎过度使用和滥用了
title
attribute