如何在博客中正确使用HTML语义元素?

Hri*_*dov 5 html tags semantic-markup

我读了很多关于w3schools的信息。它定义<section>为:

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

那么,基本上,a<section>可以是<header>(介绍)和<footer>(联系信息)吗?

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

所以我可以在a<header> 里面<section>放一个? 但是 a<section>可以用于“介绍”,所以它基本上一个标题?与元素相同的故事<footer>

问题

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

  • 我应该使用我的网站<header>的标题<article>还是包含徽标和导航的部分?

  • 我应该使用我的网站<footer>的数据<article>或包含版权和页脚导航的部分吗?

  • 我应该在标签周围放置<section>标签吗?<article>

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

<!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>
Run Code Online (Sandbox Code Playgroud)

如果我这样做,Nu HTML 检查器会说:

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

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

正确的标记是什么?

uno*_*nor 5

header/footer

\n\n

分段内容分段根元素。header/footer元素始终“属于”这些分段(内容/根)元素之一。

\n\n
<body>\n\n  <header>belongs to the \'body\'</header>\n\n  <article>\n    <header>belongs to the \'article\'</header>\n    <footer>belongs to the \'article\'</footer>\n  </article>\n\n  <div>\n    <header>belongs to the \'body\'</header>\n    <footer>belongs to the \'body\'</footer>\n  </div>\n\n  <footer>belongs to the \'body\'</footer>\n\n</body>\n
Run Code Online (Sandbox Code Playgroud)\n\n

请注意,该div元素不是分段元素,这就是为什么它的header/footer子元素属于body(这是分段根元素),而不是div

\n\n

因此,您可以将header/footer元素用于站点范围的内容,方法是放置它们,使其最近的分段父元素是该body元素。

\n\n

section

\n\n

/可以由一个或多个元素组成,但这通常仅在/ (通常)复杂的header情况下才有意义。footersectionheaderfooter

\n\n

一般来说,什么时候使用有意义section?如果您有隐式部分,或者您需要在文档大纲中添加条目。请看我的相关回答:

\n\n\n\n

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

\n