Блочные и строчные элементы
В HTML вам, в основном, будут попадаться два типа элементов HTML.
Блочные элементы, вроде:
- абзацы ;
- списки: неупорядоченные (с маркером)
-
или упорядоченные списки (с числами)
; - заголовки: от первого уровня до шестого уровня ;
- статьи ;
- разделы ;
- длинные цитаты .
Строчные элементы, вроде:
Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки.
Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.
Вы уже видели это замечательное видео на YouTube?
Открывающие и закрывающие теги
Все блочные элементы содержат открывающие и закрывающие теги.
Как результат, самозакрывающие элементы являются строчными, просто потому, что их синтаксис не позволяет им содержать любой другой элемент HTML.
| Содержит открывающие и закрывающие теги | Самозакрывающие | |
| Блочные элементы | Невозможно | |
| Строчные элементы |
Другие типы элементов HTML
Есть несколько исключений у блочных/строчных элементов. Вот те, с которыми вы чаще всего столкнётесь:
Строчные элементы
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Определяет жирное начертание шрифта.
Тег увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
, использование тега
не добавляет пустой отступ перед строкой.
Тег предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег
.
Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег , но действует с точностью до наоборот.
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
Тег предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H2O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на , но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
- Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.
HTML по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Блочные и строчные html теги
Блочные элементы представляют собой большие строительные блоки вашей веб-страницы. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом он занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Текст в блочных элементах по умолчанию выравнивается по левому краю.
Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.
Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы, вставлять блочные элементы внутрь строчных запрещено.
Строчные теги
| Тег | Краткое описание |
|---|---|
| Создает гиперссылку. | |
| Определяет текст как аббревиатуру. | |
| Определяет звуковое содержимое. | |
| Выделяет текст жирным шрифтом. | |
| Определяет направление отображения текста. | |
| Создает кнопку. | |
| Определяет область для рисования графики. | |
| Определяет заголовок для работы — преобразует текст в курсивный. | |
| Определяет кусок программного кода — преобразует текст в моноширинный. | |
| Определяет текст, который был удален из документа — отображается перечеркнутым текстом. | |
| Выделяет определения термина — преобразует шрифт в наклонный. | |
| Определяет выделенный текст — преобразует текст в курсивный. | |
| Преобразует текст в курсивный. | |
| Определяет встроенный frame. | |
| Определяет изображение. | |
| Создаeт поле для ввода данных. | |
| Определяет текст, который был добавлен в документ — отображает текст подчеркнутым. | |
| Определяет текст вводимый с клавиатуры — преобразует текст в моноширинный. | |
| Определяет важную часть текста. | |
| Определяет скалярное измерение в пределах известного диапазона. | |
| Определяет короткую цитату. | |
| Определяет, что показывать браузеру, который не поддерживает тег . | |
| Добавляет аннотацию сверху или снизу от символов, заключенных в элементе . | |
| Определяет текст, который больше не является правильным — отображает текст перечеркнутым. | |
| Определяет текст, который является результатом вывода компьютерной программы. | |
| Определяет текст маленького размера. | |
| Создает выпадающий список. | |
| Определяет строчный элемент документа. | |
| Определяет важный текст — преобразует шрифт в полужирный. | |
| Определяет текст в нижнем индексе. | |
| Определяет текст в верхнем индексе. | |
| Создает ячейку таблицы. | |
| Создает многострочное текстовое поле. | |
| Создает заголовочную ячейку в таблице. | |
| Определяет переменную — выделяет текст курсивом. | |
| Добавляет на страницу видео файл. |
Блочные теги
| Тег | Краткое описание |
|---|---|
| Определяет контактную информацию автора документа/статьи. | |
| Определяет текст как статью, новость и др. | |
| Определяет контент в стороне от содержимого страницы. | |
| Выделяет текст с другого источника, как блочную цитату. | |
| Cоздает описание элемента в списке определений. | |
| Определяет раздел документа. | |
| Создает список определений. | |
| Oпределяет термин в списке определений. | |
| Группирует элементы страницы. | |
| Нижняя часть документа. | |
| Определяет HTML форму. | |
| — | Определяют HTML заголовки. |
| Задает «шапку» сайта или раздела. | |
| Создает горизонтальную линию. | |
| Определяет элемент списка. | |
| Определяет группу ссылок для навигации. | |
| Создает нумерованный(упорядоченный) список. | |
| Определяет абзац. | |
| Оставляет содержимое в первоначальном виде. | |
| Определяет небольшую аннотацию (для типографии Восточной Азии). | |
| Определяет разделы документа. | |
| Создает таблицу. | |
| Создает строку в таблице. | |
| Определяет маркированный(неупорядоченный) список. |
Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
HTML: Блочные и строчные элементы
Он занимает всё пространство по ширине, поэтому каждый параграф начинается с новой строки.
Span является строчным элементом. Он занимает ширину, равную ширине своего контента, поэтому переноса строки нет
Задание
Добавьте два тега с текстом внутри. Посмотрите, как они будут расположены
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
- Строчные элементы часто используют для стилизации. Например, тег используют для оборачивания участка текста. Потом этот участок стилизуют с помощью CSS
- В большинстве случаев строчные элементы можно помещать внутрь блочных, а блочные нельзя помещать внутрь строчных. Исключение — ссылки. Внутрь ссылки можно помещать блочные элементы. Такое использование разрешили в стандарте HTML5
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе
- HTML разметка
- Теги
- Текст в HTML
- Вложенность тегов
- Атрибуты HTML
- Параграфы
- Начертание текста
- Заголовки
- Списки
- Вложенные списки
- Таблицы
- Объединение ячеек внутри строк и столбцов
- Специальные символы HTML
- Ссылки
- Форматированный текст
- Вставка компьютерного кода в HTML
- Изображения
- Аудио
- Видео
- Базовая структура
- Метатеги
- link
- Viewport
- Блочные и строчные элементы
- Формы в HTML
- Поле для ввода текста
- Чекбокс
- Радиокнопка
- Textarea
- Список
- Отправка формы
- Семантические элементы
- Шапка
- Меню
- Уникальный контент страницы
- Секция
- Самостоятельная секция
- Боковая панель
- Семантический WEB
- Микроразметка
- Ошибки в HTML-разметке