如何正确使用博客中的HTML语义元素？

本文介绍了如何正确使用博客中的HTML语义元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述我阅读了许多有关 w3schools 的信息。它将 li> 我应该如何为< article> c $ c>或者我的网站中包含版权和页脚导航的部分？我应该把< section> 标记围绕我的< article> 标记 ul> 假设我有一个简单的网站，其中包含徽标，导航，多篇文章和一些页脚文本。什么是最好的方式来做标记？ <！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 说：我不希望< ; 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 是（异常地）复杂。一般来说，何时使用部分？如果您有隐含的部分，或者您需要文档大纲中的条目。请参阅我的相关答案：如何决定使用哪个片段内容元素（带有三个博客标记示例）与文章中的code>小节 >部分（在博客上下文中）一个经验法则是什么时候使用部分请注意，验证程序在切分内容元素没有标题元素时报告警告，而不是错误。它们不需要标题，但可以表明切片内容元素被滥用：即使实际上没有提供标题，但通常只有在使用标题时才有意义。 I read a lot of information on w3schools. It defines <section> as:So, basically, a <section> can be a <header> (introduction) and <footer> (contact information)?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.QuestionsHow am I actually supposed to use the elements?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?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: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 / footerThere 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.sectionA 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:how to decide which sectioning content element to use (with three blog markup examples)section in article vs. article in section (in a blog context)a rule of thumb when to use sectionNote 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语义元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！