Как использовать специальные символы в HTML

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

Роль специальных символов в HTML

Когда вы используете HTML и набираете текст, предназначенный для просмотра, вам обычно не нужны никакие специальные коды — вы просто используете клавиатуру компьютера, чтобы добавить соответствующие буквы или символы. Проблема возникает, когда вы хотите ввести символ в читаемый текст, который HTML использует как часть самого кода. Эти символы включают в себя < а также > символы, которые используются в коде для начала и завершения каждого тега HTML. Вы также можете включить в текст символы, которые не имеют прямого аналога на клавиатуре, например: © а также ЦТС. Для символов, на клавиатуре которых нет клавиши, вы вводите код.

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

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

  • знак меньше, чем <
  • знак больше чем >
  • амперсант

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

  • знак меньше, чем — <
  • знак больше чем — >
  • амперсанд — &

Каждый специальный символ начинается с амперсанда — даже специальный символ для амперсанда начинается с этого символа. Специальные символы заканчиваются точкой с запятой. Между этими двумя символами вы добавляете все, что подходит для специального символа, который вы хотите добавить. л (для меньше чем) создает символ меньше чем, когда он появляется между амперсандом и точкой с запятой в HTML. По аналогии, GT создает символ больше и ампер дает амперсанд, когда они расположены между амперсандом и точкой с запятой.

Специальные символы, которые вы не можете ввести

Любой символ, который можно отобразить в стандартном наборе символов Latin-1, можно отобразить в HTML. Если он не отображается на клавиатуре, вы используете символ амперсанда с уникальным кодом, назначенным символу, за которым следует точка с запятой.

Например, «дружественный код» для символа авторского права — ©, а ™ — код для символа товарного знака.

Этот дружественный код легко набрать и легко запомнить, но есть много символов, у которых нет дружественного кода, который легко запомнить.

Каждый символ, который может быть напечатан на экране, имеет соответствующий десятичный числовой код. Вы можете использовать этот числовой код для отображения любого символа. Например, десятичный числовой код для символа авторского права — © — демонстрирует как работают числовые коды. Они по-прежнему начинаются с амперсанда и заканчиваются точкой с запятой, но вместо понятного текста вы используете знак числа, за которым следует уникальный числовой код для этого символа.

Дружественные коды легко запомнить, но числовые коды часто более надежны. Сайты, созданные на основе баз данных и XML, могут не иметь всех определенных дружественных кодов, но они поддерживают числовые коды.

Лучший способ найти числовые коды для символов — это наборы символов, которые можно найти в Интернете. Когда вы найдете нужный вам символ, просто скопируйте и вставьте числовой код в ваш HTML.

Некоторые наборы символов включают в себя:

  • Коды валют
  • Математические коды
  • Коды пунктуации
  • Коды произношения
  • Коды диакритических знаков

Неанглоязычные символы

Специальные символы не ограничиваются английским языком. Специальные символы на неанглийских языках могут быть выражены в HTML, включая:

  • испанский
  • французкий язык
  • греческий
  • румынский

Так что же такое шестнадцатеричные коды?

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

Добавьте объявление Unicode в заголовок документа

Добавьте следующий метатег в любой части вашей веб-страницы, чтобы обеспечить правильное отображение специальных символов.

content = "text / html; charset = utf-8" />

подсказки

Независимо от того, какой метод вы используете, помните несколько лучших практик:

Всегда заканчивайте свою сущность точкой с запятой

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

Всегда начинай с амперсанда

Многие веб-редакторы позволяют вам не использовать «amp;» но когда вы отображаете один амперсанд в XHTML, это вызывает ошибку проверки.

Протестируйте свои страницы в максимально возможном количестве браузеров.

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

Ссылка на основную публикацию