HTML — это всё, что связано с применением значения к контенту.
В то время как большинство тегов HTML имеют значение (p создают абзац, h1 создают заголовок и т.д.), теги span и div вообще не имеют значения. Это может показаться примерно таким же полезным, как пенопластовый молоток, но на самом деле они довольно широко используются в сочетании с CSS.
Теги span и div используются для группировки фрагмента HTML и привязки к нему некоторой информации, чаще всего с атрибутами class и id для связывания элемента с селектором CSS класса или идентификатора.
Разница между span и div заключается в том, что span элемент является встроенным и обычно используется для небольшого фрагмента HTML внутри строки (например, внутри абзаца), тогда как элемент div (разделение) является блочной строкой (что в принципе эквивалентно наличию разрыва строки до и после него) и используется для группировки больших фрагментов кода.
<div id="scissors"> <p>Это <span class="paper">безумие</span></p> </div>
Тег div и особенно span, на самом деле не должны использоваться так часто. Всякий раз, когда есть разумная альтернатива, её следует использовать вместо них.
Например, если вы хотите подчеркнуть слово “безумие”, а класс “paper” добавляет курсив для визуального выделения, то для более насыщенного и значимого контента код может выглядеть следующим образом:
<div id="scissors"> <p>Это <em class="paper">безумие</em></p> </div>
Если вы ещё не имеете понятия о классах и идентификаторах, не волнуйтесь, все они объяснены в промежуточном руководстве по CSS. Всё, что вам нужно помнить, это то, что span и div являются “бессмысленными” тегами.
HTML5 вводит ряд тегов, используемых для группировки блоков кода вместе и одновременного добавления смысла. Впрочем, они не являются заменой div тега. Для получения дополнительной информации о article, header, footer и не только, смотрите статью о разделении.
Страницы в тему:
- Следующая страница: Текст: сокращения, цитаты и код
- Предыдущая страница: Урок по HTML для начинающих
- Разделение: разделение страниц с большим значением.
- Селекторы Span и ID (Продвинутый урок по CSS)
- HTML-тег: span
- HTML-тег: div