Блочные и строчные элементы
HTML-элементы, как правило, делятся на блочные и строчные.
Блочные элементы
Список блочных элементов
Ниже приведен полный список всех блочных элементов (несмотря на то, что понятие «блочный» технически не относится к новым элементам в HTML5). Как вы можете увидеть, их не так уж и много.
<address> Контактная информация <article> HTML5 Содержание статьи <aside> HTML5 Боковое содержание. <blockquote> Длинная цитата. <canvas> HTML5 Полотно (холст). <dd> Описание определения. <div> Фрагмент документа. <dl> Список определений. <fieldset> Группирование элементов формы. <figcaption> HTML5 Описание для тега <figure> <figure> HTML5 Группирование медиа-контента с подписью (см. <figcaption> ) <footer> HTML5 Нижняя часть («подвал») раздела или страницы. <form> Форма ввода. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Заголовки от первого до шестого уровня. <header> HTML5 Верхняя часть («шапка») раздела или страницы. <hgroup> HTML5 Группирование заголовков раздела или страницы. <hr> Горизонтальная разделительная линия. <li> Пункт списка. <main> HTML5 Содержит основной контент, уникальный для страницы. <nav> HTML5 Содержит навигационные ссылки. <noscript> HTML5 Содержимое, которое показывается, если JavaScript не поддерживается или выключен. <ol> Упорядоченный список. <output> HTML5 Область вывода информации. <p> Текстовый абзац. <pre> Предварительно форматированный текст. <section> HTML5 Раздел веб-страницы. <table> Таблица. <tfoot> «Подвал» таблицы. <ul> Неупорядоченный список.
Отличие от строчных(встроенных) элементов
Существует несколько ключевых отличий блочных элементов от строчных.
- Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название). При условии что ширина явно не задана.
- Высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. При условии что высота элемента явно не задана.
- Браузеры обычно отображают блочные элементы с переводом строки до и после элемента(так, блочные элементы можно представить в виде стопки коробок)
- Блочные элементы могут отображаться только внутри элемента <body> и его потомков.
- Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
Стандартная блочная модель
Cтандартная блочная модель отвечает на основной вопрос:
Схема блочной модели
Область содержимого — это содержимое элемента, например, текст или изображение.
Внутренний отступ задаётся свойством padding . Внутренний отступ — это расстояние между основным содержимым и его границей (рамкой). Если для элемента задать фон, то он распространится также и на поля элемента. Внутренний отступ не может принимать отрицательных значений, в отличие от внешнего отступа.
Внешний отступ задаётся свойством margin . Он добавляет расстояние снаружи элемента от внешней границы рамки до соседних элементов, тем самым разделяя элементы на странице. Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента.
Значения padding и margin задаются в следующем порядке: верхнее, правое, нижнее и левое.
Граница, или рамка элемента, задаётся с помощью свойства border . Если цвет рамки не задан, она принимает цвет основного содержимого элемента, например, текста. Если рамка имеет разрывы, то сквозь них будет проступать фон элемента.
Внешние, внутренние отступы и рамка элемента не являются обязательными, по умолчанию их значение равно нулю. Тем не менее, некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей. Очистить стили браузеров для всех элементов можно при помощи универсального селектора:
Фактическая ширина элемента складывается из ширины полей (внутренних отступов) padding , границ border и внешних отступов margin .
Элемент <DIV>
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Это своего рода универсальное средство построение разметки страницы. Но не стоит им злоупотреблять.
До HTML5 не было семантической разметки и не было специальных тэгов под заголовок <header> , под меню <nav> и тем более под медиа контент( <audio> , <video> ). Разметка велась по большей части тэгом <div> и в результате можно было встретить что то наподобие этого(см. рис.).
Реальный пример кода
Схлопывание вертикальных отступов
Соприкасающиеся вертикальные отступы margin объединяются. При этом ширина общего отступа равна ширине большего из исходных отступов.
Схлопывание отступов
Слияние выполняется только для блочных элементов в нормальном потоке документа. Внешние вертикальные отступы строчных, плавающих и абсолютно позиционированных элементов не сливаются.
Чтобы получить желаемый промежуток, можно задать, например, для верхнего элемента padding-bottom , а для нижнего элемента — margin-top .
Если среди схлопывающихся отступов есть отрицательные значения, то браузер добавит отрицательное значение к положительному, а полученный результат и будет расстоянием между элементами.
Выподание вертикальных отступов
Если внутри одного блока расположить другой блок и задать ему margin-top , то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского блока. Если у родительского элемента также был задан верхний отступ, то выберется наибольшее из значений.
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent .
Строчные элементы
Список строчных элеметов
Отличие от блочных элементов
Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы.По умолчанию, встроенные элементы не начинаются с новой строки, они располагаются друг за другом в одной строке, при необходимости строка переносится.
Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding , но если для элемента задан фон, он будет распространяться на верхний и нижний padding , заходя на соседние строки текста.
Ширина и высота строчного элемента зависит только от его содержимого, задать размеры с помощью CSS нельзя. Можно увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.
Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.
Преобразование в блочный/строчный элемент
Иногда бывает необходимо, чтобы строчный элемент вел себя как блочный и наоборот. Для этого необходимо установить соответствующее значение свойства display .
В некоторых случаях, например, требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height (тем самым получим подобие своего «button»).
Строчно-блочные элементы
Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные
- Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
- Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align .
- Разрешено задавать ширину и высоту.
- Эффект схлопывания отступов не действует.
Поведение блочных, строчных и строчно-блочные
Простые правила разметки
БЭМ расшифровывается как «Блок Элемент Модификатор». На самом деле, это целый стэк технологий, из которого мы воспользуемся только соглашением по именованию классов.
- БЭМ позволяет создавать абсолютно независимые блоки. Блоки и элементы получают уникальные имена, так что стили для одного элемента ничего не поломают в другом.
- БЭМ помогает легко придумывать любое количество классов, не повторяющихся между собой.
- БЭМ помогает писать самодокументирующийся код, в классе любого элемента содержится информация о нём.
Подробнее можно почитать в разделах Быстрый старт и Часто задаваемые вопросы на сайте bem.info.
Ниже показаны примеры кода.
Простой пример: Блок + Элемент #
Допустим, у вас есть блок с заголовком, текстом и кнопкой внутри, например, это всплывающее окно — попап. Разметка:
Добавляем класс содержащий назначение элемента: .popup :
Теперь попробуем добавить классы вложенным элементам:
Классы удобные, но не уникальные. Если на странице будут ещё элементы с классами .title и .text , их стили могут затронуть элементы в попапе. Селектор типа .popup .title может в будущем создать проблемы со специфичностью. Можно придумать другие классы, но чем больше похожих по смыслу элементов, тем сложнее придумывать новые классы.
А теперь применим БЭМ-нотацию: каждому элементу внутри блока добавим префикс с классом родителя, например, для заголовка это будет popup__title :
Теперь эти классы легко решают сразу две задачи: во-первых, благодаря уникальным классам стили для них никогда не пересекутся с другими подобными элементами на странице, а во-вторых, по таким классам сразу видно, что это элементы блока .popup .
Пример посложнее: Блок + Элемент + Модификатор #
Для примера возьмём сервисное сообщение на сайте. Обычно такие сообщения бывают разных видов, например, сообщение об успешном завершении действия или об ошибке.
Логично использовать одну и ту же разметку, но с разными цветовыми темами. Именно здесь очень пригодятся модификаторы.
Обоим элементам можно добавить одинаковые стили используя общий класс .message и так же легко можно добавить отдельные стили для каждого из них, используя уникальный класс с модификатором:
Оба сообщения будут иметь рамку толщиной один пиксель, но для сообщения об успешной операции она будет зелёной, а для сообщения об ошибке — красной.
Ещё сложнее: что делать, если хочется сделать элемент элемента? #
Например, на странице есть блок новостей:
Заголовок блока логично получает класс .news__title , список — .news__list , а отдельная новость — .news__item :
Тут никаких проблем возникнуть не должно. Теперь добавим разметку отдельной новости:
Нам нужно добавить класс заголовку новости. Первым делом приходит в голову .news__title , но такой класс уже занят. Предположим, что второй элемент будет не .title , а .subject , тогда в CSS получается такое:
Без дополнительных комментариев будет совершенно невозможно понять какой из них является заголовком всего блока, а какой — отдельной новости. Не пойдёт.
Следующий вариант — .news__item__title , но в БЭМ нельзя создавать элемент элемента, и это понятно, потому что получается каша. Ещё вариант: .news__item-title — тоже не годится, потому что может быть неочевидным как title соотносится с item . Как же быть?
Решение простое: на уровне элемента .news__item можно объявить новый блок (например, .news-item ), и строить вложенные классы уже от него. Да, это не самостоятельный переиспользуемый блок, здесь объявление блока нужно только для того, чтобы разгрузить селекторы. Что получается:
Проблема решена: нам больше не нужно использовать монструозные классы, при этом класс точно описывает элемент, и в CSS будет сразу понятно какой класс за что отвечает:
Выстраивание логической структуры страницы сайта на HTML5
Одной из задач создания новой версии HTML5 было упрощение разметки документа. Решением данной задачи стало создание новых тегов, которые отвечают за структуризацию документа.
Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как < header > (шапка сайта), < section >, < aside > , и < footer > (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги < div > для структуризации документа с использованием уникальных классов и id. Код, построенный исключительно на < div > очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.
Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.
Положительные стороны использования новых тегов
Поисковая оптимизация
Первая и весомая положительная сторона использования модернизированного HTML5 это облегчение обработки кода для поисковых роботов. В настоящее время роботы легко отличают вспомогательную информацию на сайте от основной тематики и контента.
Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.
Однако стоит отметить, что многие сеошники не уяснили основную суть принципа работы поисковиков по такой разметке, но это дело времени.
Доступность
Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:
Глядя на этот сайт достаточно просто сориентироваться, где находится основной контент, а где вспомогательная информация, а также четко видно, где шапка сайта, менюшки и подвал. Однако при использовании голосовых браузеров очень трудно добраться до сути сайта, к примеру, если это сайт-магазин. Чтобы добраться до сути ассортимента предлагаемого товара пользователю понадобится не дюжее упорство и терпение, которым обладает не каждый.
В таких случаях выходом из ситуации станет использование новых тегов. Они позволят всего одной голосовой командой переходить от названия сайта к меню, основному контенту и вспомогательным элементам навигации сайта.
Эти положительные стороны HTML5 повлияли на неожиданный интерес создателей альтернативных систем поиска, они делают серьезный уклон на семантику документа.
Коротко об основном назначении структурных тегов:
section
Данный тег отвечает за структуризацию блоков, связанных чем-либо между собой. Также с помощью этой команды можно делить текст на главы, разделы и подразделы. Обычно в рамках такого тега имеет место заголовок.
Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье «Построение структуры документа в HTML5 используя section»
Для более понятного разъяснения вернемся к примеру разбития объемного текста на главы и параграфы, которые также могут иметь подразделы и подпункты. Обратимся к следующему примеру кода для закрепления материала
Кстати, обратите внимание на наличие нескольких заголовков с маркером h1 это специальный прием, который мы обсудим позже.
Некоторые пользователи утверждают, что < section > — это не более, чем замена тега блочной верстки < div > . Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к < div > . Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.
article
Опытные веб-мастера называют эту секцию частным случаем тега < section > . Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.
К примерам автономных частей можно отнести анонсы статей на блоге, рекламные блоки, различные виджеты (к примеру с погодой).
Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: < section > или < аrticle > . К основным разногласиям по этому вопросу можно отнести следующие моменты:
- для создания главного контейнера веб-страницы следует использовать < section >, < аrticle > или < div > . С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей.
- как именно оформлять шапку сайта, а точнее какие теги использовать?
- и, наконец, как работать с основным контентом сайта? Нужно использовать < section > с < аrticle > внутри или же исключительно пользоваться одним < аrticle > .
Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов < acronim > и < abbr > . В тот раз проблема была решена достаточно просто, но радикально: отказались от использования < acronim > .
И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать < аrticle > , если можно отказаться от него и работать только с < section > ? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.
Скорее всего в данном случае отказаться от < аrticle > будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в предыдущей версии HTML. Решением данного вопроса стало бы усовершенствование < section > таким образом, чтобы были видны четкие различия между основным контентом сайта и вспомогательной информации.
В помощь начинающим мастерам сайтостроения предлагаю несколько особенных черт, по которым можно достаточно просто решить, когда именно нужно использовать < аrticle > :
- Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
- Если рационально было бы добавить атрибуты pubdat или cite.
- В случае полной автономности рассматриваемого нами фрагмента кода.
aside
Создан для отделения основного содержимого страницы от вспомогательного.
Тоесть в него мы можем заключить различного рода цитаты в тексте, дополнительные меню, рекламные баннеры и прочую информацию не имеющую отношения к основному содержимому страницы.
Чаще всего подобная информация на сайте располагается в сайдбаре.
header
Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как < hgroup > и < h1 >-< h6 > . Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.
Стоит отметить, что в первую очередь данный тег применяют при создании шапки, как указано в примере:
Однако не стоит ограничивать данный тег шапкой для веб-страницы. < header > он может располагаться внутри < section >, < article >, < aside > и в особых исключительных случаях в < nav > . При таком подходе тег < header > является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда < header > используется внутри < article > :
Стоит отметить, что header собирает воедино заголовок части, однако если эта самая часть состоит только из названия, то применять данный тег не следует:
Это нерациональное использование header, более правильной с точки зрения семантики будет следующая запись кода:
footer
Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом < footer > :
В этой части сайта принято располагать информацию о правах на авторство данного ресурса, копирайт, различные ссылки на вспомогательные ресурсы и прочее. Именно поэтому нельзя ограничивать использование тега < footer > исключительно на главной странице. рационально будет его использование и в различных разделах ресурса. Также не стоит заблуждаться, что < footer > обязательно должен находиться в самом низу сайта. К примеру, имеет место такая разметка страницы:
Использование nav отвечает за разделение навигационной части сайта и основного контента. Внутри этого блока могут располагаться не только ссылки на другие страницы сайта, но и якорные ссылки по текущей странице. Для примера посмотрим на следующий код:
Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:
И не стоит забывать о том, что < nav > формирует основной навигационный блок веб-страницы. дополнительные навигационные элементы сайта, такие как вспомогательные ссылки в футере или блоки, повторяющие навигацию, не должны выделяться этим тегом.