Содержание

Блоки — Учебник HTML — schoolsw3.com

❮ Назад Далее ❯

Элементы блочного уровня

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

Элемент <div> является элементом блочного уровня.

Пример

<div>Привет мир</div>

Попробуйте сами »

Здесь представлены блочные элементы в HTML:

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

<div>

<dl>

<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h2>-<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

Встроенный элемент

Встроенный элемент не начинается с новой строки и занимает только столько ширины, сколько необходимо.

Это элемент <span> внутри параграфа.

Пример

<span>Привет мир</span>

Попробуйте сами »

Вот встроенные элементы в HTML:

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<output>

<q>

<samp>

<script>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

Примечание: Встроенный элемент не может содержать элемент блочного уровня!

Элемент

<div>

Элемент <div> часто используется в качестве контейнера для других HTML элементов.

Элемент

<div> не имеет обязательных атрибутов, но style, class и id являются общими.

При использовании вместе с CSS, элемент <div> можно использовать для стилизации блоков контента:

Пример

<div>
  <h3>Лондон</h3>
  <p> Лондон-столица Англии. Это самый густонаселенный город в Соединенном Королевстве, с метрополией более 13 миллионов жителей.</p>
</div>

Попробуйте сами »

Элемент

<span>

Элемент <span> — это встроенный контейнер, используемый для разметки части текста или части документа.

Элемент <span> не имеет обязательных атрибутов, но style, class и id являются общими.

При использовании вместе с CSS, элемент <span> элемент можно использовать для стилизации частей текста:

Пример

<p>У моей матери есть <span>blue</span> уши и у моего отца есть <span>dark green</span> глаза. </p>

Попробуйте сами »

Краткое содержание главы

  • Существует два значения отображения: блочный и встроенный
  • Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину
  • Встроенный элемент не начинается с новой строки и занимает только столько ширины, сколько необходимо
  • Элемент <div> является блочным уровнем и часто используется в качестве контейнера для других HTML элементов
  • Элемент <span> — это встроенный контейнер, используемый для разметки части текста или части документа

HTML Теги

Тег Описание
<div> Определяет раздел в документе (блока)
<span> Определяет раздел в документе (встроенный)

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.


❮ Назад Далее ❯


ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Блочные элементы — HTML | MDN

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

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

HTML

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

CSS

p { background-color: #8ABB55; }
  • Блочные элементы могут отображаться только внутри элемента <body> и его потомков.

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

Содержание

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

Форматирование по умолчанию

По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.

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

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

<address>

Контактная информация.

<article> HTML5

Содержание статьи.

<aside> HTML5

Побочное содержание.

<blockquote>

Длинная («блочная») цитата.

<details> HTML5

Раскрывающийся блок с подробностями.

<dialog> HTML5

Диалоговое окно.

<dd>

Описание определения.

<div>

Фрагмент документа.

<dl>

Список определений.

<dt>

Термин в списке определений.

<fieldset>

Группирование элементов формы.

<figcaption> HTML5

Описание для тега <figure>.

<figure> HTML5

Группирование медиа-контента с подписью (см. <figcaption>).

Нижняя часть («подвал») раздела или страницы.

<form>

Форма ввода.

<h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US)

Заголовки от первого до шестого уровня.

Верхняя часть («шапка») раздела или страницы.

<hgroup> HTML5

Группирование заголовков раздела или страницы.

<hr>

Горизонтальная разделительная линия.

<li>

Пункт списка.

<main> HTML5

Содержит основной контент, уникальный для страницы.

<nav> HTML5

Содержит навигационные ссылки.

<ol>

Упорядоченный список.

<p>

Текстовый абзац.

<pre>

Предварительно форматированный текст.

<section> HTML5

Раздел веб-страницы.

<table> (en-US)

Таблица.

<ul>

Неупорядоченный список.

Смотрите также

  • Строчные элементы

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Блок HTML и встроенные элементы

❮ Назад Далее ❯

Каждый элемент HTML имеет отображаемое значение по умолчанию, в зависимости от типа элемента это.

Есть два отображаемых значения: блочное и встроенное.

Элементы уровня блока

Элемент уровня блока всегда начинается с новой строки, и браузеры автоматически добавить некоторое пространство (поле) до и после элемента.

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

Два часто используемых блочных элемента:

и <дел> .

Элемент

определяет абзац в HTML-документ.

Элемент

определяет раздел или раздел в документе HTML.

Элемент

является элементом уровня блока.

Элемент

является элементом блочного уровня.

Пример

Hello World


Hello World

Попробуйте сами »

Вот элементы блочного уровня в HTML: