HTML-специальные символы:  , <, >, ©, & и др.

💡 Зачем нужны специальные символы в HTML?

Вёрстка — это не только теги и стили. Иногда нужно вставить символы, которые либо не видны на клавиатуре (например, ©), либо конфликтуют с синтаксисом HTML (например, <). Вот где на помощь приходят HTML-сущности (или мнемоники) — специальные коды, начинающиеся с & и заканчивающиеся ;.

👉 Пример проблемы:
Если написать в HTML <p>5 < 10</p>, браузер подумает, что < 10 — это тег (и сломает вёрстку). Решение — заменить < на <.

🔠 Основные спецсимволы: шпаргалка

1. Неразрывный пробел  

Пробел, который запрещает перенос строки. Например, между инициалами:

<p>Иван&nbsp;И.&nbsp;Петров</p>

📌 Где использовать:
- Между словами, которые должны быть в одной строке (даты, инициалы).
- Для отступов (хотя лучше использовать CSS).

2. Угловые скобки < и >

Эти символы — основа HTML-тегов, но если их написать "как есть", браузер попытается их интерпретировать.

<p>Код тега: &lt;div&gt;</p>

Выведет:
Код тега: <div>

3. Амперсанд &

Символ & используется для начала спецсимволов, поэтому его тоже надо экранировать:

<p>Компания &amp; партнёры</p>

Результат:
Компания & партнёры

4. Авторское право © и другие символы

• © → ©
• ® → ®
• ™ → ™

<footer>2024 &copy; Danila Bezhin</footer>

🌟 Другие полезные символы

🔧 Как запомнить коды?

1. По первым буквам:

   • lt = Less Than (<)
   • gt = Greater Than (>)

2. Для символов валют часто используется их название:

   • € = euro
   • £ = pound

3. Остальные — либо через ассоциации, либо гуглить 😉.

⚠️ Частые ошибки

1. Забывают ; в конце:

   • ❌ &amp → сломает страницу.
   • ✅ & → работает.

2. Используют   для визуальных отступов:

   • Лучше заменить на CSS-свойства: margin или padding.

3. Путают похожие символы:

   • — (—) — длинное тире.
   • – (–) — короткое тире.

🎯 Практика: реальный пример

Допустим, нужно сверстать футер сайта с копирайтом и контактами:

<footer>
  <p>Контакты: example&commat;mail.com</p>
  <p>2024 &copy; ООО &laquo;Рога и копыта&raquo;</p>
</footer>

📌 Что использовали:
- @ → символ @ (чтобы код был читаемым).
- « и » → «кавычки-ёлочки».

💻 Где искать все символы?

Полные списки есть на:
- Официальный справочник W3C

P.S. Данила Бежин подробно разбирает такие нюансы в своём YouTube-курсе по HTML.

Теперь вы знаете, как вставлять спецсимволы без магии! Попробуйте применить их в своём коде прямо сейчас. 🚀