Строчные теги. Блочные и встроенные элементы

03.06.2019

Очевидно вы уже заметили, что элементы заголовков

-
и абзацев

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

Пример: Блочные и встроенные элементы

  • Попробуй сам »

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

занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками

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

Начинается с новой строки, а встроенный элемент





Блочный элемент (h2) занимает всю ширину родительского элемента
и ограничен сверху и снизу пустыми строками

Блочный элемент (p) начинается с новой строки,
а встроенный элемент (em)
не начинается с новой строки, а остается в составе абзаца


Обратите внимание как выглядит текст, который мы пометили как курсивный (еm). Он не начинается с новой строки, а остается в составе абзаца. Это происходит потому, что элемент является встроенным или строчным. Встроенные элементы не начинаются с новой строки, а находятся в составе блочных. Встроенным элементам достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в них.

Разница между блочными и строчными элементами следующая:

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

Примеры блочных элементов:

  • -

Примеры строчных элементов:

Общие элементы
и

Элемент

— это общий блочный элемент, который применяется для группировки одного или нескольких блочных элементов. Он указывает, что сгруппированные вместе элементы образуют некую смысловую единицу и должны рассматриваться, например таблицей стилей CSS, как одна единица. Используя элемент
вместе с таблицами стилей CSS, вы сможете придать одинаковое стилевое оформление для всех элементов, помещенных в контейнер
.

Итак, тег

служит для того, чтобы:
– применять какие-либо настройки к отдельному информационному блоку на сайте;
– быть контейнером для текста, изображений и других элементов HTML-документа.

Элемент — это общий встроенный элемент, который используется для встроенных элементов, которые не вводят переводов строк. Элемент может содержать только текст и другие встроенные элементы (вы не можете поместить туда блочные элементы: заголовки, списки, элементы группировки контента и т. д.).
Так как элемент — строчный , то есть не требует для себя всей ширины окна браузера, то ему достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем. Поэтому элемент часто используется для форматирования отдельных слов внутри абзаца.

Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.

Строчные элементы (inline)

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

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

Строчный элемент имеет ширину, которая равна ширине его содержимого. Строчные элементы не могут содержать внутри себя блочные элементы.

Примеры строчных элементов: , ,