Элементы <div> и <span>

Элементы разделов, такие как <article>, <aside>, <nav>, <section>, применяются для смыслового деления содержимого. Браузеры визуально никак не показывают эти элементы и не меняют вид их содержимого. Тем не менее, на веб-странице часто требуется стилизовать какой-то блок, изменив цвет текста, добавив к нему рамку, фон и др. Какой элемент для этого использовать? Правильный ответ — <div>.

Элемент <div> придуман именно для оформительских целей — изначально он никак не меняет вид своего содержимого и не несёт какого-либо смысла, в отличие от <nav>, к примеру. <div> используется, когда требуется изменить стиль блока, но сам блок нельзя отнести к элементам раздела. В примере 1 показано применение <div> для стилизации блока.

Пример 1. Использование <div>

<!DOCTYPE html> <html> <head> <title>div</title> <meta charset="utf-8"> <style> div { background: #def0fc; padding: 10px; border-left: 3px solid #3498db; } </style> </head> <body> <div>Блочные элементы начинаются с новой строки.</div> </body> </html>

Результат данного примера показан на рис. 1. Для оформления задействованы стили, заданные через элемент <style> внутри <head>.

Стилизация блока

Рис. 1. Стилизация блока

<div> является блочным элементом — он занимает всю доступную ширину и начинается с новой строки. Для стилизации отдельных букв, слов или фраз применяется элемент <span>, который вставляется непосредственно в строку, как показано в примере 2.

Пример 2. Использование <span>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>span</title> <style> span { background: #C5E2BD; padding: 0 2px; border: 1px dotted maroon; } </style> </head> <body> <p>Лягте животом на пол. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперёд до полного сокращения <span>мышц живота</span>.</p> </body> </html>

Результат данного примера показан на рис. 2. Для оформления фразы она выделена с помощью элемента <span>, к которому применяется стиль через <style>.

Стилизация фразы