Теги <div> и <span> зачем они нужны и почему они самые важные


Здравствуйте, уважаемые читатели сайта Uspei.com. Сегодня мы успеваем на финишную прямую по изучению базового курса HTML. Сегодня мы изучим теги DIV и SPAN, которые нам понадобятся при изучении курса CSS. Это логические теги и они никак сами по себе не проявляют себя, но (!), тем не менее, это одни из самых главных тегов в CSS. Давайте рассмотрим на примере.

Тег <div>

Если мы объединим какой-либо текст тегом <div>, то вы увидите, что ничего не изменится. В этом и есть вся сила данного тега, так как если задать, например, атрибуты данного блока, такие как ширина, высота, цвет, и любые другие, то текст примет форму данного тега, а также унаследует все его параметры.

<div>Мама мыла раму</div>

Вы будете приятно удивлены, когда узнаете, что для HTML справедливо правило 80/20, которое означает, что вам не придется изучать весь язык до последнего винтика. Но, в то же время, полученных из курса знаний вам с лихвой хватит для того, чтобы уверенно делать сайты. К стати для этого у меня есть целый раздел о том, как самому сделать сайт.

Я думаю, что вы понимаете всю силу этого тега...Вам придется использовать его чаще других. Если вы посмотрите исходный код ЛЮБОГО сайта, то вы увидите, что этого тег является практически основным. Данным тегом можно задать фоновое изображение, изменить размеры блока, а также много много других изменений элементов.

Теги div и span

Тег span

Вторым тегом является тег <span>. Он больше используется для внутренних работ. Если блок <div> носит глобальный характер и он изменяет ВСЕ, что в него включено, от отдельного блока до целой страницы, то <span> предназначен для работы в абзаце или строке текста.


<span>Мама мыла раму</span>

Но это больше относится к CSS, который мы будем проходить в будущем.

Смотрите также:  Параграфы и абзацы, заголовки и подзаголовки в HTML

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

Вам также понравится...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *