Как вставить эмодзи в HTML?

2 min


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



Понимание Emoji

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

  • Консорциум Unicode, некоммерческая организация, определяет спецификацию для каждого символа эмодзи и поддерживает техническую документацию.
  • Чтобы использовать эмодзи, вы должны убедиться, что в документе HTML используется формат набора символов UTF-8.
  • Доступно более 1300 официальных смайлов в соответствии с Unicode, а также бесчисленное количество нестандартных смайлов от различных других разработчиков. Вы можете вставлять формальные смайлы Unicode в HTML-документы без каких-либо дополнительных программных инструментов.
  • Смайлы – это текстовые символы, например буквенно-цифровые символы. На мобильных клавиатурах iOS и Android вы можете переключать раскладку клавиатуры для вставки эмодзи. Однако на настольных клавиатурах нет специальных клавиш для каждого символа эмодзи.

Не имея клавиш на клавиатуре, давайте посмотрим, как вы можете вставить эмодзи в HTML.

Кодовая точка Юникода

Цель консорциума Unicode – сделать эмодзи стандартными символами, используемыми на всех устройствах и на всех языках. Чтобы выполнить эту задачу, они назначат уникальный код для каждого символа эмодзи с представлением по умолчанию. Разработчики приложений и операционных систем могут использовать этот код для использования представления по умолчанию или настройки внешнего вида. Например, U + 1F609 – это код для популярного эмодзи Winking Face. Вы можете получить кодовые точки из официальная страница смайликов Unicode.

Эмодзи Codepoint Шестнадцатеричный Десятичный
Подмигивающее лицо U + 1F609 1F609 128521

Как видите, кодовая точка – это не что иное, как шестнадцатеричный код в формате «U + шестнадцатеричный».

Вставить эмодзи в HTML

Вы можете использовать этот шестнадцатеричный код в HTML или преобразовать этот шестнадцатеричный код в десятичный формат и использовать. Эти коды обычно называются escape-объектами HTML или escape-строками. Давайте посмотрим, как правильно использовать эти коды на веб-странице HTML.

Определение UTF в HTML

Как уже упоминалось, первый и важный шаг – убедиться, что в вашем HTML-документе есть метатег charset, как показано ниже:

<meta charset="UTF-8">

Полный HTML-шаблон должен выглядеть примерно так:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Webpage with Emoji</title>
</head>
<body>
...Your Content Goes Here...
</body>
</html> 

Обязательно используйте объявление кодировки символов сразу после тега заголовка. Это даст указание браузерам интерпретировать шестнадцатеричные и десятичные escape-строки как правильные символы эмодзи.

HTML-теги для использования с эмодзи

