HTML5 | Таблица символов Юникод

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

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

Вставить символ в html-документ можно одним из способов:

1. скопировать изображение символа из окна браузера в окно своего визуального html-редактора
2. скопировать html-код символа непосредственно в код html-документа

Унимаем, что это два разных способа:

1. вставлять визуальное в визуальное
2. вставлять код в код.

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

Шрифт для символа, его размер и цвет в HTML можно задать кодом, вида:
<span style=" font-family: arial; font-size: 10px; color: #ff0000;">КОД_СИМВОЛА</span>
где,
Arial – шрифт,
10px - размер шрифта в пикселях,
#ff0000 - код цвета шрифта (красный)

Например:
☎ - размер шрифта символа 30px,
☎ - размер шрифта символа 30px, цвет - красный
☎ - размер шрифта символа 20px,
☎ - размер шрифта символа 10px.
Прим. Рекомендуемые шрифты для вставки спецсимволов – Arial, Verdana и Tahoma. Эти шрифты корректно отображают символы Юникод и сами, в свою очередь, корректно поддерживаются веб-приложениями.

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

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

Таблица символов Юникод в HTML (XHTML)

1. Символы управления HTML (XHTML)
2. Символы синтаксиса и пунктуации
3. Товарные знаки и валюта
4. Математические и физические символы
5. Стрелки и указатели
6. Пиктограммы в HTML (XHTML)
7. Карты, шахматы, музыка

Синтаксис и пунктуация

(вернуться к оглавлению)

	неразрывный пробел			 	 
	пробел длины N (обычный пробел)			 	 
	пробел длины M (длинныйпробел)			 	 
	узкий пробел			 	 
­	мягкий перенос (непечатный знак)			­	­
‑	дефис				– ‑
–	тире длины N (обычное тире)			–	–
—	тире длины M (длинное тире)			—	—
.	точка				.
,	запятая				,
…	многоточие			…	… …
:	двоеточие				:
;	точка с запятой				&#59;
!	знак восклицания				! ǃ
?	вопросительный знак				?
@	«собачка»				@
*	«звездочка»				*
#	«решетка»				#
‘	одиночная верхняя левая кавычка			‘	‘ ‘
’	одиночная верхняя правая кавычка			’	’ ’
‚	одиночная нижняя правая кавычка			‚	‚ ‚
“	двойная верхняя левая кавычка			“	“ “
”	двойная верхняя правая кавычка			”	” ”
„	двойная нижняя правая кавычка			&bdquo	„ „
«	двойная левая угловая кавычка (рус)			«	«
»	двойная правая угловая кавычка (рус)			»	»
́	знак ударения, пример: Вася́				́
'	апостроф, пример: Вас'я				'
´	акут, пример: Вас´я			´	´
¶	абзац (непечатный знак)			¶	¶
§	параграф			§	§
ˆ	акцент (перевёрнутая птичка)			ˆ	ˆ ˆ
˜	малая тильда			˜	˜ ˜
¦	вертикальный пунктир			¦	¦
(	круглая скобка влево				(
)	круглая скобка вправо				)
〈	угловая скобка влево			⟨	〈
〉	угловая скобка вправо			⟩	〉
‹	угловая скобка влево, вариант			‹	‹
›	угловая скобка вправо, вариант			›	›
[	квадратная скобка влево				[
]	квадратная скобка вправо				]
/	слэш (slash) - cимвол косой черты				/
\	обратный слэш (backslash)				\
⁄	косая дробная черта (знак деления)			⁄	⁄
ǀ	вертикальная черта				ǀ
ǁ	двойная вертикальная черта				ǁ
‾	надчеркивание, пример: Вася‾вася			‾	‾
¯	macron, пример: Вася¯вася			¯	¯

1. Символы управления HTML (XHTML)
2. Синтаксис и пунктуация
3. Товарные знаки и валюта
4. Математика и физика
5. Стрелки и указатели
6. Пиктограммы в HTML (XHTML)
7. Карты, шахматы, музыка

------------------------------------------------------------------------------------------------------------------

Пиктограммы – маленькие печатные знаки,
символически отображающие суть предмета,
на который они указывают

☺☻♥♦♣♠•◘○

1. Пиктограммы
2. Пиктограммы в Юникод
3. Пиктограммы Юникод в HTML
4. Таблица пиктограмм Юникод в HTML
5. Таблица символов Юникод в Word (Бонус)
6. Таблица популярных символов Юникод в HTML

Пиктограммы

Пиктограммы (от лат. pictus — нарисованный) – маленькие схематические картинки, значки-изображения, символизирующие что-либо или ассоциирующиеся с чем-либо. Самые известные примеры пиктограмм – смайлики и иконки в менюшках программ и сайтов. Пиктограммы очень удобно применять при оформлении текста. Главное условие для пиктограммы – это её «узнаваемость» т.е., пиктограмма должна отображать важнейшие черты объекта или предмета, явления или действия. Размер пиктограммы ничем не лимитирован, однако, общепринято, что каждая пиктограмма должна иметь вид равностороннего прямоугольника (квадрата) со стороной, равной 16px, 24px, 32px, 40px и 48px.

