В этом видео я расскажу вам про элементы, группирующие своё содержимое.
Итак, элементы, группирующие своё содержимое, это элементы,
которые логически объединяют в некоторые группы своё содержимое.
Например, элемент <main> — он указывает на главное содержимое всей страницы.
На этом элементе мнение спецификаций W3C и WHATWG расходятся.
W3C считает, что элемент должен быть один на странице,
поскольку главное содержимое одно.
А компания WHATWG считает,
что этих элементов может быть сколь угодно много на странице.
Элемент <p> определяет параграф текста.
То есть он объединяет текст, находящийся внутри, в параграф.
Например, у нас есть некоторый текст, и его нужно разбить на параграфы.
Мы этот кусок текста можем заключить в элемент <p>.
У этого элемента есть одна особенность.
Если мы вложим внутрь одного параграфа другой параграф,
то предыдущий параграф закроется перед тем, как начнётся следующий.
И вот так это выглядит в браузере.
То есть по умолчанию добавляются отступы сверху и снизу у параграфов.
Элемент <hr> позволяет создавать горизонтальную линию для тематического
разделения параграфов.
Например, у нас есть большой кусок текста, и мы его заключаем в элемент <p>.
И когда у нас заканчивается тема, мы можем добавить элемент <hr> для того чтобы
указать, что здесь заканчивается тема, и дальше начинается новая.
В браузере это выглядит вот так.
То есть при добавлении элемента <hr> браузер нарисует горизонтальную линию.
Но не стоит использовать элемент <hr>, если он не несёт того смысла, для которого
он создан, вставлять для того, чтобы нарисовать просто горизонтальную линию.
Что будет, если мы в обычный элемент, например,
<p> добавим текст в вот такой красивой ASCII-графике, то есть
содержит много пробелов, переносов, и получился вот такой красивый текст.
Будет вот такая штуковина.
То есть все пробелы схлопнулись, все переносы схлопнулись,
и текст выстроился в одну линию.
Чтобы этого избежать, можно воспользоваться элементом <pre> —
preformatted text, и в этом случае браузер не будет «схлопывать» все переносы,
а отобразит его так, как вы его разметили при помощи переносов и пробелов.
Ну в браузере выглядит так, как ожидается.
Элемент <blockquote> предназначен для создания длинных цитат внутри документа.
Например, у нас есть цитата Джона Леннона, мы можем обернуть её в элемент
<blockquote> и при помощи атрибута cite указать источник, откуда мы её взяли.
Ну и в браузере это будет выглядеть как-то вот так.
В этом видео вы узнали о некоторых элементах, группирующих своё содержимое,
а в следующем видео я продолжу рассказывать про этот
тип элементов и расскажу, как создавать списки.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
