Html HTML5 - 适当使用文章标签?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6947489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 - Appropriate use of Article Tag?
提问by Wex
I want to change
我想改变
<section>
<header>...</header>
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>
into
进入
<section>
<header>...</header>
<article class="tweet">
<p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
</article>
</section>
But after reading some articleson the <article>
tag, I'm not sure that this is the best move. What would be better practice?
但是在阅读了一些关于标签的文章后<article>
,我不确定这是最好的举措。什么是更好的做法?
回答by Alohci
The important thing to understand about articles and sections is that they are sectioning elements. Each follows a common pattern:
了解文章和章节的重要一点是它们是分段元素。每个都遵循一个共同的模式:
<sectioning_element>
<heading_or_header>
... the body text and markup of the section
<footer>
</sectioning_element>
The footer is optional. Sectioning elements should have a "natural" heading. That is, it should be easy to write an <h?>
element at the start of the section/article, that describes and summarises the entire content of the section/article, such that other things on the page not inside the section/article would not be described by the heading.
页脚是可选的。分节元素应该有一个“自然”的标题。也就是说,应该很容易<h?>
在章节/文章的开头写一个元素,描述和总结章节/文章的全部内容,这样页面上不在章节/文章内的其他东西就不会被描述按标题。
It's not necessary to explicitly include the natural heading on the page, if for example, it was self evident what the heading would be and for stylistic reasons you didn't want to display it, but you should be able to say easily what it would have been had you chosen to include it.*
没有必要在页面上明确包含自然标题,例如,如果标题是不言自明的,并且出于风格原因您不想显示它,但您应该能够轻松说出它会是什么已被您选择包括在内。*
For example, a section might have a natural heading "cars for sale". It's extremely likely that from the content contained within the section, it would be patently obvious that the section was about cars being for sale, and that including the heading would be redundant information.
例如,一个部分可能有一个自然的标题“出售的汽车”。极有可能从该部分包含的内容来看,该部分显然是关于待售汽车的,并且包含标题将是多余的信息。
<section>
tends to be used for grouping things. Their natural headers are typically plural. e.g. "Cars for Sale"
<section>
往往用于对事物进行分组。它们的自然标题通常是复数。例如“待售汽车”
<article>
is for units of content. Their natural headers are usually a title for the whole of the text that follows. e.g. "My New Car"
<article>
用于内容单位。它们的自然标题通常是后面整个文本的标题。例如“我的新车”
So, if you're not grouping some things, then there's no need, and it's not correct, to use another sectioning element in between the header and footer of the section and your correct mark-up would be
因此,如果您没有对某些内容进行分组,那么就没有必要,也不正确,在该部分的页眉和页脚之间使用另一个分节元素,您的正确标记是
<article class="tweet">
<header>...</header>
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>
assuming you can find a natural heading to go inside the <header>
element. If you can't, then the correct mark-up is simply
假设您可以找到一个自然的标题进入<header>
元素内部。如果你不能,那么正确的标记就是
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
or
或者
<div class="tweet">
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>
* There's a case for including the natural heading anyway, and making it "display:none". Doing so will allow the section/article to be referenced cleanly by the document outline.
* 无论如何,有一种情况包括自然标题,并使其“显示:无”。这样做将允许文档大纲干净地引用该部分/文章。
回答by MikeM
<article>
content
<article>
内容
represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
代表文档、页面、应用程序或站点中的自包含组合,即原则上可独立分发或可重用,例如在联合中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具,或任何其他独立的内容项。
in fact one of the examples illustrates nested <article>
elements where the inner <article>
is inside a <section>
事实上,其中一个示例说明了嵌套<article>
元素,其中内部元素<article>
位于<section>
回答by Shauna
Why don't you think it's a good move? It seems to me that a Tweet would fit perfectly in the W3C spec on what should be in an article. It would most likely depend on the context your sample code is in (which we can't tell from what you've provided).
你为什么不认为这是一个好举措?在我看来,Tweet 完全符合 W3C 规范关于文章应该包含的内容。这很可能取决于您的示例代码所在的上下文(我们无法从您提供的内容中得知)。
回答by Joe Conlin
I went through quite a bit of head scratching to understand it because it seems to be confusing to quite a few but it really should be looked at a bit more literally. Here is an easy way to look at it:
为了理解它,我经历了相当多的摸索,因为它似乎让很多人感到困惑,但它确实应该从字面上看。这是查看它的简单方法:
Sections can contain elements from different topics. Articles should contain elements from the same topic.
部分可以包含来自不同主题的元素。文章应包含来自同一主题的元素。
For example:
例如:
<section>
<section>
<article id="article_ONE">
<header>...</header>
<p>Not directly related to article_TWO</p>
<footer>...</footer>
</article>
</section>
<section>
<article id="article_TWO">
<article>
<header>...</header>
<p>Part 1 of article TWO</p>
<footer>...</footer>
</article>
<article>
<header>...</header>
<p>Part 2 of article TWO</p>
<footer>...</footer>
</article>
</article>
</section>
</section>
回答by ayyp
The semantics don't matter THAT much. You could very well do that if you wanted to and it would be fine. The thing with the article
vs. section
usage debate is that it's all subjective, to a point. I would recommend against how you're doing it in the second version though because it seems as though that just clutters the code more. What you could do is just replace the section
tag with an article
tag.
语义没有那么重要。如果你愿意,你可以很好地做到这一点,这很好。与该事article
与section
用法辩论,这一切都主观的,到一个点。我建议不要在第二个版本中这样做,因为这似乎只会使代码更加混乱。您可以做的只是用section
标签替换article
标签。