Пиктограммы в Юникод

Юникод – это таблица печатных и непечатных текстовых знаков, закодированных универсальным машинным кодом, понятным для всех компьютеров всех систем. Отсюда и название – Юникод (Уникод). Некоторые пиктограммы (значки, изображения) были закодированы в Юникод наравне с буквами и цифрами. А всё оттого, что создатели Юникода сочли немыслимым быстрый набор и печать текста без пиктограмм. Может, так оно и было-то, на момент создания Юникода. Да только теперь, пиктограммы в Юникод – вымирающее явление.

Будучи закодированными в эти таблицы с незапамятных времён, пиктограммы Юникод уходят от нас, примерно так-же, как ушли в земную историю пейджеры и тамагочи. Нет, они там остаются и их никто не выбрасывает из Юникода. Просто, появились и развились новые способы передачи графической информации в тексте, и кодированные унылые пиктограммы из Юникода – уже никому не нужны. Хотя, иногда ещё применяются.

Безусловно, в своё время, пиктограммы в Юникод были невероятным прорывом в текстовом Интернет-вещании, поскольку тогда скорость интернета оставляла желать лучшего, а малюсенькие картинки в тексте уже были нужны. С тех пор прошло много лет. Развитие Интернета и графических программ превратили пиктограммы в Юникод в антагонизм, рудиментальный (отмирающий) придаток для текстовых знаков. Ныне, можно найти и скачать (или создать самому) невероятно-огромное количество графических наборов пиктограмм на любую тематику и оформить их в любом стиле. Все эти наборы сделаны в графических программах типа фотошопа и нет никакого смысла кодировать пиктограммы в Юникод. Поэтому, эта статья уже не представляет практического интереса. Так, чистая теория, дань матушке истории и госпоже объективности. И, не более того.

Пиктограммы в HTML

Пиктограммы, закодированные в Юникод, пришли конечно-же и в HTML (язык разметки веб-документов). Из Юникода в HTML пиктограммы попали только потому, что HTML – это язык для набора онлайн-текстов. Язык, который обязан поддерживать и отображать все печатные и непечатные знаки, и прежде всего – Юникод. А как-же иначе?

Как и в Юникоде, в HTML, каждая пиктограмма получила свой уникальный набор служебных символов, который позволяют браузеру отображать её (пиктограмму) на экране монитора. Такой уникальный набор служебных символов в HTML ещё называют «числовые ссылки на символы» или мнемоники. Числовые ссылки на символы и мнемоники – это разные способы записать код для отображения одного и того-же символа. Мнемоники присвоены только наиболее популярным пиктограммам, тогда как числовые ссылки есть абсолютно у всех.

Таблица пиктограмм Юникод в HTML

Ниже приведена таблица наиболее популярных пиктограмм Юникод в HTML. Таблица полностью рабочая. Коды пиктограмм можно вставлять в HTML-разметку веб-страниц, хотя Автору невдомек, кому ныне могут понадобиться в тексте шахматные кони и карточные трефы. Тем более, повторяюсь – нынче всё можно нарисовать в простом графическом виде и вставить куда угодно, применив при этом минимум усилий и максимум фантазии.

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

Чтобы вставить пиктограмму, нужно скопировать её код непосредственно в HTML-текст или скопировать изображение пиктограммы из окна браузера в окно своего визуального HTML-редактора. Работать будет, и так, и так.

Таблица пиктограмм в HTML5

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

Таблица символов Юникод в Word

(Бонусная тема от tehnopost.info)
При наборе текста в Word пиктограммы нужны бывают гораздо чаще, нежели в HTML. Чтобы в Word быстро набрать символ Юникод, можно воспользоваться приведённой ниже таблицей.

Пример использования таблицы: alt + 1 = ☺; alt + 2 = ☻; alt + 3 = ♥; alt + 4 = ♦; alt + 5 = ♣; alt + 6 = ♠; alt + 7 = •; alt + 8 = ◘; alt + 9 = ○; alt + 10 = ◙; и т.д.

Слева указаны десятки, а сверху – единицы. Что бы набрать символ, нужно при активной лампочке Num Lock зажать клавишу Alt и, не отпуская её, набрать код символа. После чего, нужно отпустить клавишу Alt, и в строке появится требуемый символ Юникод.

Дополнительно:

1. Символы управления HTML (XHTML)
2. Синтаксис и пунктуация
3. Товарные знаки и валюта
4. Математика и физика
5. Стрелки и указатели
6. Таблица пиктограмм в HTML (XHTML)
7. Карты, шахматы, музыка

Таблица популярных символов Юникод в HTML (XHTML)