Вступление:

Все спец символы HTML для создания красивого сниппета. Таблицы знаков: стрелки, валюта, карты и другие. Как вставить символ в HTML.

Содержание статьи:

1. Что такое спецсимволы HTML
2. Как вставить символ в html
3. Как форматировать символ в html
4. Пояснительная записка к таблице символов
5. Символы управления HTML (XHTML)
6. Метки, символы синтаксиса и пунктуации
7. Буквы с метками
8. Геометрические фигуры
9. Греческие буквы
10. Математические символы
11. Модификации букв
12. Стрелочные символы
13. Знаки валют
14. Карты, шахматы, музыка
15. Знаки зодиака
16. Пиктограммы, планеты и прочее  в HTML (XHTML)

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 конструкция, которая начинается с амперсанда ' и обозначает буквенный код символа в HTML. Ее вставляют в сам html-код документа. Такие буквенные коды пользуются популярностью среди профессиональных верстальщиков. Человеку их несложно запомнить, а также огромным преимуществом является то, что их поддерживают все html-приложения. Мнемоника состоит из буквенной композиции – имени своего символа, и служебного знака (&), благодаря которому браузером и читается код, не отображаясь при этом на экране монитора. Каждая композиция уникальна и легко читаема, так как образована от англоязычного слова-характеристики этого символа.
   Само слово «мнемоника» с греческого имеет значение «искусство запоминать что-либо». Мнемотехнику используют во многих сферах для того, чтобы облегчить восприятие сложной информации посредством ассоциирования с чем-либо.
4. «Код»
   Код – числовой десятичный код, который отображает знаки в html и выглядит при этом, как &. Его вставляют непосредственно в html-код документа. Такой код представляет собой число, обозначающее порядковый номер символа, который представляет таблица символов юникод, и несколько служебных знаков (& и #). Благодаря своей универсальности он получил широкое распространение среди верстальщиков. Пример такого кода для того, чтобы поставить символ html стрелка вправо: → → При этом некоторые стрелки html могут не отображаться, о чем обязательно указывается в таблице юникод.

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

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

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

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

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

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

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

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

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

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

Знаки валют

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

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

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

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