//

Спецсимволы HTML – знаки и спец символы, стрелки

Спецсимволы HTML – знаки и спец символы, стрелки

обновлено: 25.11.2019
Александр Коваленко, CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Телеграм: @profseoua
0
14.11.2019

1. Что такое спецсимволы HTML

Специальные символы в HTML, которые также известны, как символы с ссылками-мнемониками – это ничто иное, как конструкция SGML.

Standard Generalized Markup Language используется для определения языка разметки документа. Данный метаязык ссылается на определенные спецзнаки из символьного набора документа, которых нет в базовой клавиатуре компьютера. Эти же специальные символы в html позволяют выделять нужные строки цветом или ставить символы угловых скобок без угрозы для  корректности тегов.

Как таблица символов юникод может помочь при верстке в HTML?

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

2. Как вставить символ в html?

Специальные html символы тем не менее имеют главную особенность: чтобы они отображались, необходимо их прописывать строго, как указано в таблице, так как они чувствительны к регистру. Коды html символов позволяют разместить их в строке, а у большинства из них даже есть мнемоника, которая позволяет облегчить запоминание кода, предоставив упрощенную альтернативу. Чтобы обозначить все символы html внутри тегов на странице, сначала ставят амперсанд (&), далее указывают его HTML-код и заканчивают точкой с запятой (;).

Существует два способа вставить хтмл символы:

  1. перенести символ из окна браузера с помощью копирования в окно своего визуального редактора
  2. внести html коды символов прямо в код документа

Их же можно объяснить следующим образом:

  1. вставляем визуальный символ в визуальное его отображение
  2. работаем со вставкой кода html unicode.

Также ряд символов можно вставить с помощью комбинаций клавиш, например, знак евро html можно получить с помощью: Alt+0128; 20AC, Alt+X. В то же время html символ пробела имеет, как код, так и буквенную композицию:    

3. Как форматировать символ в html

После вставки символа, вне зависимости от того, каким образом его вставили в тег: используя коды символов html или просто скопировав знаки в html – его можно форматировать: менять цвет, размер, зачеркивать и так далее. Для этого используется специальный код, который вставляется в рамках тега с этим спецсимволом.

Например, если вы хотите поставить в тексте символ мелодии, просто воспользуйтесь кодом, соответствующим данному символу.

Чтобы теперь ему задать шрифт, размер и цвет в HTML используется код, например:

<spаn style=" font-family: arial; font-size: 10px; color: #ff0000;">КОД_СИМВОЛА</spаn>

где,
Arial – шрифт,
10px – размер шрифта в пикселях,
#ff0000 – код цвета шрифта (красный)

Стоит помнить, что наиболее подходящие шрифты для вставки спецсимволов – Arial, Verdana и Tahoma. Именно они наиболее корректно отображают html символы unicode, при этом взаимодействуя с большинством веб-приложений.

4. Пояснительная записка к таблице символов

  1. «Символ»
    (сам значок html, его визуальное отображение)
    Здесь можно скопировать символы для html, и вставить их в окно текстового html-редактора. Они будут отображаться размером в 20px. После вставки можно форматировать символы хтмл согласно требуемым параметрам.
  2. «Наименование»
    (указывается для важных спецсимволов или для тех, которые могут быть непонятны)
    Данный раздел поясняет, для чего могут использовать интернет символы: сферы их употребления и примеры.
  3. «Мнемоника»
    Мнемоника – это SGML конструкция, которая начинается с амперсанда &apos; и обозначает буквенный код символа в HTML. Ее вставляют в сам html-код документа. Такие буквенные коды пользуются популярностью среди профессиональных верстальщиков. Человеку их несложно запомнить, а также огромным преимуществом является то, что их поддерживают все html-приложения. Мнемоника состоит из буквенной композиции – имени своего символа, и служебного знака (&), благодаря которому браузером и читается код, не отображаясь при этом на экране монитора. Каждая композиция уникальна и легко читаема, так как образована от англоязычного слова-характеристики этого символа.
    Само слово «мнемоника» с греческого имеет значение «искусство запоминать что-либо». Мнемотехнику используют во многих сферах для того, чтобы облегчить восприятие сложной информации посредством ассоциирования с чем-либо.
  4. «Код»
    Код – числовой десятичный код, который отображает знаки в html и выглядит при этом, как &#38;. Его вставляют непосредственно в html-код документа. Такой код представляет собой число, обозначающее порядковый номер символа, который представляет таблица символов юникод, и несколько служебных знаков (& и #). Благодаря своей универсальности он получил широкое распространение среди верстальщиков. Пример такого кода для того, чтобы поставить символ html стрелка вправо: &rarr; &#8594; При этом некоторые стрелки html могут не отображаться, о чем обязательно указывается в таблице юникод.

