HTML состоит из различных элементов, которые служат строительными блоками веб-страниц. Каждый из этих элементов относится к одной из двух категорий: элементы уровня блока или встроенный элемент. Понимание разницы между этими двумя типами элементов является важным шагом в создании веб-страниц.
Элементы уровня блока
Так что же такое элемент уровня блока? Элемент уровня блока — это элемент HTML, который начинает новую строку на веб-странице и расширяет всю ширину доступного горизонтального пространства его родительского элемента. Он создает большие блоки контента, такие как абзацы или разделы страниц. Фактически, большинство элементов HTML являются элементами уровня блока.
Элементы уровня блока используются в теле документа HTML. Они могут содержать встроенные элементы, а также другие элементы уровня блока.
Встроенные элементы
В отличие от элемента уровня блока, встроенный элемент:
- Это может начаться в строке.
- Не начинается новая строка.
- Его ширина распространяется только до тех пор, пока он определяется его тегами.
Примером встроенного элемента является <strong>, который создает шрифт текстового содержимого, выделенного жирным шрифтом. Встроенный элемент обычно содержит только другие встроенные элементы или вообще не может содержать ничего, например тег <br /> break.
Существует также третий тип элементов в HTML: те, которые вообще не отображаются. Эти элементы предоставляют информацию о странице, но не отображаются при визуализации в веб-браузере.
Например:
- <style> определяет стили и таблицы стилей.
- <meta> определяет метаданные.
- <head> — это элемент документа HTML, который содержит эти элементы.
Переключение линейных и блочных элементов
Вы можете изменить тип элемента со встроенного на блочный или наоборот, используя одно из следующих свойств CSS:
-
дисплей: блок;
-
отображения: встроенный;
-
не отображать: нет;
Свойство отображения CSS позволяет изменить встроенное свойство на блок или блок на встроенное или вообще не отображать .
Когда менять свойство отображения
В общем, оставьте свойство display в покое, но в некоторых случаях может быть полезна замена свойств inline и block display.
- Горизонтальные списки меню: списки являются элементами уровня блока, но если вы хотите, чтобы ваше меню отображалось горизонтально, вам необходимо преобразовать список во встроенный элемент, чтобы каждый элемент меню не начинался с новой строки.
- Заголовки в тексте: иногда вы можете захотеть, чтобы заголовок оставался в тексте, но сохранял значения заголовков HTML. Изменение значений от h1 до h6 на inline позволит тексту, который идет после закрывающего тега, продолжать течь рядом с ним в той же строке, а не начинаться с новой строки.
- Удаление элемента: если вы хотите полностью удалить элемент из обычного потока документа , вы можете установить отображение на
никто
Одно примечание, будьте осторожны при использовании дисплея: нет. Хотя этот стиль действительно сделает элемент невидимым, вы никогда не захотите использовать его, чтобы скрыть текст, который вы добавили по причинам SEO, но не хотите отображать для посетителей. Это верный способ оштрафовать ваш сайт за черный подход к SEO.
Типичные ошибки форматирования встроенного элемента
Одна из самых распространенных ошибок новичка в веб-дизайне — попытка установить ширину встроенного элемента. Это не работает, потому что ширина встроенных элементов не определяется контейнером.
Встроенные элементы игнорируют несколько свойств:
-
ширина
и
высота
-
Максимальная ширина
и
максимальная высота
-
мин-ширина
и
мин-высота
Microsoft Internet Explorer (замененный Microsoft Edge) в прошлом неправильно применял некоторые из этих свойств даже для встроенных блоков. Это не соответствует стандартам. Это может не относиться к новым версиям веб-браузера Microsoft.
Если вам нужно определить ширину или высоту, которую должен занимать элемент, вам нужно применить его к элементу блочного уровня, содержащему ваш встроенный текст.