Энциклопедия HTML5 > Теги HTML5 > Section HTML5

Section HTML5

Запись создана: 22 Июн 2015
Запись обновлена: 22 Июн 2015

Тег section в языке HTML5

Тег section в HTML5, может обрамлять повторяющиеся элементы (разделы), на странице сайта. Данный тег довольно сложен для понимания, попробуем разобраться когда же его применять.

Теги <section> </section> могут обрамлять комментарии на сайте, ответы темы на форуме, анонсы (цитаты) новостей или постов на главной странице, страниц категориев, меток и т.д. Также тегами section можно обрамлять виджеты в сайдбаре или главы рассказа, если они расположены на одной странице.

Приведём пример возможного расположения тегов section в типичном коде шаблона страницы, созданной с помощью языка HTML5:

<!DOCTYPE html>
<html lang="ru">
    
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="css/normalize.css" />
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">
            <header>Шапка страницы</header>

            <nav>Основное меню страницы</nav>
            
            <div class="main">

                <section>
                    анонс поста 1
                </section>

                <section>
                    анонс поста 2
                </section>

                <section>
                    анонс поста 3 и т.д.
                </section>

                <aside>Сайдбар</aside>
            </div> <!-- .main -->

            <footer>Подвал страницы</footer>
        </div> <!-- .wrapper -->
    </body>
</html>

Тег section — это блочный элемент.
Семантика — используется для обозначения повторяющихся блоков на сайте.

HTML5

Section HTML5

Тег section в языке HTML5

Добавить комментарий