HTML5: <div> и <span> для начинающих

<div>: блочный элемент

Пример:

<div>Текст</div>
<div>Текст</div>

Текст внутри <div> ведет себя как внутри абзаца <p>, за исключением отсутствия отступов:

<p>Текст</p>
<p>Текст</p>

<div> создаёт блок, к которому можно применять стили CSS: ширину, высоту, цвет, скругленные углы и т. д. Это блочный элемент, занимающий 100% ширины, из-за чего последующий контент начинается с новой строки.

<span>: строчный элемент

В отличие от <div>, <span> — строчный элемент. Разница:

<div>Текст</div><span>Текст</span>

Текст внутри <span> отображается на той же строке. Он не занимает всю ширину.

Практическое применение <div> и <span> с CSS

Полная функциональность <div> и <span> раскрывается при использовании CSS. Например, внутри <div> можно обернуть текст <span> для стилизации фрагмента:

<div>
  Это <span>фрагмент</span> текста.
</div>

CSS позволяет применить стили только к тексту внутри <span>, не затрагивая остальной текст внутри <div>. <div> создаёт блоки, а <span> — выделяет фрагменты текста внутри этих блоков или других элементов.

Что будем искать? Например,программа