Элементы div и span

03.06.2022

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

Lesson Content

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

Разделы веб-страницы

Participants 286

Элементы div и span

03.06.2022