Разбираем, как HTML «говорит» с браузером — и почему это важно, даже если текст выглядит одинаково.
🧱 Представь, что веб-страница — это театр
HTML — это не просто «кто что написал», а режиссёрский сценарий.
Каждый тег — это указание актёру (браузеру): «Как это прочитать?», «На чём сделать акцент?», «Кто здесь главный?».
А теперь — к звёздам спектакля: <b>, <strong>, <i>, <em>.
🔤 <b> и <strong>: оба делают текст жирным, но…
💡 <b> — это как надпись на упаковке:
«СРОК ГОДНОСТИ: 12.12.2025» — написано жирно, чтобы ты сразу заметил.
Но внутри — просто текст. Никакого смысла, кроме «смотри сюда».
🔹 <b> = визуальный акцент без смысла.
Ты хочешь, чтобы слово выделялось глазом — и всё. Как жирная линия в тетрадке под заголовком.
💡 <strong> — это как предупреждение диктора по громкой связи:
«ВНИМАНИЕ! Поезд прибывает на 1-й путь!» — голос не просто громче, он важнее.
Это не украшение — это сигнал: «Это критично!»
🔹 <strong> = семантическая важность.
Браузер (и программы для слепых!) поймут: «Здесь не просто жирный текст — здесь смысловой акцент».
✏️ <i> и <em>: оба делают текст курсивом, но…
💡 <i> — это как иностранные слова в книжке:
«Она сказала „c’est la vie“ и улыбнулась» — курсив, потому что это не наше, необычное, отделённое.
Но эмоции? Нет. Просто «это другое».
🔹 <i> = стилевое отличие без эмоций.
Технические термины, названия кораблей («Титаник»), мысли героя — всё, что выделяется по форме, но не по силе.
💡 <em> — это как выделение голосом в разговоре:
— Ты сам это сделал?!
Здесь «сам» — не просто наклонная буква. Это удивление, акцент, эмоция.
Программа чтения с экрана даже повысит интонацию на этом слове!
🔹 <em> = семантический акцент.
Это не «наклон», это «слушай сюда — здесь чувства!».
🧠 Почему это важно? Три причины:
- Для людей с нарушениями зрения
Экранные читалки не видят жирный шрифт, но слышат <strong> как «важно!» и <em> как «акцент!».
→ Без <strong> и <em> — как если бы диктор читал всё одним тоном: даже «ПОЖАР!» — спокойно. - Для поисковиков (Яндекс, Google)
Они ищут смысл, а не картинки.
Слово в <strong> — как крик: «Это ключевое! Запомни!»
В <b> — просто мимолётный взгляд: «Ну ок, заметил». - Для будущего проекта
Завтра ты захочешь поменять все важные слова на красные.
С <strong> — одно правило в CSS:
strong { color: red; }
С <b> — придётся лезть в каждый <b> и переписывать вручную.
→ <strong> и <em> — как ярлыки на коробках: «Важное», «Хрупкое», «Эмоциональное». Без них — хаос на складе.
✅ Правило на всю жизнь:
🔹 <b> = Bold — жирный (только вид)
🔹 <strong> = Strong — сильный (вес в смысле!)
🔹 <i> = Italic — итальянский наклон (стиль)
🔹 <em> = Emphasis — эмфаза (ударение!)
🎯 Проверь себя:
- «❗ Внимание! Двери закрываются» — каким тегом обернуть «Внимание»?
→ <strong> или <em>?
→ Правильно: <strong> — это важное предупреждение. - «Он написал в дневнике: «Сегодня я был счастлив…»» — как оформить эту фразу?
→ <i> — это внутренняя мысль, стилевое выделение, не крик души.
💡 Запомни:
HTML — не про как оно выглядит, а про что оно значит.
Стиль (<b>, <i>) — это костюм актёра.
Смысл (<strong>, <em>) — это его роль в пьесе.
А костюм потом можно сменить (через CSS), но роль — только переделывая сценарий.
👉 Ставь лайк, если теперь понял разницу — и сохрани, чтобы не потерять «язык разметки»!