- •22. Базовые контейнеры — элементы div и span
- •Введение
- •Семантически нейтральный
- •Строковые или блочные
- •Объединение контента в группу
- •Дополнительная информация
- •Зацепки для JavaScript, а также для css
- •Div-itis
- •Неприемлемая семантика
- •Базовые "параграфы"
- •Презентационные элементы
- •Заключение
- •Контрольные вопросы
- •Об авторе
22. Базовые контейнеры — элементы div и span
Дается объяснение, как и когда применять в HTML элементы span и div, которые не используются для описания контента, но являются базовым механизмом, позволяющим создать специальную структуру или объединить в группы элементы, где не подходит в действительности никакой другой элемент HTML
Введение
В этой статье я собираюсь объяснить, как и когда использовать в HTML два элемента, которые не используются для описания контента. Элементы span и div фактически не соответствуют никакому значению контента, который они охватывают; вместо этого они являются базовым механизмом, который позволяет создать специальную структуру или объединить в группы элементы, где не подходит в действительности никакой другой элемент HTML, и затем оформить это некоторым стилем с помощью CSS или выполнить манипуляции с помощью JavaScript. Хотя элементы div не добавляют никакого семантического значения, они могут рассматриваться, как представляющие структурное разбиение разметки, вместе с соответствующим семантическим классом или именем ID.
Они являются "тегом последней надежды" и должны использоваться только там, где не подходит никакой другой элемент HTML, так как они не имеют значения для вспомогательных технологий, поисковых систем, и т.д.
Статья имеет следующую структуру:
Семантически нейтральный
Строковые или блочные
Объединение контента в группу
Дополнительная информация
Зацепки для JavaScript, а также для CSS
div-itis
Неприемлемая семантика
Базовые параграфы
Презентационные элементы
Заключение
Контрольные упражнения
Семантически нейтральный
Большинство элементов в HTML существует для описания контента, такого как изображения, списки, заголовки, или помогают в настройке документа - head, body, link, meta, и т.д. Однако имеется два элемента, которые не имеют заданного значения. Из спецификации HTML:
Элементы div и span совместно с атрибутами id и class предлагают базовый механизм для добавления в документы структуры.
Эти два элемента можно считать некоторой несущей опорой HTML. Они предоставляют возможность сгруппировать контент, добавить дополнительную информацию вокруг контента и зацепки для добавления стилевого оформления и интерактивности. Они, однако, не добавляют документу никакого нового семантического значения.
Строковые или блочные
Как вы узнали раньше, блочные элементы являются элементами, которые помогают представить структуру документа. Элемент div, сокращение от division (деление), является базовым контейнером блочного уровня. Он обычно используется для создания оболочки вокруг других элементов блочного уровня, для объединения их в группу (смотрите в следующем разделе дополнительное пояснение этого вопроса). Его можно также использовать для объединения множества строковых элементов и/или текста, которые иначе логически не входят в другой элемент блочного уровня, но это должно использоваться в крайнем случае.
Элемент span является базовым контейнером строкового уровня. Он также помогает представить структуру документа, но он используется для объединения в группу или создать оболочку вокруг других строковых элементов и/или текста, а не элементы блочного уровня.
Различие между двумя различными типами может показаться сначала достаточно произвольным. Различие, о котором необходимо помнить, состоит в типе контента, и как он будет представлен при записи без какого-либо стилевого оформления. Элемент div помещается вокруг группы элементов блочного уровня - например, создать оболочку вокруг заголовка и списка ссылок, чтобы создать навигационное меню. Элемент span создает оболочку вокруг группы строковых элементов или (чаще всего) обычного текста. Ключевым словом является "группа": если div охватывает только один элемент блочного уровня, или span только один строковый элемент, то такое использование будет излишне. Например, посмотрите, как используются элементы div и span в следующем примере разметки:
<body>
<div id="mainContent">
<h1>Заголовок страницы </h1>
<p>Это первый параграф контента примера страницы.</p>
<img src="example.gif" alt="Это изображение только пример, ничего специального">
<p>Это второй параграф контента прим ера страницы. Он очень похож на первый,
но здесь имеется <span id="specialAlert"> специальный сигнал, который
мы хотим выделить цветом и увеличить размер текста с помощью CSS</span>.
На самом деле это не стандартное выделение - это по большей части просто стилевое оформление,
поэтому <em> и <strong> в действительности неприменимы.</p>
</div>
</body>
Теперь можно было бы выделить контент внутри div и span с помощью их атрибутов id, и применить к ним специальное стилевое оформление и позиционирование с помощью CSS.