如何在博客中正确使用HTML语义元素？ [关闭]

2024-01-08

我读了很多关于w3学校 https://www.w3schools.com/html/html5_semantic_elements.asp。它定义了<section> as:

元素定义文档中的一个部分。 [...] 主页通常可以分为介绍、内容和联系信息几个部分。

所以，基本上，一个<section>可以是一个<header>（介绍）和<footer>（联系信息）？

元素指定文档或部分的标题。

所以我可以放一个<header> inside a <section>? But a <section>可以用于“介绍”，所以基本上is一个标题？与同样的故事<footer>元素。

问题

我实际上应该如何使用这些元素？

我应该使用<header>对于一个标题<article>或者我的网站包含徽标和导航的部分？
我应该使用<footer>对于一个数据<article>或者我的网站中包含版权和页脚导航的部分？
我应该放一个<section> tag around my <article> tags?

假设我有一个简单的网站，包含徽标、导航、几篇文章和一些页脚文本。进行标记的最佳方法是什么？

<!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>

如果我这样做，Nu HTML 检查器 http://validator.w3.org/nu/ says:

警告：该部分缺少标题。考虑使用 h2-h6 元素向所有部分添加识别标题。

我不想要一个<h1>说明<section>包含<article>标签。我应该删除<section>？它似乎是一个灵活的标签，但我找不到放置它的有效位置。

正确的标记是什么？

`header` / `footer`

有分段内容 https://www.w3.org/TR/2016/REC-html51-20161101/dom.html#sectioning-content and 切根 https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#sectioning-roots元素。header/footer元素始终“属于”这些分段（内容/根）元素之一。

<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>

请注意，div元素不是分段元素，这就是为什么它header/footer儿童属于body（这是一个分段根元素），而不是div.

所以你可以使用header/footer站点范围内容的元素，通过放置它们使得它们最近的分段父元素是body元素。

`section`

A header/footer可以由一个或多个组成section元素，但这通常只有在以下情况下才有意义header/footer（通常）很复杂。

一般来说，什么时候使用才有意义section？如果你有一个隐含的section，或者如果您需要在文档大纲中添加条目。请看我的相关回答：

如何决定使用哪个分段内容元素 https://stackoverflow.com/a/26887006/1591669（带有三个博客标记示例）
section in article vs. article in section https://stackoverflow.com/a/30286429/1591669（在博客上下文中）
何时使用的经验法则section https://stackoverflow.com/a/40462142/1591669

请注意，验证器报告警告，而不是错误 https://stackoverflow.com/a/26185873/1591669，当分段内容元素没有标题元素时。它们不需要有标题，但这可能表明分段内容元素被滥用：通常只有在可以有标题的情况下使用它才有意义，即使您实际上没有提供标题。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

semanticmarkup