Можно ли вкладывать элемент<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-элементы только если вы понимаете, как они работают. И не забывайте вставлять заголовки для секций. А если их нет на макетах, доступно их прячьте.
Видеоверсия
Вопросы можно задавать здесь.
Комментарии (14)
r-moiseev
08.09.2017 19:51-2А можно практический пример на что влияет использование secion? Ну кроме уже лет 6 длящегося — вот когда все начнут писать тогда наступит семантическое счастье
MrGobus
08.09.2017 20:39+1Мораль: используйте новые структурные HTML-элементы только если вы понимаете, как они работают.
Эм, я ждал когда же раскроется интрига, но внезапно статья кончилась =\ Итого, в чем же подводные камни section? В чем сложности и опасности использования в футере? А если в header или sidebar? Может браузер как то оптимизирует подгрузку и отображение?
ZurgInq
Вопрос от backend программиста. Расскажите, кому кроме программистов\верстальщиков действительно нужна семантика в html и какие будут минусы, если вместо новомодных footer\section везде использовать старый добрый div?
Odrin
SEO, ARIA.
tegArt
В конце концов, кому кроме программистов\верстальщиков действительно нужен кодстайл? Конечному пользователю же без разницы…
зы. но статья, имхо, какая-то очевидно-бессмысленная.
AlexPershin
Сразу оговорюсь, что пишу не про новомодные веб-приложения, а про сайты с контентом или веб-сервисы.
В первую очередь семантика нужна пользователям. Какие могут быть пользователи:
1. Обычные люди
2. Поисковые роботы
3. Специализированные парсеры
Обычные люди не читают код, но некоторые люди слушают сайты с читалок. Семантичная разметка позволяет им работать быстрее, за счёт более эффективной навигации по странице.
Поисковым роботам тоже семантичная разметка нравится. Например, гугл парсит с сайтов расписания и выводит в свой виджет в поиске, если расписания на сайте свёрстаны таблицей. Так как семантика таблиц – набор многомерных связанных данных. И использование таблиц для разметки таких данных – это и есть семантика.
Про парсеры сайтов не мне рассказывать бэкенд-программисту. Чем более структурированно свёрстана страница, тем удобнее её парсить. Чтобы получить уникальное содержимое каждой страницы, вы идёте внутрь тега main, находите там нужный раздел и выдираете содержимое списка. Понятно, что можно ориентироваться и по классам, но если помимо классов ещё и теги правильные в разметке, то как-то спокойнее.
Вообще, делать семантическую вёрстку для профессионального верстальщика – это вопрос профессионального самоуважения и культуры кодирования. Это точно такой же вопрос, как у обычных программистов умение понятно называть переменные/классы/методы.
Zman
Возможно, это необходимо экранным читалкам?
B_Rudenko
Например пользователям которые используют скринридеры по разным причинам. Такие пользователи скажут вам большое спасибо, если вы будете придерживаться семантического подхода. Вы повысите доступность к вашему сайту группе людей, обычно о которых никто не думает. Если вам будет интересно, то можете посмотреть доклад на эту тему от Вадима Макеева.
SelenIT3
Сейчас тренд такой, что в первом приближении семантика = доступность (не только для слепых/инвалидов, для людей за рулем, например, тоже). Соответственно, с правильной разметкой блоков «основной контент», «навигация», «побочная информация» и т.п. и правильной структурой заголовков юзер читалки сможет быстро понять, что вообще есть на странице, и перейти сразу к нужному, а без нее читалка будет долго и нудно читать ему всё подряд. А за отсутствие доступности в некоторых странах уже штрафуют...
Но новомодные footer\section — не панацея, потому что те же читалки за 10 лет так и не научились строить иерархию заголовков с их учетом. Поэтому слишком сильно упарываться по семантике, может, и впрямь не стоит (пока?), важнее тестировать с разными читалками на практике.
pm_wanderer
Про штрафы откуда инфа?)
В законах (американский Section 508 например) есть лишь требования по доступности к государственным сайтам и производителям операционных систем.
Aingis
Вадим как раз рассказывал про это на недавной конфе.