HTML тег <section>
HTML тег <section> недавно введен в HTML5. Он используется для группировки логически связанного контента и создания разделов страницы (блок новостей, контактная информация и т.д.). Тег <section> часто используют при создании “посадочных страниц” (landing page) для разделения страницы на логические блоки.
Тег <section> может быть вложен в тег <article>, разделяя содержащийся в нем контент на логические блоки. При этом необходимо, чтобы в теге <article> и вложенном в него теге <section> были использованы заголовки <h1>-<h6>. Допускается также использование заголовка <h2> в каждом разделе, определенном тегом <section>.
Тег <article> может вкладываться в тег <section>, если необходимо сформировать тематические блоки в разделе. При этом на элементы также распространяется правило размещения заголовков, о котором говорится выше.
Тег <section> может также быть вложен в другой тег<section>, но при этом иерархия заголовков не должна нарушаться.
Синтаксис
Содержимое элемента заключается между открывающим (<section>) и закрывающим (</section>) тегами. Закрывающий тег обязателен.
Как использовать секционные элементы HTML5
Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.
HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент
Вы можете вкладывать элементы
В этом примере мы использовали элемент
Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента
В этом примере мы использовали элемент
В этом примере элемент
Так же как
Этот элемент часто используется внутри элемента
Базовые теги для разметки документа
Логический раздел можно осмысленно назвать одним словом или словосочетанием: «опыт работы», «дипломы», «мои навыки».
Если же в голову приходят названия, которые указывают на его положение на странице («шапка», «подвал», «левая колонка»), либо перечисления («новости и галерея», «фильтры и товары»), в таком случае раздел структурный и тег <section> для него не подходит.
Основная навигация. Тег <nav>
Для создания логического раздела с основной навигацией предназначен тег <nav> (сокращение от английского «navigation»). Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.
Независимый раздел. Тег <article>
Тег <article> , в отличие от <section> , можно вырвать из одного места и вставить в другое (на другую страницу сайта или на другой сайт), и смысл содержимого тега при этом не потеряется.
Дополнительное содержимое. Тег <aside>
Тег <aside> включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями
Заголовки
Для создания основной структуры текста используют заголовки. В HTML существует целое семейство заголовочных тегов: от <h1> до <h6> .
Параграф. Тег <p>
Для разметки параграфов предназначен тег <p> (от английского «paragraph»). По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.
Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я прочел лекции по HTML и CSS и поставил перед собой цель — стать им.
Здесь я буду публиковать различные интересные вещи, которые узнал в процессе обучения.
Структурная разметка
Есть целый набор семантических тегов для разметки больших логических разделов и улучшения структурной семантики страницы. Каждый из них может быть использован при определённых условиях. Это влияет на работу ассистивных технологий, индексирование страницы и её рейтинг выдачи в поиске.
Потоковое содержимое
Тег <header>
Шапка (хедер) выделяет вводную часть всей страницы, сложной секции или статьи. Обычно содержит логотип, навигацию, вводный текст, сложный заголовок. Может быть несколько на странице.
Тег <footer>
Подвал (футер) это финальная часть всей страницы, её раздела или статьи. Часто содержит копирайт, список ссылок на социальные сети, контактную информацию и так далее. Может быть несколько на странице.
Тег <main>
Основное, не повторяющееся на других страницах сайта (уникальное), содержание. Может быть только один на странице.
Смысловые разделы
Тег <nav>
Определяет раздел основной навигации со ссылками на секции текущей или других страниц. Используется только для основной навигации, а не для любой группы ссылок в документе.
Тег <article>
Независимая, отделяемая и, имеющая значение вне, часть документа. Например пост на форуме, твит, статья в блоге, виджет с рекламой, инстаграм история, карточка товара в магазине.
Если разделу документа можно дать имя, вынести его вне сайта и он будет иметь смысл — это <article> . Обязателен заголовок.
Тег section
Крупный раздел, объединяющий содержание по смыслу. Неотделим от основного документа. Например секция списка товаров, блок личной информации в профиле пользователя, раздел контактной информации.
Если разделу документа можно дать имя, но вне сайта он не будет иметь смысла — это <section> . Желателен заголовок.
Тег <div>
Универсальный контейнер без семантического значения. Используется как блок-обёртка для последующей стилизации контента.
Если не получается дать группе контента вменяемое имя (не "правая колонка", а имеющее смысл) — это <div> и скорее всего вам просто нужен общий контейнер для оформления.
Алгоритм выбора тега
Не только новичкам бывает трудно решить какой тег использовать для разметки блока контента основываясь на его семантическом значении. Пользуйтесь этим алгоритмом для определения подходящего тега.
Разметка страницы
Используя все рассмотренные теги наберём разметку простой страницы начинающей веб-студии.