带有“节”元素的语义

时间:2018-10-04 09:09:19

标签: html html5 semantics

我一直在阅读有关'section'元素的内容,同时试图了解我应该如何在文档中使用它。

在文档中,我看到它指出:

  

section元素代表文档或文档的通用部分   应用。在这种情况下,一节是以下主题的分组   内容。每个部分都应加以标识,通常包括   标题(h1-h6元素)作为section元素的子元素。

例如:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Site Name</title>

</head>

<body>

    <header>

        <div class="container">

            <img src="logo.jpg" srcset="logo.jpg, logo@2x.jpg 2x" title="Site Name" alt="Site Name">

            <nav>
                <ul>
                    <li><a href="">Page</a></li>
                    <li><a href="">Page</a></li>
                    <li><a href="">Page</a></li>
                    <li><a href="">Page</a></li>
                    <li><a href="">Page</a></li>                    
                </ul>
            </nav>

        </div> 

    </header>

    <main>

        <section class="container">

            <div class="wrapper">

                <div class="col-12 divide">

                    <h1>Page Header</h1>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae augue ut nisl rutrum lacinia. In quis dapibus arcu. Praesent accumsan fermentum bibendum. Praesent ac efficitur arcu, et sodales mi. Vestibulum venenatis turpis ut pretium aliquet.</p>

                </div>

                <article class="grid col-12 bp1-col-6 bp3-col-4 half-divide">
                    <a href="page/page.html">
                        <img src="image.jpg" title="Image Name" alt="Image Name">
                        <h2>Image Name</h2>
                    </a> 
                </article>

                <article class="grid col-12 bp1-col-6 bp3-col-4 half-divide">
                    <a href="page/page.html">
                        <img src="image.jpg" title="Image Name" alt="Image Name">
                        <h2>Image Name</h2>
                    </a> 
                </article>

                <article class="grid col-12 bp1-col-6 bp3-col-4 half-divide">
                    <a href="page/page.html">
                        <img src="image.jpg" title="Image Name" alt="Image Name">
                        <h2>Image Name</h2>
                    </a> 
                </article>

                <article class="grid col-12 bp1-col-6 bp3-col-4 half-divide">
                    <a href="page/page.html">
                        <img src="image.jpg" title="Image Name" alt="Image Name">
                        <h2>Image Name</h2>
                    </a> 
                </article>                          

            </div>

        </section>

    </main>

    <footer>

        <div class="container">

            <nav>
                <a href="">Secondary Nav</a>
                <a href="">Secondary Nav</a>
            </nav>

            <p>Copyright Statement</p>

        </div>

    </footer>

</body>

</html>

这是带有此代码的文档大纲。

enter image description here

在大纲中,有许多“无标题的节”,分别是页眉,主要和页脚。这些没有标题标签的“无标题”可以吗?除非隐藏标题标签,否则我看不到它们如何在这些部分中使用?

我已经使用'section'元素包装了正文,并在其中包含了article元素,因为它们与h1标头和文本有关。这是'section'元素的正确使用吗?

0 个答案:

没有答案