Строчные и блочные элементы html5

Дата публикации:

В статье познакомлю вас с блочной и строчной версткой веб страниц. Вы узнаете чем различается блочный элемент от строчного. И для чего служат служат элементы div и span. Все это необходимо для знания о позиционировании html элементов.

Краткое вступление

С самого начала развития веб сайтов, присутствовало минимальное количество тегов с помощью которых можно было оформить веб страницу, но уже в тот момент браузеры знали как располагать блочные и строчные элементы на веб странице. Например, изначально веб браузер знал что параграфы, заголовки, <div> и некоторые другие элементы являлись блочными.
А вот такие элементы как <a>, <i>, <span> и некоторые другие теги, строчными.

DIV и SPAN - эталоны блочных и строчных элементов

В чем же различия блочных элементов от строчных??
Все дело, в расположении этих элементов на экране. Например если в веб странице, добавить 2 строчных тега подряд, и разместить между ними текст, то они будут следовать друг за другом в одной строке.
Например:
Создадим 2 элемента span следующих друг за другом. <span>Привет</span><span>Мир</span>. Если открыть такую страницу в браузере то мы получим одну непрерывную фразу "Привет Мир".
А вот с блочными элементами, такими как <div> заголовки и параграфы. Картина будет выглядеть иначе.
Например:
Создаем 2 блочных элемента div опять же размещенных друг за другом. <div>Привет</div><div>Мир</div>. Смотрим как поведут себя эти элементы в браузере. И видим что каждое слово вписанное в теги размещено на новой строке:
"Привет"
"Мир"
Важно запомнить как позиционируются div и span на веб странице. Это и есть главное различие блочных элементов от строчных.

Важно знать

Если для вас важна валидность ваших веб страниц, то в правилах WC3 запрещено размещать Блочные элементы внутри строчных. <span>Строчный<h1>Заголовок</h1>Элемент</span>.
Спасибо за прочтение моей статьи.

Новый коментарий
Реклама