Элементы разделов, такие как <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>.
Рис. 2. Стилизация фразы