Элементы span и div
Используйте универсальные строчные и блочные контейнеры как точки привязки для стилизации
«Элементы span и div» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Универсальные контейнеры
В HTML есть два универсальных, семантически нейтральных элемента-контейнера:
<div>— блочный контейнер<span>— строчный контейнер
Сами по себе они не несут смысла — они существуют исключительно как точки подключения стилей и сценариев.
Элемент div
<div> — это блочный контейнер, который создаёт новую строку до и после себя:
<div class="card">
<h2>Card Title</h2>
<p>Card content here.</p>
</div>
<div class="sidebar">
<p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->Элемент span
<span> — это строчный контейнер, который располагается внутри текста:
<p>The price is <span class="price">$29.99</span> per month.</p>
<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>
<!-- span targets a part of text for styling or scripting
without adding block-level line breaks -->Когда использовать div вместо семантических элементов
Прежде чем использовать <div>, проверьте, подходит ли семантический элемент:
- Верхняя часть страницы →
<header> - Навигация →
<nav> - Основное содержимое →
<main> - Публикация в блоге →
<article> - Боковая панель →
<aside> - Нижняя часть страницы →
<footer>
Используйте <div> только тогда, когда семантический элемент не подходит.
Дивитис
Дивитис — чрезмерное использование <div> для всего подряд:
<!-- Divitis: meaningless nesting -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">Home</a></div>
</div>
</div>
<!-- Better: semantic HTML -->
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>Точки подключения CSS с class и id
И <div>, и <span> используются с атрибутами class или id для выбора элементов в CSS:
<div class="hero-section">
<h1>Welcome</h1>
<p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>
<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->Выбор элементов в JavaScript
<div> и <span> также могут быть целями JavaScript:
<span id="counter">0</span>
<script>
const counter = document.getElementById('counter');
let count = 0;
setInterval(() => {
count++;
counter.textContent = count;
}, 1000);
</script>Правила вложения
Правила вложения универсальных контейнеров:
<div>может содержать<div>и<span><span>может содержать только<span>и строчное содержимое- Не помещайте
<div>внутрь<span>
<span>
Inline text
<span>Nested span OK</span>
<!-- <div> inside span: INVALID -->
</span>div для компоновки
Распространённый шаблон компоновки с использованием div:
<div class="layout">
<div class="sidebar"><!-- sidebar --></div>
<div class="content"><!-- main content --></div>
</div>
<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->span для строчного оформления
Распространённые шаблоны строчного оформления:
<p>Status: <span class="badge badge-success">Active</span></p>
<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
<span style="color: green; font-weight: bold;">$30</span></p>div и span невидимы
По умолчанию <div> и <span> являются невидимыми оболочками:
<div>не добавляет никакого визуального оформления, кроме блочного отображения<span>вообще не добавляет оформления- Весь внешний вид задаётся применёнными вами стилями CSS
- Это делает их идеальными нейтральными контейнерами
Быстрая проверка
Какой элемент следует использовать, чтобы оформить отдельное слово внутри абзаца?
Итоги: span и div
Основы универсальных контейнеров:
<div>— блочный элемент, группирующий элементы для компоновки<span>— строчный элемент для выбора фрагментов текста при оформлении- Оба элемента семантически нейтральны — они не добавляют смысла
- По возможности отдавайте предпочтение семантическим элементам HTML5
- Используйте
classиid, чтобы связать их с CSS и JavaScript
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Элементы span и div» бесплатный?
Да — полный текст урока «Элементы span и div» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Элементы span и div»?
Используйте универсальные строчные и блочные контейнеры как точки привязки для стилизации Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Элементы span и div»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.