Html. Элементы span и div

Элементы <span> и <div> являются фундаментальными строительными блоками и по факту из себя ничего не представляют.

div

<div> является универсальным блочным тегом для всего чего угодно.

<div></div>

Назначение

<div> группирует и оборачивает другие элементы исключительно для стилизации.

Служит для:

• Построения структуры макета.
• Группировка элементов.
• Контейнер для других элементов.

Особенности

• Элемент <div> является универсальным, для оформления или просто так, его не видно на экране.
• Элемент по умолчанию растягивается на всю ширину родителя.
• Важно понимать, что <div> не несет никакого семантического смысла. Для seo лучше использовать другие подходящие элементы, которые мы рассматривали в статье
• Главное при верстке с <div> соблюдать структуру.
• Рекомендуется применять элемент, только в случае если другие элементы не подходят.
• Рекомендуется применять семантические теги вместо div.

Родительские/Дочерние элементы

Любой потоковый контент как в родительских, так и в дочерних элементах.

Атрибуты

Глобальные атрибуты и события.

Примеры

Вложенные div

Можно вкладывать элементы div друг в друга сколько угодно, чисто визуально они не будут отображаться.

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Разделы документа

<div>header</div>
<div>
  <div>main</div>
  <div>aside</div>
</div>
<div>footer</div>

Разметка

<div class="container">
  <div class="row">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

Поддержка браузерами

Поддерживают все современные браузеры

Стили по умолчанию

div {
  display: block;
}

span

Элемент <span> используется для стилизации определенных слов фраз внутри абзаца.

<span></span>

Назначение

<span> является строчным элементом, предназначенным работы с отдельными словами, частями слов, предложениями.

Предназначение:

• Стилизация.
• Добавление иконок.
• Выделение части слова.

Особенности

• В отличие от <div>, <span> не создает новую строку и занимает столько пространства сколько нужно для его отображения.
• <span> часто используется для использования внутри текстовых блоков, <p>,<h1> и других.
• <span> не предназначен для создания структуры страницы, не несет семантического значения, нужен исключительно для стилизации или добавления функциональности элементу.
• Лучше вместо <span> использовать семантические теги для этого. Которые мы рассмотрим позже.
• Может быть использован для выделения слова, создания всплывающей подсказки, изменения цвета, добавления иконки внутрь текста.
• <span> может быть полезен для применения к части текста стилей не нарушая структуру документа.
• При желании внутри <span> можно делать все что угодно.

Родительские/Дочерние элементы

В качестве родителя может быть любой потоковый и фразовый контент.

А в качестве потомков текст или фразовый элемент.

Атрибуты

Глобальные атрибуты и события

Примеры

Выделение части слова

<p>Это <span style="color: red;">важный</span> текст.</p>

Элементы в одну строку

Так как это строчный элемент, все элементы <span> будут располагаться в одну строку.

<span><span><span><span><span></span></span></span></span></span>

Поддержка браузерами

Поддерживают все современные браузеры.

Стили по умолчанию

Стилей по умолчанию не задано.