如何正确使用博客中的HTML语义元素？ [英] How to properly use the HTML semantic elements in a blog?
问题描述
我阅读了许多有关 w3schools 的信息。它将< section> 定义为：
< section>元素在文档中定义一个节。 [/ b>]
因此，基本上， < section> 可以是< header> （介绍）并且<页脚> （联系信息）？
< header>元素为文档或部分指定一个头。
所以我可以把< header> code> 里面 a < section> ？但是< section> 可以用于介绍，所以它基本上是是标题？与< footer> 元素同样的故事。
问题
我应该如何使用这些元素？
-
我应该使用
< p>对于< article>的标题或者包含徽标和导航的我的网站部分， li>
我应该如何为
< article> < footer>c $ c>或者我的网站中包含版权和页脚导航的部分？< section>标记围绕我的< article>标记 ul> - 如何决定使用哪个片段内容元素（带有三个博客标记示例）
- <
文章 与文章中的code>小节 >部分 （在博客上下文中） - 一个经验法则是什么时候使用
部分 Should I use
<header>for the title of an<article>or for the part of my website containing the logo and navigation?Should I use
<footer>for the data of an<article>or for the part of my website containing the copyright and footer navigation?Should I put a
<section>tag around my<article>tags?- how to decide which sectioning content element to use (with three blog markup examples)
sectioninarticlevs.articleinsection(in a blog context)- a rule of thumb when to use
section
假设我有一个简单的网站，其中包含徽标，导航，多篇文章和一些页脚文本。什么是最好的方式来做标记？
<！DOCTYPE html>< html>< head> < title>我的网站< / title>< / head>< body> <报头GT; < img src =logo.pngalt =我的标志！> < NAV> < UL> < li>< a href =＃>第1项< / a>< / li> < li>< a href =＃>第2项< / a>< / li> < li>< a href =＃>第3项< / a>< / li> < / UL> < / NAV> < /报头> <节> <物品> < header>< h2> Article 1 title< / h2>< / header> < footer> Posted on Foo.Bar.2017< / footer> < /冠词GT; <物品> < header>< h2> Article 2 title< / h2>< / header> < footer> Posted on Foo.Bar.2017< / footer> < /冠词GT; <物品> < header>< h2> Article 3 title< / h2>< / header> < footer> Posted on Foo.Bar.2017< / footer> < /冠词GT; < /节> <页脚> < p为H.版权及LT; / p为H. < / foot>< / body>< / html>
p>如果我这样做， Nu HTML Checker 说：
警告：部分缺少标题。考虑使用h2-h6元素为所有部分添加标识标题。
我不希望< ; h1> 指出< section> 包含< article> 标签。我应该删除< section> 吗？它似乎是一个灵活的标签，但我找不到一个有效的地方。
什么是正确的标记？
header / footer
有切分内容和切片根元素。 标题 / 页脚元素始终属于其中一个部分（content / root）元素。
< body>
< header>属于'body'< / header>
<文章>
< header>属于'文章'< / header>
< footer>属于'文章'< / footer>
< / article>
< div>
< header>属于'body'< / header>
< footer>属于'body'< / footer>
< / div>
< footer>属于'body'< / footer>
< / body>
请注意， div 元素不是sectioning元素，这就是为什么它的头 / 页脚子元素属于 body （这是一个根元素），而不是 div 。
所以你可以使用 header / footer 通过放置网站内容以使它们最接近的切分父元素为 body 元素。
$ b
部分
头 / 页脚可以包含一个或多个部分元素，但这通常只有在头 / footer 是（异常地）复杂。 一般来说，何时使用部分？如果您有隐含的部分，或者您需要文档大纲中的条目。请参阅我的相关答案：
请注意，验证程序在切分内容元素没有标题元素时报告警告，而不是错误。它们不需要标题，但可以表明切片内容元素被滥用：即使实际上没有提供标题，但通常只有在使用标题时才有意义。
I read a lot of information on w3schools. It defines <section> as:
The <section> element defines a section in a document. [...] A home page could normally be split into sections for introduction, content, and contact information.
So, basically, a <section> can be a <header> (introduction) and <footer> (contact information)?
The <header> element specifies a header for a document or section.
So I could put a <header> inside a <section>? But a <section> can be used "for introduction", so it basically is a header? Same story with the <footer> element.
Questions
How am I actually supposed to use the elements?
Let's say I have a simple website, containing a logo, navigation, several articles and some footer text. What would be the best way to do the markup?
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
<header>
<img src="logo.png" alt="My logo!">
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</header>
<section>
<article>
<header><h2>Article 1 title</h2></header>
<footer>Posted on Foo.Bar.2017</footer>
</article>
<article>
<header><h2>Article 2 title</h2></header>
<footer>Posted on Foo.Bar.2017</footer>
</article>
<article>
<header><h2>Article 3 title</h2></header>
<footer>Posted on Foo.Bar.2017</footer>
</article>
</section>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
If I do that, the Nu HTML Checker says:
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
I don't want an <h1> stating the <section> contains <article> tags. Should I just remove the <section>? It appears to be a flexible tag, yet I can't find a valid place to put it.
What would be the correct markup?
header / footer
There are sectioning content and sectioning root elements. header/footer elements always "belong" to one of these sectioning (content/root) elements.
<body>
<header>belongs to the 'body'</header>
<article>
<header>belongs to the 'article'</header>
<footer>belongs to the 'article'</footer>
</article>
<div>
<header>belongs to the 'body'</header>
<footer>belongs to the 'body'</footer>
</div>
<footer>belongs to the 'body'</footer>
</body>
Note that the div element is not a sectioning element, which is why its header/footer children belong to the body (which is a sectioning root element), not to the div.
So you can use header/footer elements for site-wide content by placing them so that their nearest sectioning parent element is the body element.
section
A header/footer could consist of one or multiple section elements, but this typically only makes sense if the header/footer is (unusually) complex.
In general, when does it make sense to use section? If you have an implicit section, or if you need an entry in the document outline. Please see my related answers:
Note that the validator reports a warning, not an error, when a sectioning content element doesn’t have a heading element. They are not required to have headings, but it can be sign that the sectioning content elements gets misused: it typically only makes sense to use one if it could have a heading, even if you don’t actually provide one.
这篇关于如何正确使用博客中的HTML语义元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
