Абзацы em, strong, b и i
Размечайте текст с помощью семантического выделения и тегов жирного начертания
«Абзацы em, strong, b и i» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Элемент абзаца
Элемент <p> обозначает блок текста как абзац:
<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>Семантическое выделение: em
Элемент <em> обозначает текст со смысловым выделением — выделяет слово, меняющее смысл предложения:
<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->Семантическая важность: strong
Элемент <strong> обозначает текст как особо важный:
<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->em и i
<em> и <i> по умолчанию отображаются курсивом, но имеют разное значение:
<em>— семантическое смысловое выделение (используйте чаще всего)<i>— визуальный курсив: технические термины, названия, иностранные фразы
<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>strong и b
<strong> и <b> по умолчанию отображаются жирным шрифтом, но семантически различаются:
<strong>— семантическая важность (используйте чаще всего)<b>— привлекает внимание без указания на важность: ключевые слова, названия продуктов
<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>Вложение em и strong
Можно вкладывать элементы выделения друг в друга для получения комбинированного эффекта:
<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->Абзацы нельзя вкладывать друг в друга
Элемент <p> не может содержать другой <p>:
<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>
<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>Строчные и блочные элементы в абзацах
<p> — это блочный элемент, который может содержать только строчные элементы:
<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>
<!-- INVALID: block element inside p -->
<p>
<div>A div inside p is invalid</div>
</p>Доступность выделения
Почему семантическая разметка важна для вспомогательных технологий:
- В некоторых реализациях программы чтения с экрана произносят
<em>с изменённой интонацией <strong>может произноситься с дополнительным выделением- Жирное или курсивное начертание только средствами CSS (например,
font-style: italicу элемента span) не имеет семантического значения для программ чтения с экрана
Распространённые ошибки
Избегайте следующих распространённых ошибок разметки текста:
<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph
<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>
<!-- Bad: bold for visual style only -->
<b>Heading Text</b>
<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>Когда использовать каждый элемент
Краткое руководство по выбору:
- Фрагмент связного текста →
<p> - Выделить слово, меняющее смысл →
<em> - Обозначить критически важную информацию →
<strong> - Выделить название или технический термин курсивом →
<i> - Выделить ключевое слово без указания на важность →
<b>
Быстрая проверка
Какой элемент следует использовать, чтобы обозначить текст как критически важный?
Итоги: семантика текста
Кратко о разметке текста:
<p>— абзацы связного текста<em>— смысловое выделение, изменяющее смысл предложения<strong>— особая важность<i>— визуальный курсив (названия, термины)<b>— привлечение внимания без указания на важность- Никогда не используйте
<br><br>для создания интервалов между абзацами
Часто задаваемые вопросы
Урок «Абзацы em, strong, b и i» бесплатный?
Да — полный текст урока «Абзацы em, strong, b и i» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Абзацы em, strong, b и i»?
Размечайте текст с помощью семантического выделения и тегов жирного начертания Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Абзацы em, strong, b и i»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Заголовки h1–h6 и их иерархия
- Абзацы em, strong, b и i
- br, hr, blockquote и pre
- Элементы span и div