5. Символы управления HTML (XHTML)

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

Безусловно символы управления используются также и в обычных текстах, где несут обычные типографские цели и не распознаются браузером как команды. Именно в таких случаях в HTML-текстах вводят не сам символ, а именно его HTML-код, чтобы не было ошибок работы браузера. То есть, введенная в код html точка не отобразится в браузере, а приведет к определенной команде. Тире html код также запрограммирует на команду, поэтому вместо него нужно использовать его код или мнемонику: &mdash;  &#8212.

СимволНаименованиеМнемоникаHTML-Код
одинарная кавычка&apos;&#39;
двойная кавычка&quot;&#34;
&амперсанд&amp;&#38;
<меньше&lt;&#60;
>больше&gt;&#62;

Метки, символы синтаксиса и пунктуации

СимволНаименованиеМнемоникаHTML-Код
неразрывный пробел&nbsp;&#160;
¡перевернутый восклицательный знак&iexcl;&#161;
¦разорванная вертикальная черта&brvbar;&#166;
§параграф&sect;&#167;
¨знак диерезиса&uml;&#168;
«левая двойная угловая кавычка&laquo;&#171;
¬знак отрицания&not;&#172;
­место возможного переноса&shy;&#173;
¯верхняя горизонтальная черта&macr;&#175;
´знак ударения&acute;&#180;
знак абзаца&para;&#182;
·точка посредине&middot;&#183;
¸седиль&cedil;&#184;
»правая двойная угловая кавычка&raquo;&#187;
¿перевернутый вопросительный знак&iquest;&#191;
bullet – маленький черный кружок&bull;&#8226;
многоточие&hellip;&#8230;
одиночный штрих – минуты и футы&prime;&#8242;
двойной штрих – секунды и дюймы&Prime;&#8243;
надчеркивание&oline;&#8254;
косая дробная черта&frasl;&#8260;
короткое тире&ndash;&#8211;
тире&mdash;&#8212;
левая одиночная кавычка&lsquo;&#8216;
правая одиночная кавычка&rsquo;&#8217;
нижняя одиночная кавычка&sbquo;&#8218;
левая двойная кавычка&ldquo;&#8220;
правая двойная кавычка&rdquo;&#8221;
нижняя двойная кавычка&bdquo;&#8222;
левая угловая одиночная кавычка&lsaquo;&#8249;
правая угловая одиночная кавычка&rsaquo;&#8250;

Буквы с метками

