Блочные и строчные элементы html. Основы html. Общие правила. Блочные и строчные элементы

В этой главе:

Синтаксис элемента

Элемент HTML - это основная структурная единица веб-страницы, написанная на языке HTML. Изображение ниже демонстрирует синтаксис элементов. Для большинства тегов синтаксис элементов будет выглядеть одинаково, за исключением одиночных тегов.

Все элементы в HTML следуют одному формату:

  • Элемент начинается с открывающего тега.
  • Элемент заканчивается закрывающим тегом.
  • Содержимым элемента является все, что находится между открывающим и закрывающим тегами.
  • Некоторые элементы не имеют содержимого (пустые элементы).
  • Большинство элементов могут содержать атрибуты

Примечание: не забывайте в закрывающем теге ставить символ "/ ", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом.

Пустые элементы

В HTML есть несколько элементов, которые не имеют закрывающего тега, например или
. Такие элементы называются пустыми , потому что они не содержат в себе никакого содержимого и не имеют закрывающего тега.

Вложенные элементы

Все HTML-документы состоят из вложенных элементов. Большинство из них могут либо содержать в себе другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.

Следующий пример состоит из трех элементов, два из которых вложенные:

Мой первый абзац

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

Это очень

интересно

Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).

Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:

Блочные элементы

HTML

Этот абзац - блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.

CSS

p { background-color: #8ABB55; }

Использование

  • Блочные элементы могут отображаться только внутри элемента и его потомков.

Блочные против строчных

Существует несколько ключевых отличий между блочными и строчными элементами:

Содержание Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру , чем встроенные элементы . Форматирование по умолчанию По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.

Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01 . В HTML5 это противопоставление заменено более сложным набором категорий контента . Категория «строчных » элементов примерно соответствует категории , а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы - это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.

Элементы

Ниже приведен полный список всех блочных элементов (хотя формально понятие «блочный » не применяется к новым элементам в HTML5 ) .

Контактная информация. ) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.">

HTML5 Содержание статьи. представляет собой раздел документа с контентом, косвенно связанным с основным содержимым документа (часто представленным как боковая панель)."> HTML5 Побочное содержание. (от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом .">
Длинная («блочная») цитата. используется для раскрытия скрытой (дополнительной) информации.">
HTML5 Раскрывающийся блок с подробностями. определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы
могут интегрироваться с диалогом с помощью указания атрибута method=" dialog returnvalue value submit.> HTML5 Диалоговое окно.
Описание определения. ) является базовым контейнером для элементов основного потока (flow content). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя ">
Фрагмент документа. (от англ. Description List), служащий контейнером для списка пар терминов и их описаний. Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).">
Список определений.
Термин в списке определений.
Группирование элементов формы.
HTML5 Описание для тега
), и обычно используется как единое целое.">
. представляет самостоятельный контент, часто с подписью (
), и обычно используется как единое целое.">
HTML5 Группирование медиа-контента с подписью (см.
). представляет нижний колонтитул (футер, подвал) для своего ближайшего элемента секционного контента или секционного корня. Футер обычно содержит информацию об авторе секции, информацию об авторском праве или ссылки на связанные документы.">