Html спеціальні символи. Пробільні символи і форматування ними коду в Html, а так само спецсимволи нерозривного пробілу і інші мнемоніки

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

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

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

Вгамовувався, що це два різні способи:

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

Шрифт для символу, його розмір і колір в HTML можна задати кодом, виду:
КОД_СІМВОЛА
де,
Arial - шрифт,
10px - розмір шрифту в пікселях,
# Ff0000 - код кольору шрифту (червоний)

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

1. «Символ»
   (Видиме відображення символу)
   З цієї графи можна скопіювати зображення символу і вставити його в вікно текстового html-редактора. Символ скопіюється з розміром шрифту 20px. Після завершення копіювання може бути потрібна індивідуальна підгонка розміру шрифту безпосередньо для скопійованого знака.
2. «Найменування»
   (Тільки для важливих або незрозумілих символів)
   Пояснення призначення символу, його область застосування, приклади ...
3. «Мнемоніка»
   Мнемоніка - це літерна конструкція виду ", що позначає літерний код символу в HTML. Уставляється безпосередньо в html-код html-документа. Мнемоніки дуже популярні серед професійних верстальників. Вони прекрасно запам'ятовуються людиною і підтримуються всіма html-додатками. Кожна мнемоніка містить буквене ім'я (позначення ) свого символу і службовий знак (&), який служить сигналом до прочитання коду для браузера і не відображається на екрані монітора. Ім'я кожної мнемоніки унікально і легко читаемо, тому що утворено від англомовного слова, що характеризує символ.

   Мнемоніка (грец.) - мистецтво запам'ятовувати що-небудь. Мнемотехника застосовується для полегшення сприйняття труднозапомінаемой інформації, коли об'єкт запам'ятовування наводиться в асоціативне стан з чим-небудь.