СимволНаименованиеМнемоникаHTML-Код
Àпрописная латинская А с обратным ударением&Agrave;&#192;
Áпрописная латинская А с ударением&Aacute;&#193;
Âпрописная латинская А с циркумфлексом&Acirc;&#194;
Ãпрописная латинская А с тильдой&Atilde;&#195;
Äпрописная латинская А с диерезисом&Auml;&#196;
Åпрописная латинская А с кружком&Aring;&#197;
Çпрописная латинская C с седилью&Ccedil;&#199;
Èпрописная латинская Е с обратным ударением&Egrave;&#200;
Éпрописная латинская E с ударением&Eacute;&#201;
Êпрописная латинская E с циркумфлексом&Ecirc;&#202;
Ëпрописная латинская E с диерезисом&Euml;&#203;
Ìпрописная латинская I с обратным ударением&Igrave;&#204;
Íпрописная латинская I с ударением&Iacute;&#205;
Îпрописная латинская I с циркумфлексом&Icirc;&#206;
Ïпрописная латинская I с диерезисом&Iuml;&#207;
Ñпрописная латинская N с тильдой&Ntilde;&#209;
Òпрописная латинская O с обратным ударением&Ograve;&#210;
Óпрописная латинская O с ударением&Oacute;&#211;
Ôпрописная латинская O с циркумфлексом&Ocirc;&#212;
Õпрописная латинская O с тильдой&Otilde;&#213;
Öпрописная латинская O с диерезисом&Ouml;&#214;
Øпрописная латинская O со слешем&Oslash;&#216;
Ùпрописная латинская U с обратным ударением&Ugrave;&#217;
Úпрописная латинская U с ударением&Uacute;&#218;
Ûпрописная латинская U с циркумфлексом&Ucirc;&#219;
Üпрописная латинская U с диерезисом&Uuml;&#220;
Ýпрописная латинская Y с ударением&Yacute;&#221;
àстрочная латинская a с обратным ударением&agrave;&#224;
áстрочная латинская а с ударением&aacute;&#225;
âстрочная латинская а с циркумфлексом&acirc;&#226;
ãстрочная латинская а с тильдой&atilde;&#227;
äстрочная латинская а с диерезисом&auml;&#228;
åстрочная латинская а с кружком&aring;&#229;
çстрочная латинская c с седилью&ccedil;&#231;
èстрочная латинская e с обратным ударением&egrave;&#232;
éстрочная латинская e с ударением&eacute;&#233;
êстрочная латинская e с циркумфлексом&ecirc;&#234;
ëстрочная латинская e с диерезисом&euml;&#235;
ìстрочная латинская i с обратным ударением&igrave;&#236;
íстрочная латинская i с ударением&iacute;&#237;
îстрочная латинская i с циркумфлексом&icirc;&#238;
ïстрочная латинская i с диерезисом&iuml;&#239;
ñстрочная латинская n с тильдой&ntilde;&#241;
òстрочная латинская o с обратным ударением&ograve;&#242;
óстрочная латинская o с ударением&oacute;&#243;
ôстрочная латинская o с циркумфлексом&ocirc;&#244;
õстрочная латинская o с тильдой&otilde;&#245;
öстрочная латинская o с диерезисом&ouml;&#246;
øстрочная латинская o со слешем&oslash;&#248;
ùстрочная латинская u с обратным ударением&ugrave;&#249;
úстрочная латинская u с ударением&uacute;&#250;
ûстрочная латинская u с циркумфлексом&ucirc;&#251;
üстрочная латинская u с диерезисом&uuml;&#252;
ýстрочная латинская Y с ударением&yacute;&#253;
ÿстрочная латинская y с диерезисом&yuml;&#255;
Šпрописная латинская s с галкой&Scaron;&#352;
šстрочная латинская s с галкой&scaron;&#353;
Ÿпрописная латинская Y с диерезисом&Yuml;&#376;

Геометрические фигуры

СимволНаименованиеМнемоникаHTML-Код
ромб&loz;&#9674;
круг&#9675;
закрашенный круг&#9679;
треугольник налево&#9668;
треугольник вниз&#9660;
треугольник направо&#9658;
треугольник вверх&#9650;
закрашенный квадрат&#9632;
закрашенный малый квадрат&#9642;
малый квадрат&#9643;
черные пикиspades&#9824;
черные трефыclubs&#9827;
черные червыhearts&#9829;
черные бубныdiams&#9830;
крестикdagger&#8224;

Греческие буквы

СимволНаименованиеМнемоникаHTML-Код
Αзаглавная буква альфа&Alpha;&#913;
Βзаглавная буква бета&Beta;&#914;
Γзаглавная буква гамма&Gamma;&#915;
Δзаглавная буква дельта&Delta;&#916;
Εзаглавная буква эпсилон&Epsilon;&#917;
Ζзаглавная буква дзета&Zeta;&#918;
Ηзаглавная буква эта&Eta;&#919;
Θзаглавная буква тета&Theta;&#920;
Ιзаглавная буква иота&Iota;&#921;
Κзаглавная буква каппа&Kappa;&#922;
Λзаглавная буква лямбда&Lambda;&#923;
Μзаглавная буква мю&Mu;&#924;
Νзаглавная буква ню&Nu;&#925;
Ξзаглавная буква кси&Xi;&#926;
Οзаглавная буква омикрон&Omicron;&#927;
Πзаглавная буква пи&Pi;&#928;
Ρзаглавная буква ро&Rho;&#929;
Σзаглавная буква сигма&Sigma;&#931;
Τзаглавная буква тау&Tau;&#932;
Υзаглавная буква ипсилон&Upsilon;&#933;
Φзаглавная буква фи&Phi;&#934;
Χзаглавная буква хи&Chi;&#935;
Ψзаглавная буква пси&Psi;&#936;
Ωзаглавная буква омега&Omega;&#937;
αстрочная буква альфа&alpha;&#945;
βстрочная буква бета&beta;&#946;
γстрочная буква гамма&gamma;&#947;
δстрочная буква дельта&delta;&#948;
εстрочная буква эпсилон&epsilon;&#949;
ζстрочная буква дзета&zeta;&#950;
ηстрочная буква эта&eta;&#951;
θстрочная буква тета&theta;&#952;
ιстрочная буква иота&iota;&#953;
κстрочная буква каппа&kappa;&#954;
λстрочная буква лямбда&lambda;&#955;
μстрочная буква мю&mu;&#956;
νстрочная буква ню&nu;&#957;
ξстрочная буква кси&xi;&#958;
οстрочная буква омикрон&omicron;&#959;
πстрочная буква пи&pi;&#960;
ρстрочная буква ро&rho;&#961;
ςстрочная буква сигма (final)&sigmaf;&#962;
σстрочная буква сигма&sigma;&#963;
τстрочная буква тау&tau;&#964;
υстрочная буква ипсилон&upsilon;&#965;
φстрочная буква фи&phi;&#966;
χстрочная буква хи&chi;&#967;
ψстрочная буква пси&psi;&#968;
ωстрочная буква омега&omega;&#969;
ϑстрочная буква тета&thetasym;&#977;
ϒсимвол эпсилон с крючком&upsih;&#978;
ϖсимвол пи&piv;&#982;

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

