Семантика с элементом section - PullRequest
Новая
       7

Семантика с элементом section

0 голосов
/ 04 октября 2018

Я читал об элементе '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?

...