Элементы <div> и <span>
Элементы разделов, такие как <article>, <aside>, <nav>, <section>, применяются для смыслового деления содержимого. Браузеры визуально никак не показывают эти элементы и не меняют вид их содержимого. Тем не менее, на веб-странице часто требуется стилизовать какой-то блок, изменив цвет текста, добавив к нему рамку, фон и др. Какой элемент для этого использовать? Правильный ответ — <div>.
Элемент <div> придуман именно для оформительских целей — изначально он никак не меняет вид своего содержимого и не несёт какого-либо смысла, в отличие от <nav>, к примеру. <div> используется, когда требуется изменить стиль блока, но сам блок нельзя отнести к элементам раздела. В примере 1 показано применение <div> для стилизации блока.
Пример 1. Использование <div>
Результат данного примера показан на рис. 1. Для оформления задействованы стили, заданные через элемент <style> внутри <head>.
Рис. 1. Стилизация блока
<div> является блочным элементом — он занимает всю доступную ширину и начинается с новой строки. Для стилизации отдельных букв, слов или фраз применяется элемент <span>, который вставляется непосредственно в строку, как показано в примере 2.
Пример 2. Использование <span>
Результат данного примера показан на рис. 2. Для оформления фразы она выделена с помощью элемента <span>, к которому применяется стиль через <style>.
Рис. 2. Стилизация фразы