СимволНаименованиеМнемоникаHTML-Код
×знак умножения&times;&#215;
÷знак деления&divide;&#247;
дробная черта&frasl;&#8260;
знак минус&minus;&#8722;
<знак меньше&il;&#60;
>знак больше&gt;&#62;
меньше или равно&le;&#8804;
больше или равно&ge;&#8805;
приблизительно равно (асимптотически равно)&asymp;&#8776;
не равно&ne;&#8800;
тождественно, совпадает с&equiv;&#8801;
±плюс-минус&plusmn;&#177;
¼одна четвёртая&frac14;&#188;
½одна вторая&frac12;&#189;
¾три четверти&frac34;&#190;
¹единица в верхнем индексе&sup1;&#185;
²два в верхнем индексе (квадрат)&sup2;&#178;
³три в верхнем индексе (куб)&sup3;&#179;
квадратный корень (радикал)&radic;&#8730;
знак бесконечность&infin;&#8734;
знак суммирования&sum;&#8721;
произведение последовательности – знак произведения&prod;&#8719;
частичный дифференциал&part;&#8706;
интеграл&int;&#8747;
для всех&forall&#8704;
существует&exist&#8707;
пустое множество; диаметр **&empty&#8709;
набла = backward difference&nabla&#8711;
принадлежит&isin&#8712;
не принадлежит **&notin&#8713;
содержит&ni&#8715;
оператор ‘звездочка’ **&lowast&#8727;
пропорционально&prop&#8733;
угол&ang&#8736;
логическое И – wedge&and&#8743;
логическое ИЛИ – vee&or&#8744;
пересечение – cap&cap&#8745;
объединение – cup&cup&#8746;
следовательно&there4&#8756;
знак тильда – ‘изменяется с’ – знак подобия&sim&#8764;
approximately equal to **&cong&#8773;
является подмножеством&sub&#8834;
является надмножеством&sup&#8835;
не является подмножеством **&nsub&#8836;
является подмножеством либо равно&sube&#8838;
является надмножеством либо равно&supe&#8839;
плюс в кружке – direct sum&oplus&#8853;
знак умножения в кружке – vector product **&otimes&#8855;
ортогонально, перпендикулярно&perp&#8869;
оператор ‘точка’ **&sdot&#8901;
ƒзнак функции&fnof;&#402;

Модификации букв

ºмужское порядковое числительное&ordm;&#186;
ªженское порядковое числительное&ordf;&#170;
©знак авторских прав&copy;&#169;
®знак зарегистрированной торговой марки&reg;&#174;
µмикро&micro;&#181;
Æпрописная лигатура ае&AElig;&#198;
Ðпрописная латинская ETH&ETH;&#208;
Þпрописная латинская THORN&THORN;&#222;
ßстрочная лигатура sz&szlig;&#223;
æстрочная лигатура ае&aelig;&#230;
ðстрочная латинская eth&eth;&#240;
þстрочная латинская thron&thorn;&#254;
рукописная прописная латинская P&weierp;&#8472;
&image;&#8465;
&real;&#8476;
знак торговой марки&trade;&#8482;
символ алеф&alefsym;&#8501;
Œпрописная лигатура OE&OElig;&#338;
œстрочная лигатура oe&oelig;&#339;

Стрелочные символы