Поскольку смайлики являются текстовыми символами, вы можете использовать любые связанные с текстом HTML-теги для вставки смайлов. Теги абзаца и диапазона – это два простых варианта:

  • смайлики

  • смайлики

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

  • , для создания списка эмодзи. После определения набора символов и выбора тега, который вы хотите использовать, у вас есть несколько вариантов для вставки эмодзи на свою HTML-страницу.

    Использование шестнадцатеричного кода в HTML

    Давайте возьмем тот же пример смайлика Winking Face. Вы можете использовать следующий формат шестнадцатеричного кода в HTML для вставки эмодзи.

    <p>This is a Winking Face <span>&#x1F609</span> emoji symbol.</p>

    Для ввода шестнадцатеричного кода можно использовать заглавные или строчные буквы. Это даст результат, как показано ниже.

    Это символ эмодзи подмигивающего лица 😉.

    Десятичный код эмодзи в HTML

    Вместо шестнадцатеричного кода вы можете использовать десятичный код как escape-строку с указанным ниже форматом.

    <p>This is another Winking Face <span>&#128521</span> emoji symbol.</p>

    Результат будет тот же, что и выше. Единственное отличие состоит в том, что вы можете удалить «x» в синтаксисе при использовании десятичного кода.

    Прямая вставка эмодзи в HTML

    Хотя два вышеуказанных метода просты в использовании, они не будут работать во всех случаях. Проблема в том, что не все смайлы имеют единую кодовую точку. Есть много символов эмодзи, содержащих комбинацию кодовых точек. Например, код эмодзи ученого – U + 1F9D1 U + 200D U + 1F52C, который нельзя ввести с помощью вышеуказанных методов.

    Самый простой вариант – скопировать и вставить нужный смайлик между тегами HTML.

    <p>This is a scientist emoji <span>🧑‍🔬</span> symbol.</p>

    Теперь, когда вы можете задать вопрос, откуда вы можете скопировать все эти символы эмодзи:

    • Есть много веб-сайтов, предлагающих символ эмодзи для копирования и вставки. У нас также есть более 1000 символов эмодзи для копирования и вставки с возможностью поиска. Вы можете искать и находить свой любимый символ эмодзи, просто нажмите на него, чтобы скопировать в буфер обмена. После копирования вы можете вставить смайлик в свой HTML-код.
    • Если вы не хотите копировать и вставлять, попробуйте сочетания клавиш с альтернативным кодом для символа эмодзи. Например, Alt + 128521 создаст эмодзи Winking Face. Это будет полезно, если вы часто хотите использовать несколько эмодзи. Однако он будет работать только на компьютерах с Windows, и вам понадобится клавиатура с отдельной цифровой клавиатурой для ввода десятичного кода.
    • И Windows, и macOS предлагают панель эмодзи, которую можно использовать для вставки эмодзи в HTML. В Windows нажмите клавиши «Win +.» И нажмите «Command + Control + Пробел» в macOS. Появится всплывающее окно, в котором вы можете найти и вставить смайлы.
    Вставить смайлик ученого

    Редакторы HTML-документов

    Большинство людей используют текстовый редактор для подготовки HTML-документа. Все текстовые редакторы, такие как «Блокнот», «Блокнот ++», «TextEdit», «Скобки» и т. Д., Поддерживают вставку эмодзи, как описано выше. Хотя редакторы, такие как Блокнот, будут отображать смайлы в обычном черно-белом цвете, они будут отображаться сплошным цветом при отображении в браузере.

    Обязательно сохраните документ в формате UTF-8.

    Выберите формат UTF-8
    Выберите формат UTF-8

    Ниже приведен пример кода в редакторе TextEdit и его отображение в браузере Google Chrome.

    Emoji в TextEdit и Chrome
    Emoji в TextEdit и Chrome

    Если вы используете приложение для создания своей HTML-страницы, вы можете использовать метод прямой вставки или сочетание клавиш. Помните, что некоторые системы управления контентом, такие как WordPress, используют PHP вместо HTML. Подробнее о вставке эмодзи в WordPress вы можете узнать в отдельной статье.

    Отображение новых эмодзи

    Как уже упоминалось, внешний вид смайлов может отличаться в зависимости от кодировки символов, используемой этим приложением. Например, Microsoft Edge, Firefox и Chrome могут отображать одни и те же эмодзи в разных форматах. Помимо этого фактора, вы обнаружите, что некоторые символы эмодзи будут отображаться в виде квадратного поля или отображать несколько символов. Это происходит, когда браузер не поддерживает символ смайлика. Unicode выпускает новые смайлики каждый год, и браузерам нужно время, чтобы принять новые символы. До этого времени вместо смайликов вы увидите рамку.

    Например, смайлик «Сердце в огне» будет выглядеть как два символа ❤️‍🔥. Вы можете найти все новые символы эмодзи, отмеченные символом ⊛ на официальной странице Unicode. Это означает, что браузеры могут не поддерживать эти символы должным образом, и вам следует избегать их использования на своей HTML-странице.

    Вывод

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


  • 0 Comments

    Добавить комментарий