4. «Код»
   Код - числовий десятковий код символу в HTML, виду &. Вставляється безпосередньо в html-код html-документа. Числовий десятковий код складається з числа, що позначає порядковий номер символу в системі Юнікод і декількох службових знаків (& і #), які служать сигналом до прочитання коду для браузера і не відображаються на екрані монітора. Числовий десятковий код має широке поширення і застосування, завдяки своїй універсальності і простоті сприйняття.

Символи управління в HTML (XHTML)

Символи управління в HTML (XHTML) - це службові символи HTML-мови, які використовуються при HTML-верстці веб-сторінки. Ці символи зобов'язаний підтримувати будь-який браузер, оскільки без них неможливо правильне відображення HTML-тексту. Символи керування не видно в тексті і, при прямому введенні з клавіатури - інтерпретуються браузером як знаки пунктуації, що закликають до виконання будь-якого дії при відображенні сторінки на екрані.

Допускається використовувати символи управління в звичайних текстах, де вони символізують загальнолюдські поняття і трактуються браузером як звичайні друкарські знаки. При такому використанні службових символів в HTML-текстах потрібно вводити не значення самого символу, а саме його HTML-код. Бо, повторюю - в іншому випадку браузер буде сприймати службовий символ, як заклик до дії і не буде коректно відображати HTML-текст на екрані монітора.

Символи управління і їх HTML-код знають і розуміють всі браузери без винятку, чого не можна сказати, на жаль - про інші знаки, які можуть відображатися некоректно в різних браузерах або, що ще гірше - не відображатися зовсім.

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

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

Товарні знаки і валюта

+	плюс			+	+
−	мінус			−	- −
=	одно				=
±	плюс мінус			±	±
×	знак множення			×	×
÷	знак ділення			÷	÷
⋅	оператор «точка» (середина рядка)			⋅	· ⋅
∗	оператор «зірочка» (середина рядка)			∗	∗
∼	оператор «тильда»			∼	∼
.	маркер списку (середина рядка)			.	•
¹	верхній індекс «1»			¹	¹
²	верхній індекс «2»			²	²
³	верхній індекс «3»			³	³
Надрядковий і підрядковий індекс в HTML (XHTML) можна вставити за допомогою тегів і , Відповідно: ЧИСЛО Підіндекс→ ЧИСЛО Підіндекс ЧИСЛО підрядковий індекс→ ЧИСЛО Надіндекс
½	дріб «одна друга»			½	½
⅓	дріб «одна третина»				⅓
¼	дріб «одна четверта»			¼	¼
¾	дріб «три чверті»			¾	¾
№	знак номера				№
%	відсоток				%
‰	проміле			‰	‰ ‰
°	градуси			°	°
′	штрих (хвилини, фути)			′	′
″	подвійний штрих (секунди, дюйми) Приклад 1: 30 ° 25 '12 " Приклад 2: 25 '12 ″			″	″
µ	мікро			µ	µ
π	Пі			π	π
ƒ	знак функції (Не плутати з «інтеграл»)			ƒ	ƒ ƒ
∫	інтеграл			∫	∫
∅	перекреслений нуль, порожня множина (Не плутати з «діаметр»)			∅	∅
⌀	діаметр (не плутати з перекресленою латинської «о»)				⌀
ø	латинська "o" діагонально перекреслена			ø	ø
Ø	латинська заголовна "O" діагонально перекреслена			Ø	Ø
∏	знак твори			∏	∏
∑	знак підсумовування			∑	∑
√	радикал (Квадратний корінь або корінь ступеня x)			√	√
∝	пропорційно			∝	∝
∞	нескінченність			∞	∞
∠	кут			∠	∠
⊥	ортогонально (перпендикулярно)			⊥	⊥
∴	знак «Cледовательно»			∴	∴
≅	приблизно дорівнює			≅	≅
≈	майже дорівнює			≈	≈
≠	не дорівнює			≠	≠
≡	ідентично			≡	≡
≤	менше або дорівнює			≤	≤
≥	більше чи рівно			≥	≥
∧	логічне І			∧	∧
∨	логічне АБО			∨	∨
⊕	знак «плюс в колі» (Пряма сума)			⊕	⊕
⊗	знак «множення в колі» (Векторне твір, стріла від спостерігача)			⊗	⊗
ʘ	точка в колі (Стріла на спостерігача)				ʘ

				✵ ✵

На цій сторінці зібрані стрілкидля вконтакте (і не тільки) з Юникода. Їх багато. Можливо, більше ніж нас. Не здивуюся якщо коли-небудь вони захоплять світ. І не факт, що це погано. Вони і зараз вже всюди. Озирніться, напевно побачите хоч одну. Ну або щось схоже, то, що може бути використано замість. Стежать, вичікують. Поки від них більше користі, ніж шкоди. Будемо сподіватися, так це і залишиться. Ну і допоможемо символам покажчиків глибше залізти соціальні мережі.

Пару слів скажу про історію появи стрілок. На штанах вони з'явилися в 19 столітті через те, що після транспортування в щільних тюках, штани важко було розгладити. На очах їх малювали ще в стародавньому Єгипті. Коли з'явилися покажчики на місцевості я не знаю. Ймовірно, ще до створення першої писемності. У Юникоде стрілки з'являлися поетапно. Хоч у них є свій окремий розділ і два додаткових до нього, різні індикатори напрямків можна побачити ще в кількох розділах. Наприклад, в різноманітних технічних символах або в дінгбатах.

Стрілки символи для соціальних мереж

Необхідні чорні стрілки і, звичайно ж. Адже вони вказують напрямок. Ось, наприклад, направо-вниз: ⇘. А ось на південний схід: ➘. Чудово, чи не так?

Покажчики бувають самих різних видів і розмірів. Хвилясті, ламані, жирні, чорні, білі. Деякі, дуже навіть не типові. Погляньте на цей зафарбований правонаправленний наконечник списа: ➤. Такий зможе прикрасити будь-яке повідомлення, статус або. Вище зібрані покажчики на будь-який смак і розмір. Багато різних, дуже багато. Коли-небудь вони захоплять ... Десь було ліки ...

Щоб скопіювати стрілку куди-небудь у вконтакт, виділіть її мишкою і скопіюйте абикуди під вконтакт.

Спецсимволи HTML - це спеціальні мовні конструкції, які посилаються на символи з набору символів, що використовуються в текстових файлів. У таблиці наведено список зарезервованих і спеціальних символів, які не можуть бути додані в вихідний код HTML-документа за допомогою клавіатури:

• символи, які неможливо ввести за допомогою клавіатури (наприклад символ копірайту)
• символи призначені для розмітки (наприклад знак більше або менше)

Такі знаки будуть додані за допомогою числового коду або імені.

символ	числовий код	ім'я символу	опис
"	"	"	знак лапки
"	"	"	апостроф
&	&	&	амперсанд
<		<	знак менше
>	>	>	знак більше
			нерозривний пробіл (Нерозривний пробіл - це пробіл відображається всередині рядка як звичайний пробіл, але не дозволяє програмам відображення і друку розірвати в цьому місці рядок.)
¡	¡	¡	перевернутий знак оклику
¢	¢	¢	цент
£	£	£	фунт
¤	¤	¤	валюти
¥	¥	¥	йен
¦	¦	¦	зламана вертикальна риса
§	§	§	секція
¨	¨	¨	інтервал (кирилиця)
	©		знак копірайту
ª	ª	ª	жіночий порядковий показник
«	«	«	французькі лапки (ялинки) - ліва
¬	¬	¬	заперечення-вирази
®	®	®	зареєстрована торгова марка
¯	¯	¯	Макрон інтервал
°	°	°	градус
±	±	±	плюс або мінус
²	²	²	верхній індекс 2
³	³	³	верхній індекс 3
´	´	´	гострий інтервал
µ	µ	µ	мікро
¶	¶	¶	параграф
·	·	·	середня точка
¸	¸	¸	інтервал Седільо
¹	¹	¹	верхній індекс 1
º	º	º	чоловічий порядковий показник
»	»	»	французькі лапки (ялинки) - права
¼	¼	¼	1/4 частина
½	½	½	1/2 частина
¾	¾	¾	3/4 частини
¿	¿	¿	перевернутий знак питання
×	×	×	множення
÷	÷	÷	поділ
́	́		наголос
Œ	Œ	Œ	лигатура прописна OE
œ	œ	œ	рядкова лигатура oe
Š	Š	Š	S з короною
š	š	š	рядкова S з короною
Ÿ	Ÿ	Ÿ	прописна Y з діадемою
ƒ	ƒ	ƒ	f з гаком
ˆ	ˆ	ˆ	дікріатіческій акцент
˜	˜	˜	маленька тильда
–	–	-	тире
—	—	—	довге тире
‘	‘	‘	ліва одинарні лапки
’	’	’	права одинарні лапки
‚	‚	‚	нижня одинарні лапки
“	“	“	ліві подвійні лапки
”	”	”	праві подвійні лапки
„	„	„	нижні подвійні лапки
†	†	†	кинджал
‡	‡	‡	подвійний кинджал
		.	куля
…	…	…	горизонтальне крапки
‰	‰	‰	проміле (тисячні частки)
′	′	′	хвилини
″	″	″	секунди
‹	‹	‹	одиночна ліва кутова лапка
›	›	›	одиночна права кутова лапка
‾	‾	‾	надкресленням
€	€	€	євро
™	™ або	™	торгова марка
←	←	←	стрілка вліво
			стрілка вгору
→	→	→	стрілка вправо
↓	↓	↓	стрілка вниз
↔	↔	↔	двостороння стрілка
↵	↵	↵	стрілка повернення каретки
⌈	⌈	⌈	лівий верхній кут
⌉	⌉	⌉	правий верхнійкут
⌊	⌊	⌊	лівий нижній кут
⌋	⌋	⌋	правий нижній кут
◊	◊	◊	ромб
♠	♠	♠	піки
♣	♣	♣	хрести
			черви
♦	♦	♦	Буби

Математичні символи, підтримувані в HTML

символ	числовий код	ім'я символу	опис
∀	∀	∀	для будь-яких, для всіх
∂	∂	∂	частина
∃	∃	∃	існує
∅	∅	∅	порожня множина
∇	∇	∇	оператор Гамільтона ( "Набла")
∈	∈	∈	належить множині
∉	∉	∉	не належить безлічі
∋	∋	∋	або
∏	∏	∏	твір, добуток
∑	∑	∑	сума
−	−	−	мінус
∗	∗	∗	множення або оператор пов'язаний до
×	×	& times	знак множення
√	√	√	квадратний корінь
∝	∝	∝	пропорційність
∞	∞	∞	нескінченність
⋮	⋮		кратність
∠	∠	∠	кут
∧	∧	∧	і
∨	∨	∨	або
∩	∩	∩	перетин
∪	∪	∪	об'єднання
∫	∫	∫	інтеграл
∴	∴	∴	тому
∼	∼	∼	подібно
≅	≅	≅	порівняно
≈	≈	≈	приблизно дорівнює
≠	≠	≠	не дорівнює
≡	≡	≡	ідентично
≤	≤	≤	менше або дорівнює
⩽	⩽ ⩽	⩽ ⩽	менше або дорівнює
≥	≥	≥	більше чи рівно
⩾	⩾ ⩾	⩾ ⩾	більше чи рівно
⊂	⊂	⊂	підмножина
⊃	⊃	⊃	надмножестов
⊄	⊄	⊄	НЕ підмножина
⊆	⊆	⊆	підмножина
⊇	⊇	⊇	надмножество
⊕	⊕	⊕	пряма сума
⊗	⊗	⊗	тензерное твір
⊥	⊥	⊥	перпендикуляр
⋅	⋅	⋅	оператор точка

Грецький і коптський алфавіти

символ	числовий код	шістнадцятковий код	ім'я символу
Ͱ	Ͱ	Ͱ
ͱ	ͱ	ͱ
Ͳ	Ͳ	Ͳ
ͳ	ͳ	ͳ
ʹ	ʹ	ʹ
͵	͵	͵
Ͷ	Ͷ	Ͷ
ͷ	ͷ	ͷ
ͺ	ͺ	ͺ
ͻ	ͻ	ͻ
ͼ	ͼ	ͼ
ͽ	ͽ	ͽ
;	;	;
΄	΄	΄
΅	΅	΅
Ά	Ά	Ά
·	·	·
Έ	Έ	Έ
Ή	Ή	Ή
Ί	Ί	Ί
Ό	Ό	Ό
Ύ	Ύ	Ύ
Ώ	Ώ	Ώ
ΐ	ΐ	ΐ
Α	Α	Α	Α
Β	Β	Β	Β
Γ	Γ	Γ	Γ
Δ	Δ	Δ	Δ
Ε	Ε	Ε	Ε
Ζ	Ζ	Ζ	Ζ
Η	Η	Η	Η
Θ	Θ	Θ	Θ
Ι	Ι	Ι	Ι
Κ	Κ	Κ	Κ
Λ	Λ	Λ	Λ
Μ	Μ	Μ	Μ
Ν	Ν	Ν	Ν
Ξ	Ξ	Ξ	Ξ
Ο	Ο	Ο	Ο
Π	Π	Π	Π
Ρ	Ρ	Ρ	Ρ
Σ	Σ	Σ	Σ
Τ	Τ	Τ	Τ
Υ	Υ	Υ	Υ
Φ	Φ	Φ	Φ
Χ	Χ	Χ	Χ
Ψ	Ψ	Ψ	Ψ
Ω	Ω	Ω	Ω
Ϊ	Ϊ	Ϊ
Ϋ	Ϋ	Ϋ
ά	ά	ά
έ	έ	έ
ή	ή	ή
ί	ί	ί
ΰ	ΰ	ΰ
α	α	α	α
β	β	β	β
γ	γ	γ	γ
δ	δ	δ	δ
ε	ε	ε	ε
ζ	ζ	ζ	ζ
η	η	η	η
θ	θ	θ	θ
ι	ι	ι	ι
κ	κ	κ	κ
λ	λ	λ	λ
μ	μ	μ	μ
ν	ν	ν	ν
ξ	ξ	ξ	ξ
ο	ο	ο	ο
π	π	π	π
ρ	ρ	ρ	ρ
ς	ς	ς	ς
σ	σ	σ	σ
τ	τ	τ	τ
υ	υ	υ	υ
φ	φ	φ	φ
χ	χ	χ	χ
ψ	ψ	ψ	ψ
ω	ω	ω	ω
ϊ	ϊ	ϊ
ϋ	ϋ	ϋ
ό	ό	ό
ύ	ύ	ύ
ώ	ώ	ώ
Ϗ	Ϗ	Ϗ
ϐ	ϐ	ϐ
ϑ	ϑ	ϑ	ϑ
ϒ	ϒ	ϒ	ϒ
ϓ	ϓ	ϓ
ϔ	ϔ	ϔ
ϕ	ϕ	ϕ	ϕ
ϖ	ϖ	ϖ	ϖ
ϗ	ϗ	ϗ
Ϙ	Ϙ	Ϙ
ϙ	ϙ	ϙ
Ϛ	Ϛ	Ϛ
ϛ	ϛ	ϛ
Ϝ	Ϝ	Ϝ	Ϝ
ϝ	ϝ	ϝ	ϝ
Ϟ	Ϟ	Ϟ
ϟ	ϟ	ϟ
Ϡ	Ϡ	Ϡ
ϡ	ϡ	ϡ
Ϣ	Ϣ	Ϣ
ϣ	ϣ	ϣ
Ϥ	Ϥ	Ϥ
ϥ	ϥ	ϥ
Ϧ	Ϧ	Ϧ
ϧ	ϧ	ϧ
Ϩ	Ϩ	Ϩ
ϩ	ϩ	ϩ
Ϫ	Ϫ	Ϫ
ϫ	ϫ	ϫ
Ϭ	Ϭ	Ϭ
ϭ	ϭ	ϭ
Ϯ	Ϯ	Ϯ
ϯ	ϯ	ϯ
ϰ	ϰ	ϰ	ϰ
ϱ	ϱ	ϱ	ϱ
ϲ	ϲ	ϲ
ϳ	ϳ	ϳ
ϴ	ϴ	ϴ
ϵ	ϵ	ϵ	ϵ
϶	϶	϶	϶
Ϸ	Ϸ	Ϸ
ϸ	ϸ	ϸ
Ϲ	Ϲ	Ϲ
Ϻ	Ϻ	Ϻ
ϻ	ϻ	ϻ
ϼ	ϼ	ϼ
Ͻ	Ͻ	Ͻ
Ͼ	Ͼ	Ͼ
Ͽ	Ͽ	Ͽ

Навіщо потрібні спецсимволи і як ними користуватися

Припустимо, ви вирішили описати який-небудь тег на вашій сторінці, але, оскільки браузер використовує символи< и >як початок і кінець тега, застосування їх усередині вмісту вашого html-коду може призвести до проблем. Але HTML дає вам легкий спосібвизначати ці та інші спеціальні символиза допомогою простих абревіатур, званих посиланнями на символи.

Розглянемо, як це працює. Для кожного символу, який вважається спеціальним або який ви хочете використовувати на своїй веб-сторінці, але який неможливо надрукувати в вашому редакторі (наприклад, символ авторського права), ви знаходите абревіатуру і друкуєте її в html-коді замість потрібного символу. Наприклад, для символу ">" абревіатура - > , А для символу "<" - < .

Припустимо, ви хотіли надрукувати «Елемент дуже важливий »на своїй сторінці. Замість цього вам доведеться скористатися посиланнями на потрібні вам символи для коректного відображення записи, і в підсумку ваша запис в коді повинна буде виглядати так:

елемент дуже важливий

спробувати зараз »

Ще один спеціальний символ, про який вам потрібно знати - символ & (амперсанд). Якщо ви хочете, щоб він відображався на вашій HTML-сторінці, використовуйте посилання & замість символу &.

Привіт, шановні читачі блогу сайт! Ті, хто хоча б поверхово встиг ознайомитися з, напевно, вже взяли до відома, нехай і в загальних рисах. А значить, мають уявлення про те, які взагалі HTML символи використовуються в коді документа.

У сьогоднішній статті ми спробуємо розібратися, що з себе представляє пробіл в HTML, в яких випадках можна застосувати пробільні символи при форматуванні самого коду для зручного сприйняття. Дізнаємося, коли необхідне застосування нерозривного пробілу, а також познайомимося з іншими спецсимволами (або, як їх ще називають, мнемониками).

Насправді я б порадив не ігнорувати тему використання різних спец символів, оскільки це важлива складова, що дозволяє надати закінченість вивчення мови гіпертекстової розмітки. Загалом, надана в цій публікації інформація зайвою точно не буде. Ну а тепер до справи.

Прогалини і пробільні символи в HTML

Спочатку необхідно зробити важливе зауваження. На клавіатурі комп'ютера є спеціальні клавіші, які дозволяють реалізувати поділ тексту (трохи докладніше про це нижче). Однак, лише широка клавіша пробілу забезпечує розділ між словами не тільки в редакторі, але і в вікні браузера. При перенесенні рядків і відступі від краю існують нюанси.

Як ви знаєте, відображення тих чи інших елементів в веб-браузер визначається тегами. Для форматування тексту застосовується відомий, який є блоковим. Тобто його зміст розташовується по всій доступній ширині.

щоб перенести терміни всередині абзацу P, Потрібно скористатися одиночним тегом BR, за допомогою якого це можна здійснити. Скажімо, нам потрібно вставити в текст якісь рядки з вірша, які ми пишемо в текстовому редакторі:

Незважаючи на те, що рядки вірша розташовані коректно і переноси здійснені в потрібних місцях, в браузері все буде виглядати інакше:

Щоб домогтися такого ж відображення у вікні браузера, потрібно в кожному місці розриву рядків прописати BR:

Тепер ми досягли виконання поставленого завдання і в браузері віршовані рядки відобразяться абсолютно правильно:

Таким чином, потрібні переноси рядків виконані. Тут ще потрібно відзначити таку особливість, що множинні прогалини, що йдуть один за іншим, веб-браузер відображає як один. У цьому ви зможете переконатися, якщо в тому ж редакторі спробуєте поставити не один, а кілька пробілів між двома словами і, натиснувши на кнопку «Зберегти», подивіться на результат в браузері.

Пробіл, табуляція і перенесення рядка

В принципі, з цими пробільними символамими знайомимося відразу ж, як починаємо роботу з текстом в редакторі і форматіруем його в потрібному вигляді. Для реалізації такого завдання існують спеціальні клавіші, кожна з яких відповідає своєму символів пробілів:

• Пропуск - найширша клавіша на клавіатурі комп'ютера (без напису);
• Табуляція - клавіша зліва з написом «Tab» і двома стрілками, спрямованими в різні боки;
• Перенесення рядка - клавіша «Enter».

Однак, як я сказав вище, кінцевий потрібний результат не тільки в текстовому редакторі, але і в браузері, ми отримуємо лише при використанні першої клавіші. Всі три клавіші (в тому числі табуляція і перенесення рядка корисно використовувати при форматуванні коду HTML. Припустимо, ось як виглядає фрагмент коду в NotePad ++ (про це редакторі тлумачний матеріал) при відображенні всіх символів пробілів:

Ми отримуємо код, який легко читаємо і зрозумілий завдяки прогалин. Помаранчевими стрілками відзначені відступи, що створюються за допомогою клавіші Tab, а символами CR і LF переноси рядків, які здійснюються за допомогою кавіші Enter.

Проглядаються контейнери, вкладені один в інший, добре виділяються відкривають та закривають теги. У такому вигляді цей код можна спокійно редагувати. А тепер порівняйте його з таким же кодом, в якому немає подібного поділу тексту:

Таким же чином за допомогою символів пробілів можна прописати і правила CSS, які будуть візуально виглядати зрозумілими і легкотравними:

Після того, як ви приведете всі стилі до спільного знаменника і повністю закінчите редагування файлу стилів, можна буде поставити під, видаливши з коду всі прогалини. Це необхідно для підвищення, що дуже важливо при просуванні ресурсу.

Спецсимволи (або мнемоніки) в коді HTML

Тепер розберемо, в яких випадках необхідне використання спеціальних символів, про які я згадав на початку статті. Спецсимволи HTML, які іноді називають мнемониками, введені для вирішення давньої проблеми з кодуваннями, що виникла в мові гіпертекстової розмітки.

При наборі вами тексту з клавіатури відбувається кодування символів мови, який ви використовуєте. У веб-браузер набраний текст буде відображений за допомогою обраних вами шрифтів в результаті зворотної операції декодування.

Справа в тому, що подібних кодувань чимало, зараз у нас немає мети їх детально розібрати. Просто в кожної з них може не діставати тих чи інших символів, які, однак, необхідно відобразити. Скажімо, закортіло вам прописати одиничні лапки або знак наголоси, а ці значки банально відсутні в наборі.

Для того, щоб ліквідувати цю проблему, і була введена система спецсимволов, яка включає в себе величезну кількість всіляких мнемонік. Всі вони починаються зі значка амперсанда «&» і закінчуються зазвичай крапкою з комою «;». Спочатку кожному спецсимволи відповідав свій цифровий код. Наприклад, для нерозривного пробілу, який розглянемо трохи нижче докладніше, буде справедлива така запис:

Але через деякий час найбільш поширеним символам були привласнені буквені аналоги (мнемоніки), щоб їх було простіше запам'ятати. Скажімо, для того ж нерозривного пробілу це виглядає наступним чином:

В результаті браузер відображає відповідний символ. Список мнемонік дуже об'ємний, найбільш часто застосовуються спецсимволи HTMLви можете виявити з нижче такої таблиці:

символ	код	мнемоніка	опис
			нерозривний пробіл
			вузький пробіл (еn-шириною в букву n)
			широкий пробіл (em-шириною в букву m)
–	-	–	вузьке тире (en-тире)
-	—	—	широке тире (em -тіре)
­	-	­	варіант переносу
а		́	наголос, ставиться після "ударної" букви
©		©	копірайт
®	®	®	знак зареєстрованої торгової марки
™	™	™	знак торгової марки
º	º	º	спис Марса
ª	ª	ª	дзеркало Венери
‰	‰	‰	проміле
π	π	π	пі (використовуйте Times New Roman)
¦	¦	¦	вертикальний пунктир
§	§	§	параграф
°	°	°	градус
µ	µ	µ	знак "мікро"
¶	¶	¶	знак абзацу
…	…	…	три крапки
‾	‾	‾	надкресленням
´	´	´	знак наголоси
№		№	знак номера
🔍		🔍	Лупа (нахилена вліво)
🔎		🔎	Лупа (нахилена вправо)
знаки арифметичних і математичних операцій
×	×	×	помножити
÷	÷	÷	розділити
<	<		менше
>	>	>	більше
±	±	±	плюс мінус
¹	¹	¹	ступінь 1
²	²	²	ступінь 2
³	³	³	ступінь 3
¬	¬	¬	заперечення
¼	¼	¼	одна четверта
½	½	½	одна друга
¾	¾	¾	три чверті
⁄	⁄	⁄	подрібнена риса
−	−	−	мінус
≤	≤	≤	менше або дорівнює
≥	≥	≥	більше чи рівно
≈	≈	≈	приблизно (майже) дорівнює
≠	≠	≠	не дорівнює
≡	≡	≡	тотожно
√	√	√	квадратний корінь (радикал)
∞	∞	∞	нескінченність
∑	∑	∑	знак підсумовування
∏	∏	∏	знак твори
∂	∂	∂	частковий диференціал
∫	∫	∫	інтеграл
∀	∀	∀	для всіх (видно тільки якщо жирним шрифтом)
∃	∃	∃	існує
∅	∅	∅	порожня множина
Ø	Ø	Ø	діаметр
∈	∈	∈	належить
∉	∉	∉	не належить
∋	∋	∗	містить
⊂	⊂	⊂	є підмножиною
⊃	⊃	⊃	є надбезліччю
⊄	⊄	⊄	не є підмножиною
⊆	⊆	⊆	є підмножиною або дорівнює
⊇	⊇	⊇	є надбезліччю або дорівнює
⊕	⊕	⊕	плюс в гуртку
⊗	⊗	⊗	знак множення в гуртку
⊥	⊥	⊥	перпендикулярно
∠	∠	∠	кут
∧	∧	∧	логічне І
∨	∨	∨	логічне АБО
∩	∩	∩	перетин
∪	∪	∪	об'єднання
знаки валют
€	€	€	євро
¢	¢	¢	цент
£	£	£	фунт
¤	¤t;	¤	знак валюти
¥	¥	¥	Знак ієни і юаня
ƒ	ƒ	ƒ	знак флорина
маркери
	.		простий маркер
○		○	коло
·	·	·	середня точка
†		†	хрестик
‡		‡	подвійний хрестик
♠	♠	♠	піки
♣	♣	♣	трефи
			черви
♦	♦	♦	бубни
◊	◊	◊	ромб
✏		✏	олівець
✎		✎	олівець
✐		✐	олівець
✍		✍	рука
лапки
"	"	"	лапки
&	&	&	амперсанд
«	«	«	ліва друкарська лапки (лапки-ялинка)
»	»	»	права друкарська лапки (лапки-ялинка)
‹		‹	одиночна кутова лапка відкриває
›		›	одиночна кутова лапка закриває
′	′	′	штрих (хвилини, фути)
″	″	″	подвійний штрих (секунди, дюйми)
‘	‘	‘	ліва верхня одинарні лапки
’	’	’	права верхня одинарні лапки
‚	‚	‚	права нижня одинарні лапки
“	“	“	лапка-лапка ліва
”	”	”	лапка-лапка права верхня
„	„	„	лапка-лапка права нижня
❛		❛	одиночна англійська лапка відкриває
❜		❜	одиночна англійська лапка закриває
❝		❝	подвійна англійська лапка відкриває
❞		❞	подвійна англійська лапка закриває
стрілки
←	←	←	стрілка вліво
			стрілка вгору
→	→	→	стрілка вправо
↓	↓	↓	стрілка вниз
↔	↔	↔	стрілка вліво і вправо
↕		↕	стрілка вгору і вниз
↵	↵	↵	повернення каретки
⇐	⇐	⇐	подвійна стрілка вліво
⇑	⇑	⇑	подвійна стрілка вгору
⇒	⇒	⇒	подвійна стрілка вправо
⇓	⇓	⇓	подвійна стрілка вниз
⇔	⇔	⇔	подвійна стрілка вліво і вправо
⇕		⇕	подвійна стрілка вгору і вниз
▲		▲	трикутна стрілка вгору
▼		▼	трикутна стрілка вниз
			трикутна стрілка вправо
◄		◄	трикутна стрілка вліво
зірочки, сніжинки
☃		☃	Сніговик
❄		❄	сніжинка
❅		❅	Затиснута трилисниками сніжинка
❆		❆	Жирна гострокутна сніжинка
★		★	зафарбована зірка
☆		☆	незафарбовані зірка
✪		✪	Незафарбовані зірка в закрашенном колі
✫		✫	Зафарбована зірка з незакрашенним колом усередині
✯		✯	обертається зірка
⚝		⚝	Накреслена біла зірка
⚪		⚪	Середній зафарбований круг
⚫		⚫	Середній зафарбований круг
⚹		⚹	Секстилі (типу сніжинка)
✵		✵	Восьмикінцева обертається зірка
❉		❉	Зірочка з кулястими закінченнями
❋		❋	Жирна восьмиконечная каплеподібна зірочка-пропелер
✺		✺	Шестнадцатіконечная зірочка
✹		✹	Двенадцатіконечная зафарбована зірка
✸		✸	Жирна восьмиконечная прямолінійна зафарбована зірка
✶		✶	Шестикутна зафарбована зірка
✷		✷	Восьмикінцева прямолінійна зафарбована зірка
✴		✴	Восьмикінцева зафарбована зірка
✳		✳	восьмикінцева зірочка
✲		✲	Зірочка з незакрашенним центром
✱		✱	жирна зірочка
✧		✧	Загострена чотирикінцевий незафарбовані зірка
✦		✦	Загострена чотирикінцевий зафарбована зірка
⍟		⍟	Зірка в колі
⊛		⊛	Сніжинка в колі
годинник, час
⏰		⏰	Годинники
⌚		⌚	Годинники
⌛		⌛	Пісочний годинник
⏳		⏳	Пісочний годинник

Випадки використання деяких спецсимволов, в тому числі нерозривного пробілу і м'якого переносу

Якщо ви трохи вже вивчили таблицю, то отримали підтвердження сказаним мною вище словами, що для відображення всіх спецсимволов використовується цифровий код () або його буквений аналог (символьний мнемоніка), де замість сукупності решітки і цифр прописані літери ().

Тепер подивимося, коли необхідно застосовувати дані коди. Скажімо, в статті вам необхідно в інформативних цілях вказати який-небудь HTML тег, наприклад,