Секции в футере


    Можно ли вкладывать элемент <section> в <footer>?

    Элемент <section> появился в HTML5 и разделяет содержимое на части или секции. Отсюда и название.


    Как понять, что это вообще <section>? Это даже важнее, чем можно ли его куда-либо вкладывать. <section> — это одна из частей содержимого, а значит он не имеет смысла в одиночку. Это как список из одного пункта, который скорее параграф.


    <main>
      <section>
        <h2>Зачем?</h2>
      </section>
    </main>

    Если содержимое делится на несколько логических частей, значит каждую можно завернуть в отдельный <section>. Такой секции стоит дать заголовок, чтобы было понятней, что там содержится. Спецификация даже настаивает на этом.


    <h1>Обед</h1>
    <section>
      <h2>Первое</h2>
    </section>
    <section>
      <h2>Второе</h2>
    </section>

    Многие думают, что <section> — это такой модный <div> и очень ошибаются. Смотрите, я использую HTML5! Нет. Этот элемент несёт определённый смысл и если вы его не понимаете, его лучше вообще не трогать.


    Самый яркий пример использования <section> прямо из спецификации — это блок со вкладками. У вас есть группа вкладок и нажатие на заголовок каждой показывает её содержимое. Такая вкладка — это самый настоящий <section>.


    Или типичный одностраничный лендинг: всё содержимое сайта на одной странице, но в отдельных частях высотой с окно. Описание компании, преимущества, адрес с картой — ну, вот это всё. Каждый такой блок — это <section>.


    Ладно, с секциями разобрались, а что такое <footer>? Если очень коротко, то это такой справочный блок с датой публикации, автором, сносками. И он может быть не один на странице! О нём мы как-нибудь поговорим отдельно.


    Итак, <footer> справочный, <section> делит на части. То есть: если в справке есть какие-то структурные части, то почему бы и нет? Бывает, что в подвал сайта кладут много информации, которая помогает сориентироваться: контакты, карту сайта, поиск. Хороший такой, жирненький <footer>.


    <footer>
      <section>
        <h2>Поиск</h2>
      </section>
      <section>
        <h2>Справка</h2>
      </section>
    </footer>

    Даёте каждой секции подходящий заголовок и делите <footer> на части.


    Про семантику <section> и других элементов можно почитать на сайте HTML5 Doctor. Некоторые статьи писали авторы спецификации HTML, чтобы помочь разработчикам. Их также много переводили, так что все ссылки есть в описании к видео.


    Мораль: используйте новые структурные HTML-элементы только если вы понимаете, как они работают. И не забывайте вставлять заголовки для секций. А если их нет на макетах, доступно их прячьте.


    Видеоверсия



    Вопросы можно задавать здесь.

    HTML Academy 149,25
    Интерактивные онлайн-курсы
    Поделиться публикацией

    Вакансии компании HTML Academy

    • Front-end developer
      от 60 000 до 100 000 руб.
      Санкт-Петербург Полный рабочий день
    Комментарии 17
    • +1
      Вопрос от backend программиста. Расскажите, кому кроме программистов\верстальщиков действительно нужна семантика в html и какие будут минусы, если вместо новомодных footer\section везде использовать старый добрый div?
      • –1
        SEO, ARIA.
        • 0
          В конце концов, кому кроме программистов\верстальщиков действительно нужен кодстайл? Конечному пользователю же без разницы…
          зы. но статья, имхо, какая-то очевидно-бессмысленная.
          • +3
            Сразу оговорюсь, что пишу не про новомодные веб-приложения, а про сайты с контентом или веб-сервисы.

            В первую очередь семантика нужна пользователям. Какие могут быть пользователи:

            1. Обычные люди
            2. Поисковые роботы
            3. Специализированные парсеры

            Обычные люди не читают код, но некоторые люди слушают сайты с читалок. Семантичная разметка позволяет им работать быстрее, за счёт более эффективной навигации по странице.

            Поисковым роботам тоже семантичная разметка нравится. Например, гугл парсит с сайтов расписания и выводит в свой виджет в поиске, если расписания на сайте свёрстаны таблицей. Так как семантика таблиц – набор многомерных связанных данных. И использование таблиц для разметки таких данных – это и есть семантика.

            Про парсеры сайтов не мне рассказывать бэкенд-программисту. Чем более структурированно свёрстана страница, тем удобнее её парсить. Чтобы получить уникальное содержимое каждой страницы, вы идёте внутрь тега main, находите там нужный раздел и выдираете содержимое списка. Понятно, что можно ориентироваться и по классам, но если помимо классов ещё и теги правильные в разметке, то как-то спокойнее.

            Вообще, делать семантическую вёрстку для профессионального верстальщика – это вопрос профессионального самоуважения и культуры кодирования. Это точно такой же вопрос, как у обычных программистов умение понятно называть переменные/классы/методы.
            • 0
              Возможно, это необходимо экранным читалкам?
              • 0
                Например пользователям которые используют скринридеры по разным причинам. Такие пользователи скажут вам большое спасибо, если вы будете придерживаться семантического подхода. Вы повысите доступность к вашему сайту группе людей, обычно о которых никто не думает. Если вам будет интересно, то можете посмотреть доклад на эту тему от Вадима Макеева.
                • 0

                  Сейчас тренд такой, что в первом приближении семантика = доступность (не только для слепых/инвалидов, для людей за рулем, например, тоже). Соответственно, с правильной разметкой блоков «основной контент», «навигация», «побочная информация» и т.п. и правильной структурой заголовков юзер читалки сможет быстро понять, что вообще есть на странице, и перейти сразу к нужному, а без нее читалка будет долго и нудно читать ему всё подряд. А за отсутствие доступности в некоторых странах уже штрафуют...


                  Но новомодные footer\section — не панацея, потому что те же читалки за 10 лет так и не научились строить иерархию заголовков с их учетом. Поэтому слишком сильно упарываться по семантике, может, и впрямь не стоит (пока?), важнее тестировать с разными читалками на практике.

                • 0
                  Вадим как раз рассказывал про это на недавной конфе.
                  • 0
                    кому кроме программистов\верстальщиков действительно нужна семантика в html

                    Вот верстальщикам семантика точно не нужна =)
                    Структурированная информация нужна программам — читалкам, поисковым системам, skynet…
                  • –1
                    Не в бровь а в глаз!
                    • –2

                      А можно практический пример на что влияет использование secion? Ну кроме уже лет 6 длящегося — вот когда все начнут писать тогда наступит семантическое счастье

                      • +1
                        Мораль: используйте новые структурные HTML-элементы только если вы понимаете, как они работают.

                        Эм, я ждал когда же раскроется интрига, но внезапно статья кончилась =\ Итого, в чем же подводные камни section? В чем сложности и опасности использования в футере? А если в header или sidebar? Может браузер как то оптимизирует подгрузку и отображение?
                        • 0
                          Видимо, никакой интриги нет :) если есть необходимость в этом теге, то используем, не боясь сложностей и подводных камней (хотя к ним можно отнести рекомендацию задавать заголовок и прятать, если его нет в макете). И в sidebar тоже. А вот «жирный» header, в котором несколько section представить очень сложно.
                        • +1
                          Почему Вадик на КДПВ такой грустный?
                          • +3

                            Ему не нравятся минусы за пост.

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                          Самое читаемое