СимволНаименованиеМнемоникаHTML-Код
ВидОписаниеСимвольный кодЧисловой код
стрелка вверх&uarr;&#8593;
стрелка вправо&rarr;&#8594;
стрелка вниз&darr;&#8595;
стрелка влево&larr;&#8592;
стрелка влево-вправо&harr;&#8596;
стрелка вниз и влево — знак перевода строки&crarr;&#8629;
двойная стрелка вверх&uArr;&#8657;
двойная стрелка вправо&rArr;&#8658;
двойная стрелка вниз&dArr;&#8659;
двойная стрелка влево&lArr;&#8656;
двойная стрелка влево-вправо&hArr;&#8660;

Знаки валют

СимволНаименованиеHTML-Код
քРоссийский рубль (html знак)&x584;
$HTML знак Доллара&#36;
HTML знак Евро&euro;
¢Цент&cent;
£Британский Фунт стерлингов&pound;
¥Японская Йена&yen;
Китайский юань&#65509;
Украинская Гривна&#8372;
Французский Франк&#8355;
Польский Злотыйz&#x142;
Чешская КронаK&#x10D;
Бразильское Крузейро&#8354;
Турецкая Лира&#8378;
Нигерийская Наира&#8358;
Испанская Песета&#8359;
Индийская Рупия&#8360;
Корейский Вон&#8361;
Израильский Шекель&#8362;
Вьетнамский Донг&#8363;
฿Тайский Бат&#3647;
Лаосский Кип&#8365;
Камбоджийский Риель&#6107;
Монгольский Тугрик&#8366;
Казахстанский Тенге&#8376;
¤Знак валюты&curren;

Карты, шахматы, музыка

СимволНаименованиеHTML-Код
Пики черные&spades;
Пики белые&#9828;
Червы черные&hearts;
Червы белые&#9825;
Бубны черные&diams;
Бубны белые&#9826;
Трефы черный&clubs;
Трефы белые&#9831;
Король белый&#9812;
Ферзь белый&#9813;
Ладья белая&#9814;
Слон белый&#9815;
Конь белый&#9816;
Пешка белая&#9817;
Король черный&#9818;
Ферзь черный&#9819;
Ладья черная&#9820;
Слон черный&#9821;
Конь черный&#9822;
Пешка черная&#9823;
▄▀▄▀шахматное полеv&#x2584;&#x2580;&#x2584;&#x2580;
Одна четвертная нота&#9833;
Одна восьмая нота&#9834;
Связаные восьмые ноты&#9835;
Одна шестнадцатая нота&#9836;
Знак альтерации – Бемоль&#9837;
Знак альтерации – Бекар&#9838;
Знак альтерации – Диез&#9839;

Знаки зодиака

СимволНаименованиеHTML-Код
Овен&#9800;
Телец&#9801;
Близнецы&#9802;
Рак&#9803;
Лев&#9804;
Дева&#9805;
Весы&#9806;
Скарпион&#9807;
Стрелец&#9808;
Козерог&#9809;
Водолей&#9810;
Рыбы&#9811;
Змееносец&#9934;

Пиктограммы, планеты и прочее  в HTML (XHTML)

Нtml значки – это не только привычные нам символы, но также и пиктограммы – знаки, которые схематично передают нам самые важные черты объекта, делая его легко узнаваемым. Так, в теги возможно вставить не только знак копирайта html или стрелочки html, но и смайлики, и символы солнца или луны

 

СимволНаименованиеHTML-Код
Солнце&#9728;
Солнце за облаками&#9925;
Туча&#9729;
Зонтик&#9730;
Снеговик&#9731;
Снежинка 1&#10052;
Снежинка 2&#10053;
Снежинка 3&#10054;
Солнце&#9788;
Луна расткщая&#9789;
Луна убывающая&#9790;
Звезда 1&#9733;
Звезда 2&#9734;
Звезда 3&#10026;
Звезда 4&#10027;
Звезда 5&#10031;
Звезда 6&#9885;
Звезда восьмиконечная&#10037;
Первая четверть&#9789;
Последняя четверть&#9790;
🌑Новолуние&#127761;
🌔Первая четверть&#127764;
🌓Первая четверть&#127763;
🌕Полнолуние&#127765;
🌙Серп Луны&#127769;
🌛Первая четверть «с лицом»&#127771;
Солнце&#9737;
Меркурий&#9791;
Венера&#9792;
Земля&#9793;
Марс&#9794;
Юпитер&#9795;
Сатурн&#9796;
Уран&#9797;
Нептун&#9798;
Комета&#9732;
§параграф&sect;
°градус&deg;
многоточие&hellip;
©копирайт (знак охраны авторского права)&copy;
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Телеграм: @profseoua