HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

Символы для кода

&amp; → & (амперсанд). Используется для представления символа «&», так как сам символ может интерпретироваться как начало мнемоники.

&lt; → < (меньше чем). Представляет символ «<», который не может быть напрямую вставлен в код, так как он начинает HTML-тег.

&gt; → > (больше чем). Представляет символ «>», который также имеет специальное значение в HTML.

&quot; → " (двойные кавычки). Используются для представления символа кавычек в атрибутах тегов.

&apos; → ' (одиночные кавычки). Подобно двойным кавычкам, используются в атрибутах тегов.

Типографские символы

&sect;

§

знак раздела

&para;

параграф

&middot;

·

средняя точка

&lsaquo;

левая угловая кавычка

&rsaquo;

права угловая кавычка

&ndash;

короткое тире

&mdash;

длинное тире

&hellip;

многоточие

Знаки валют

&#8381;

знак рубля

&euro;

символ евро

&dollar;

$

знак доллара

&cent;

¢

цент

&pound;

£

фунт стерлингов

&yen;

¥

японская йена

Торговые знаки и авторские права в HTML

&copy;

©

копирайт

&reg;

®

товарный знак

&trade;

торговая марка

Математические символы

&plus;

плюс

&minus;

минус

&times;

×

умножить

&divide;

÷

разделить

&plusmn;

±

плюс-минус

&deg;

°

знак градуса

&prime;

минуты

&Prime;

секунды

&infin;

бесконечность

&ne;

не равно

&le;

меньше или равно

&ge;

больше или равно

Греческий алфавит

&alpha;

α

альфа

&beta;

β

бета

&gamma;

γ

гамма


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

8 решений из HTML и CSS, которые пора забыть в 2025

8 решений из HTML и CSS, которые пора забыть в 2025

Раньше простые на первый взгляд задачи требовали довольно много возни. Центрировать блок? Нужно позиционирование и расчёты. Сделать сетку? Пропорции вручную и осторожное управление отступами. Обновить страницу автоматически? Либо писать скрипт, либо настраивать сервер. Работало, но всегда казалось, что можно проще.

И проще стало. Современные HTML и CSS позволяют решать привычные задачи буквально парой строк. Никаких лишних обёрток, сложных костылей и вечных проверок на совместимость. Всё честно, прозрачно и работает сразу — берёшь и используешь.

Читать дальше
HTML
  • 26 апреля 2025
10 идей для вайб-кодинга на пару свободных часов

10 идей для вайб-кодинга на пару свободных часов

Есть кодинг по задаче. А есть — по вайбу.

Вайб-кодинг — это когда вы садитесь за ноут не потому, что надо, а потому что хочется. Без целей, дедлайнов и фич-реквестов. Просто чтобы почувствовать, как работает браузер, как оживает DOM, как строчка за строчкой рождается нечто, чего не было.

Это может быть бесполезно с точки зрения результата, но не бессмысленно. Хороший вайб-проект — это миниатюрная лаборатория, где вы пробуете новые подходы, фреймворки, библиотеки. Или наоборот — возвращаетесь к HTML и CSS, чтобы снова почувствовать радость простоты.

Но. Иногда хочется, чтобы результат всё же приносил пользу. Пусть даже самую крошечную. Ниже — десять идей проектов, которые можно использовать каждый день. Все они — настоящие, живые, с возможностью доработать, передать другу или выложить в портфолио.

Каждая идея — с подробным первым поисковым запросом, чтобы сразу можно было начать. Погнали.

Читать дальше
HTML
  • 24 апреля 2025

HTML-коды популярных эмодзи

Эмодзи давно вышли за пределы мессенджеров и социальных сетей, став важной частью веб-дизайна и пользовательского интерфейса. Они помогают сделать ваш сайт живым, ярким и эмоциональным. Но как добавить эмодзи в HTML-код без потери качества? В этой статье мы собрали для вас список из 50 самых популярных эмодзи с их названиями, значениями и HTML-кодами для вставки.

Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!

ЭмодзиНазваниеHTML-код
😀Улыбающееся лицо&#128512;
😂Лицо со слезами радости&#128514;
😍Лицо с глазами в форме сердца&#128525;
😎Лицо в солнцезащитных очках&#128526;
😭Плачущий&#128557;
😊Смущённая улыбка&#128522;
😢Грустное лицо&#128546;
😅Лицо с каплей пота&#128517;
🤔Задумчивое лицо&#129300;
👍Большой палец вверх&#128077;
👎Большой палец вниз&#128078;
👏Аплодисменты&#128079;
🙏Сложенные руки&#128591;
Красное сердце&#10084;
💔Разбитое сердце&#128148;
🔥Огонь&#128293;
💯Сто баллов&#128175;
🎉Конфетти&#127881;
🎂Торт&#127874;
🌟Звезда&#127775;
Сияние&#10024;
🌈Радуга&#127752;
Солнце&#9728;
Облако&#9729;
🌧Дождь&#127783;
Снег&#10052;
🌍Земной шар&#127757;
💡Лампочка&#128161;
💤Сон&#128164;
🎵Нота&#127925;
🎶Музыка&#127926;
📱Телефон&#128241;
💻Ноутбук&#128187;
🚗Машина&#128663;
🚀Ракета&#128640;
Самолёт&#9992;
🚲Велосипед&#128690;
🐶Собака&#128054;
🐱Кошка&#128049;
🐭Мышь&#128045;
🦊Лиса&#129418;
🐻Медведь&#128059;
🍎Яблоко&#127822;
🍕Пицца&#127829;
🍔Бургер&#127828;
🍩Пончик&#127849;
🍉Арбуз&#127817;
HTML
  • 15 ноября 2024
Что писать в атрибуте alt

Что писать в атрибуте alt

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

Читать дальше
HTML
  • 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

<img src="picture.jpg" loading="lazy">

<iframe src="supplementary.html" loading="lazy"></iframe>

Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.

Читать дальше
HTML
  • 22 ноября 2023
Знакомство с HTML

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

Читать дальше
HTML
  • 1 ноября 2023
Зачем нужен метатег viewport

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

Читать дальше
HTML
  • 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>
Читать дальше
HTML
  • 14 сентября 2023