Изучим теги <div> и <span> в HTML5. Эти теги, хотя и кажутся на первый взгляд не особо важными без применения CSS, являются фундаментальными для структурирования веб-страниц и работы со стилями.
Тег <div>
<div> — это блочный контейнер. Без стилей его можно сравнить с абзацем, но с небольшим отступом между копиями. Если разместить несколько элементов <div> подряд, они будут располагаться каждый на новой строке. Он представляет собой блок, который отлично подходит для работы со стилями. При использовании CSS с ним можно создавать сложные и эффективные макеты. В отличие от <p>, <div> — это универсальный контейнер, не имеющий предопределенного семантического значения.
Тег <span>
<span> — это строчный контейнер. В отличие от <div>, он не создает новую строку. Несколько элементов <span>, размещенных последовательно, будут отображаться на одной строке. Без стилей <span> практически невидим, его применение оправдано только в сочетании с CSS, для стилизации отдельных частей текста.
Пример использования <div> и <span> со стилями
Рассмотрим пример, демонстрирующий возможности этих тегов в сочетании со стилями:
<div style="background-color: lightblue;">
<span style="font-style: italic; color: red;">Этот текст</span>
является примером использования <span style="color: green;">span</span>.
</div>
<div style="background-color: lightgray; margin: 200px;">
Этот блок отступов больше
</div>В этом примере:
- <div> задает фон светло-голубого цвета.
- <span> применяется для стилизации фрагментов текста: курсив и красный цвет одному фрагменту, зеленый цвет — другому.
- Второй <div> демонстрирует возможность задания отступов (margin) вокруг блока.
Вывод
Теги <div> и <span> сами по себе не влияют на отображение страницы. Их истинное значение раскрывается при использовании CSS. <div> используется для создания блоков, <span> — для стилизации фрагментов текста внутри блоков. Без CSS применение этих тегов малоэффективно. Только в сочетании с CSS они предоставляют мощные инструменты для создания сложных и визуально привлекательных веб-страниц.