Позначення пропуску в 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 тег, наприклад,

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

Тому з тієї ж таблиці спецсимволів HTMLберемо відповідні коди і весь запис виглядатиме так:

Крім того, щоб відобразити в браузері не сам знак амперсанда, а його позначення вигляді

потрібно додати з таблиці його код:

footer

Тоді у браузері виведеться саме запис мнемонік, які потрібно застосувати для відображення тега FOOTER. Трохи плутано, але на цій сторінці ви зможете попрактикуватися у даному аспекті, ввівши в поле "HTML" мнемоніки для відповідних символів і задіявши кнопку "Run", а в області "Result" отримуючи результат їх відображення у браузері:

Зверніть увагу, що я забезпечив перенесення тексту за допомогою вже згаданого тега BR, щоб самі символи відображалися не в один рядок, а стовпчиком для зручності.

Йдемо далі. Іноді в тексті виникають поєднання, які небажано розділяти на різним рядкам. Скажімо, "1000 руб." буде логічним або залишити на верхньому рядку, або при нестачі місця всю конструкцію перенести на рядок нижче.

Особливо це актуально, якщо користувачі використовують пристрої з різною шириною екрану, у тому числі мобільні. Адже в цьому випадку веб-браузер форматує текст, підлаштовуючись під нові умови. І якщо при стандартних розмірахМонітор текст виглядає коректно, то при їх зміні все може змінитися.

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

І його потрібно вставити між двома сукупностями знаків, які потрібно зв'язати:

1000 руб.

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

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

Довге довге довге довге слово

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

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

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

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

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

Відразу зазначимо, що HTML поділяє пробільні символи на види: HTML табуляція, пробіл та перенесення рядка. І кожен з цих видів браузер обробляє особливим чином, крім того HTML є спеціальні теги, які говорять браузеру про те, як обробляти пробільні символи. З цього запису ви дізнаєтеся про те для чого потрібні пробільні символи в HTML, на які види діляться пробільні символи в HTML і як з ними звертається браузер.

Також ми розглянемо у всіх деталях кожен із пробельних символів окремо. У записі будуть описані такі питання:

як браузер обробляє прогалини в HTML документеі в чому різниця між звичайним пробіломі нерозривною пробілом;
для чого використовується табуляція в HTML;
як браузер відноситься до перенесення рядків, для чого потрібні перенесення рядків в HTML і як виглядає символ перенесення рядка в HTML;
як змусити браузер зробити примусове перенесення рядка;
і як зберегти всі пробілові символи у HTML.

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

Для чого потрібні символи пробілів в HTML

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

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

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

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

Види пробельних символів у HTML

Раз із призначенням пробельних символів все зрозуміло, варто розібратися з видами пробельних символів. У HTML, та й загалом, пробільні символи можна розділити так: пробіл, табуляція та перенесення рядка. Описати словами пробільні символи добре, але хотілося б їх побачити на власні очі, в цьому нам допоможе, у якого є підсвічування синтаксису, але зараз для нас важливо, що Notepad++ вміє відображати пробільні символи.

Зверніть увагу на малюнок: це скрін з Notepad++, на якому відкритий із запису, в якому ми говорили про . Помаранчева стрілка це табуляція у HTML документі. Оскільки я працюю на Windows 10, то перенесення рядків у HTML у мене відображається двома символами: CR та LF(Така вже традиція, що йде від друкарських машинок, в ОС сімейства Linux перенесеннярядки позначається одним символом LF). А ось пробіл у Notepad++ відображається символом червоної точки, якщо придивитеся до скрин, то помітите її.

Отже, Notepad++ допоміг нам побачити пробільні символи у HTML документі: табуляцію, перенесення рядка та пробіл. Однак більшість цих пробельних символів ми не побачимо в HTML сторінці, яку нам сформує браузер Ми вже говорили, що мова HTML не чутлива до пробілових символів, і браузери відкидають усі пробілові символи між тегами.

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

Пробіл і нерозривний пробіл у HTML

Давайте тепер розглянемо кожен із пробілових символів окремо. Почнемо ми з пробілів у HTML. Отже, ми вже знаємо, що браузер ігнорує всі пробілові символи між тегами. Але як обробляє браузер пробільні символи всередині тегів, це важливе питання, оскільки від цього залежить те, як відображатимуться тексти на сторінці. Давайте подивимося на прикладі. Відкрийте будь-який зручний для вас редактор, можна навіть звичайний блокнот, але я порекомендую вам, який має чудові можливості по роботі з HTML, і наберіть наступний код:

Збережіть файл з розширенням.html в будь-яку зручну для вас папку і відкрийте його в браузері, ви побачите таку картину:

Ми бачимо, що в першому HTML параграфі браузер «конвертував» усі зайві прогалиниі пробілові символи, які відрізняються від пробілу, в один пробіл. А у другому параграфі у нас ситуація дещо інша. Тут ми використовуємо спеціальний символ, про який часто говорять, що це нерозривний пробіл у HTML. Справа в тому, що говорити нерозривний пробіл в HTML не зовсім правильно, так як це спеціальна послідовність кодування.

Нерозривні прогалини в HTML документах, як і в будь-яких інших документах використовуються, щоб сказати програмі, що відкриває даний документ(у нашому випадку браузеру), що ці слова з'єднані пробілом нерозривно, тобто, якщо ми напишемо «Привіт світ!», то браузер ніколи не перенесе слово «світ!» без слова «Привіт» на новий рядок, перенесення буде здійснено лише разом. Плюс до всього іншого нерозривну прогалину в HTML можна використовувати, щоб поставити кілька прогалин між словами всередині HTML тегів.

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

Давайте підіб'ємо проміжний підсумок: браузер ігнорує всі пробілові символи, розташовані поза HTML тегами, і стискає браузер всі пробілові символи всередині HTML тегів до одного пропускуякщо всередині HTML тега не використовується нерозривний пробіл.

Табуляція в HTML або ще один символ пробілу

HTML табуляція – це ще один символ пробілу. Найчастіше табуляцію HTML використовують для того, щоб форматувати HTML код у редакторі. Табуляцію не варто використовувати всередині HTML тега

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

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

Перенесення рядка в HTML або третій символ пробілу. Символ перенесення рядка

Перенесення рядка в HTML, та й не тільки в HTML, здійснюється натисканням клавіші Enter. Символ перенесення рядкав операційних системах Linux: LF. В операційних системах Windows CR LF, в системах Mac OS до версії дев'ять символом перенесення рядка була послідовність CR. Отже, ми вже знаємо, що браузер ігнорує перенесення рядків у HTML документіде б вони не розташовувалися.

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

Як браузер робить перенесення рядків

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

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

Пробілові символи в HTML

Текст написаний безпробельних символів перенесений не буде

Браузер користується пробіловими символами, щоб здійснювати перенесення рядків у тому випадку, коли області просмору не вистачає, щоб умістити весь рядок

< ! DOCTYPE html >

< html lang = "ru-RU" >

< head >

< meta charset = "UTF-8" >

< title >Пробільні символи HTML< / title >

< link rel = "stylesheet" type = "text/css" href = "style.css" / >

< / head >

< body >

< h1 >Текст написаний безпробельних символів перенесений не буде< / h1 >

< p >Браузер користується пробельними символами, щоб здійснювати перенос

рядків у тому випадку, коли області просмору не вистачає, щоб

вмістити всю строку< / p >

< / body >

< / html >

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

У разі HTML заголовка браузер не став нічого переносити і залишив рядок як є. Але у випадку з HTML абзацом у браузера з'явилося розуміння, як переносити рядкизавдяки тому, що в тексті параграфа є пробільні символи, на які орієнтується браузер, щоб здійснити перенесення рядка.

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

Примусове перенесення рядка в HTML. HTML тег

Отже, ми з'ясували, що браузер чхав на символи перенесення рядків у HTMLале як нам бути, якщо є необхідність зробити перенесення рядка там, де нам хочеться, а не там, де закінчується область перегляду в браузері? Наприклад, ми хочемо опублікувати вірші, але параграфом їх публікувати не дуже правильно та незручно. У таких ситуаціях нас рятує і, до того ж дуже сильно рятує, HTML тег
.

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

Пробілові символи в HTML

Біла береза
Під моїм вікном
Накрилася снігом,
Точно сріблом.

< ! DOCTYPE html >

< html lang = "ru-RU" >

< head >

< meta charset = "UTF-8" >

< title >Пробільні символи HTML< / title >

< link rel = "stylesheet" type = "text/css" href = "style.css" / >

< / head >

< body >

< p >Біла береза< br >Підмоїмокном< br >

Накрилася снігом,< br >Точно-срібло.< / p >

< / body >

< / html >

Четверостиші з твору Єсеніна буде відображено так:

Кожен рядок вірша написано з нового рядка, В принципі, цього ми і домагалися. Отже, тег
використовується для примусового перенесення рядків у HTML. Якщо ви напишіть два і більше тегів BR поспіль, то браузер сформує стільки примусових перенесення рядків, скільки тегів
він зустріне у документі.

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

Збереження пробілів у HTML. HTML тег

Тепер давайте обговоримо проблему Володимира Маяковського… Вірніше за його склад, ще точніше, як нам записати вірші Володимира Маяковського в HTML документі.

Невже нам доведеться використовувати спеціальні символи HTML, типу нерозривної пробілу та після кожного рядка тег
? Відповідь: звичайно ж ні. Розробники стандарту HTML врахували цей момент і прийняли стандарт спеціальний HTMLтег

. Тег Або preformatted на російську мову можна перекласти як авторське форматування.
Цей тег дозволяє зберігати пробілові символи в HTML.  Коли браузер зустрічає текст усередині тега 
Він його відображає як є, тобто зі збереження всіх пробілових символів: перенесення рядків, табуляція та просто пробіл будуть збережені всередині тега Як ви їх написали.
Варто зазначити, що HTML тег 
Є парним, а HTML елемент PRE є блоковим.  Власне, тег отримав назву авторське форматування через причину, яку ми озвучили вище: браузер зберігає всі пробілові символи тексту, всередині цього тега у тому вигляді, в якому їх написав автор.  Давайте спробуєм зберегти всі пробілові символи в HTML, використовуючи тег І подивимося, як пробілові символи будуть показані у браузері.

Код документа дуже простий, вірш В. Маяковського поміщений у контейнер 
Тепер подивимося, як обробить браузер пробільні символи всередині HTML елемент PRE.

Бачимо, що всі символи пробілів збереглися в тому вигляді, як ми їх написали.  Тепер ми переконалися, що тег 
Дійсно зберігає пробілові символи на сторінках HTML.
Отже, підіб'ємо підсумок усьому вищесказаному. У HTML є три види пробельних символів: табуляція, перенесення рядка та пробіл. Табуляцію в HTMLварто використовувати лише для форматування HTML-коду в редакторі. Перенесення рядків у HTMLбраузери ігнорують, "стискаючи" їх до пропуску, як і табуляції.  Щоб створити символ перенесення рядка в HTML, використовуйте тег 
.
Прогалини в HTMLпотрібні для двох цілей: за пробілами браузер визначає, як здійснювати перенесення рядків, пробіли потрібні, щоб текст був читабельним.  HTML підтримує спеціальні символи кодування, наприклад, символ нерозривної пробілу в HTMLможна використовувати в тому випадку, коли ви хочете написати кілька пробілів поспіль (інакше браузер скоротить їх до одного) або коду ви хочете вказати браузеру, щоб він не переносив слова на нові рядки один без одного.
Здрастуйте, шановні читачі блогу сайт.  Трохи раніше ми вже встигли поговорити про те, також дізналися про оформлення в ньому.  Сьогодні у нас на черзі поняття пропуску в ХТМЛ, а також пов'язане з ним форматування коду при його написанні (для зручності подальшого читання та сприйняття).
Ну і у зв'язку з тим, що ми торкнемося теми нерозривної прогалини та м'якого перенесення, нам доведеться акцентувати нашу увагу на так званих спецсимволах або мнемоніках, що використовуються в мові Html, які дозволять вам додати в код webдокумента безліч додаткових символів, наче вже згаданого вище.  Але про все по порядку.
Пробіли та пробілові символи у мові Html
Перш ніж переходити до питання форматування тексту за допомогою спеціально призначених для цього тегів (абзацу, заголовків тощо) я хочу зупинитися на тому моменті, як у мові ХТМЛ інтерпретуються пробіли, переноси рядка (Enter) та табуляція, як здійснюється розбивка  тексту у вікні браузера при зміні розміру.
Правда для такого роду візуального форматування (яке не буде видно на веб-сторінці) найчастіше використовують не самі прогалини, а саме символи табуляції та перенесення рядка.  Є таке правило – коли починаєте писати вкладений Html тег, то зробіть відступ за допомогою табуляції (клавіша Tabна клавіатурі), а коли цей тег закриваєте, приберіть відступ (поєднання клавіш Shift+Tab на клавіатурі).
Робити це потрібно так, щоб теги, що відкриває і закриває, були б на одному вертикальному рівні (на однаковій кількості табуляцій від правого краю сторінки вашого Html редактора, наприклад, Notepad++, про який я писав ).  Крім цього раджу безпосередньо після написання відкриває елемента зробити кілька переносів рядки і відразу ж прописати закриває на тому ж рівні (кількості табуляцій), щоб потім не забути це зробити.
Тобто.  елемент, що відкриває і закриває, повинні стояти на одному рівні по вертикалі, а внутрішні теги зрушуємо на один знак табуляції і розташовуємо закривають і відкривають знову ж на одному рівні.
Для простих вебдокументів це може здатися надмірністю, але при створенні більш-менш складних, їх код стане набагато наочнішимі читаним за рахунок великої кількості прогалин, а також у ньому буде набагато простіше помітити помилки за рахунок симетричного розташування тегів.
Спецсимволи або мнемоніки у Html коді
Так, а тепер давайте поговоримо про так звані спеціальних символах, зручність використання яких я анонсував на початку цієї статті.  Спецсимволи ще іноді називають мнемоніки чи підстановки.  Вони призначені для того, щоб вирішити проблему, що давно давно виникла в мові гіпертекстової розмітки, пов'язану з використовуваними кодуваннями.
Коли ви набираєте текст з клавіатури, то відбувається кодування символів вашої мови за заздалегідь встановленим алгоритмом, а потім вони відображаються на сайті за допомогою шрифтів (де знайти і як встановити для сайту) за рахунок декодування.
Кодувань існує дуже багато, але для мови Html за умовчанням було прийнято розширену версію кодувань .
У цьому кодуванні тексту було можливо записати лише 256 знаків — 128 від ASCII і ще 128 для літер російської мови.  В результаті виникла проблема з використанням на сайтах знаки, які не входять до ASCII та не є літерами російської мови, що входять до складу кодування Windows 1251 (CP1251).  Ну, заманулося вам використовувати тильду або апостроф, а можливості такої спочатку у мові, що використовується Html кодуванняне закладено.
Саме для таких випадків і були придумані підстановки або, іншими словами, мнемоніки.  Від самого початку спецсимволи мали цифровий виглядзаписи, але потім для найпоширеніших з них були додані їхні літерні аналоги для простоти їхнього запам'ятовування.
У загальному розумінні, мнемоніка - це такий знак, який починається з амперсанди "&" і закінчується точкою з комою ";".  Саме за цими ознаками браузер при розборі Htmlкоду виділяє із нього спецсимволи.  Відразу за амперсандом у цифровому коді підстановки повинен йти знак решітки «#», який іноді називають хеш.  А вже потім слідує цифровий код потрібного символу в кодуванні юнікод.
У юнікоді можна записати більше 60 000 знаків - головне, щоб потрібний вам символ мнемоніки підтримувався шрифтом, що використовується на вашому сайті.  Є шрифти з підтримкою багатьох символів кодування юнікод, а є варіанти лише з певним набором знаків.
Повний список спецсимволів буде величезний, але найчастіше використовувані мнемонікиви можете запозичити, наприклад, з цієї таблиці:
Символ Html-код Десятковий 
код Опис



нерозривна прогалина
 

 
 
вузька пробіл (еn-шириною в букву n)
 

 
 
широка пробіл (em-шириною в букву m)
–
-
–
вузьке тире (en-тире)
-
—
—
широке тире (em-тире)

-

м'яке перенесення
а́ 
́
наголос ставиться після «ударної» літери
©

©
копірайт
®
®
®
знак зареєстрованої торгової марки
™
™
™
знак торгової марки
º
º
º
спис Марса
ª
ª
ª
дзеркало Венери
‰
‰
‰
проміле
π
π
π
пі (використовуйте Times New Roman)
¦
¦
¦
вертикальний пунктир
§
§
§
параграф
°
°
°
градус
µ
µ
µ
знак «мікро»
¶
¶
¶
знак абзацу
…
…
…
багатокрапка
‾
‾
‾
підкреслення
´
´
´
знак наголосу
№

№
знак номера
🔍

🔍
Лупа (нахилена вліво)
🔎

🔎
Лупа (нахилена праворуч)
знаки арифметичних та математичних операцій
×
×
×
помножити
÷
÷
÷
розділити
<
<

менше
>
>
>
більше
±
±
±
плюс мінус
¹
¹
¹
ступінь 1
²
²
²
ступінь 2
³
³
³
ступінь 3
¬
¬
¬
заперечення
¼
¼
¼
одна четверта
½
½
½
одна друга
¾
¾
¾
три чверті
⁄
⁄
⁄
дрібна риса
−
−
−
мінус
≤
≤
≤
менше або дорівнює
≥
≥
≥
більше або дорівнює
≈
≈
≈
приблизно (майже) одно
≠
≠
≠
не дорівнює
≡
≡
≡
тотожно
√
√
√
квадратний корінь (радикал)
∞
∞
∞
нескінченність
∑
∑
∑
знак підсумовування
∏
∏
∏
знак твору
∂
∂
∂
частковий диференціал
∫
∫
∫
інтеграл
∀
∀
∀
для всіх (видно тільки якщо жирним шрифтом)
∃
∃
∃
існує
∅
∅
∅
порожня безліч
Ø
Ø
Ø
діаметр
∈
∈
∈
належить
∉
∉
∉
не належить
∋
∋
∗
містить
⊂
⊂
⊂
є підмножиною
⊃
⊃
⊃
є надмножиною
⊄
⊄
⊄
не є підмножиною
⊆
⊆
⊆
є підмножиною або одно
⊇
⊇
⊇
є надмножиною або одно
⊕
⊕
⊕
плюс у гуртку
⊗
⊗
⊗
знак множення у гуртку
⊥
⊥
⊥
перпендикулярно
∠
∠
∠
кут
∧
∧
∧
логічне І
∨
∨
∨
логічне АБО
∩
∩
∩
перетин
∪
∪
∪
об'єднання
знаки валют
₽

₽
Рубель.  Знак рубля повинен використовуватись з відбивкою від числа.  Стандарт Юнікод 7.0.  Якщо Ви не бачите зображення, оновіть свої шрифти Unicode.
€
€
€
Євро
¢
¢
¢
Цент
£
£
£
фунт
¤
¤
¤
Знак валюти
¥
¥
¥
Знак ієни та юаня
ƒ
ƒ
ƒ
Флорин знак
маркери

.

простий маркер
○

○
коло
·
·
·
середня точка
†

†
хрестик
‡

‡
подвійний хрестик
♠
♠
♠
піки
♣
♣
♣
трефи



черви
♦
♦
♦
бубни
◊
◊
◊
ромб
✏

✏
олівець
✎

✎
олівець
✐

✐
олівець
✍

✍
рука
лапки
"
"
"
подвійна лапка
&
&
&
амперсанд
«
«
«
ліва друкарська лапка (лапка-ялинка)
»
»
»
права друкарська лапка (лапка-ялинка)
‹

‹
одиночна кутова лапка, що відкриває
›

›
одиночна кутова лапка, що закриває
′
′
′
штрих (хвилини, фути)
″
″
″
подвійний штрих (секунди, дюйми)
‘
‘
‘
ліва верхня одиночна лапка
’
’
’
права верхня одиночна лапка
‚
‚
‚
права нижня одиночна лапка
“
“
“
лапка-лапка ліва
”
”
”
лапка-лапка права верхня
„
„
„
лапка-лапка права нижня
❛

❛
одиночна англійська лапка, що відкриває
❜

❜
одиночна англійська лапка, що закриває
❝

❝
подвійна англійська лапка, що відкриває
❞

❞
подвійна англійська лапка, що закриває
стрілки
←
←
←
стрілка вліво



стрілка вгору
→
→
→
стрілка вправо
↓
↓
↓
стрілка вниз
↔
↔
↔
стрілка вліво та вправо
↕

↕
стрілка вгору і вниз
↵
↵
↵
повернення каретки
⇐
⇐
⇐
подвійна стрілка вліво
⇑
⇑
⇑
подвійна стрілка вгору
⇒
⇒
⇒
подвійна стрілка праворуч
⇓
⇓
⇓
подвійна стрілка вниз
⇔
⇔
⇔
подвійна стрілка вліво та вправо
⇕

⇕
подвійна стрілка вгору і вниз
▲

▲
трикутна стрілка вгору
▼

▼
трикутна стрілка вниз



трикутна стрілка праворуч
◄

◄
трикутна стрілка вліво
зірочки, сніжинки
☃

☃
Сніговик
❄

❄
Сніжинка
❅

❅
Затиснута трилисниками сніжинка
❆

❆
Жирна гострокутна сніжинка
★

★
Зафарбована зірка
☆

☆
Незафарбована зірка
✪

✪
Незафарбована зірка у зафарбованому колі
✫

✫
Зафарбована зірка з незабарвленим колом всередині.
✯

✯
Зірка, що обертається
⚝

⚝
Накреслена біла зірка
⚪

⚪
Середнє незафарбоване коло
⚫

⚫
Середнє зафарбоване коло
⚹

⚹
Секстилі (типу сніжинка)
✵

✵
Восьмикінцева зірка, що обертається
❉

❉
Зірочка з кулястими закінченнями
❋

❋
Жирна восьмикінцева краплеподібна зірочка-пропелер
✺

✺
Шістнадцятикінцева зірочка
✹

✹
Дванадцятикінцева зафарбована зірка
✸

✸
Жирна восьмикінцева прямолінійна зафарбована зірка
✶

✶
Шестикутна зафарбована зірка
✷

✷
Восьмикінцева прямолінійна зафарбована зірка
✴

✴
Восьмикінцева зафарбована зірка
✳

✳
Восьмикінцева зірочка
✲

✲
Зірочка з незафарбованим центром
✱

✱
Жирна зірочка
✧

✧
Загострена чотирикінцева незафарбована зірка
✦

✦
Загострена чотирикінцева зафарбована зірка
⍟

⍟
Зірка у колі
⊛

⊛
Сніжинка у колі
годинник, час
⏰

⏰
Годинник
⌚

⌚
Годинник
⌛

⌛
Пісочний годинник
⏳

⏳
Пісочний годинник
Існує досить цікавий спосіб отримання коду Htmlмнемонікдля потрібного вам знака.  Для цього достатньо буде відкрити редактор Microsoft Word, створити новий документі вибрати з верхнього меню"Вставка" - "Символ" (я користуюся 2003 версією, тому не знаю як зробити аналогічну операцію в пізніших версіях).
У вікні вам потрібно вибрати шрифт, наприклад, Times New Roman (або будь-який інший, який свідомо буде присутній на більшості комп'ютерів відвідувачів вашого сайту - Courier або Arial, наприклад).
Додайте зі списку до свого документ Wordвсі необхідні вам спецсимволи і збережіть цей ордівський документ як веб-сторінку (вибирається зі списку «.html» при збереженні).  Ну, а потім вам лише залишиться відкрити цю веб сторінку в будь-якому HTML редакторі(все той же Notepad++ підійде) і ви побачите все цифрові кодипотрібних вам мнемонік:
Спосіб трохи складний, але якщо закортить використовувати на сторінці свого сайту якийсь рідкісний спецсимвол, то це буде простіше, ніж відшукувати в мережі інтернет таблиці, подібні до наведеної трохи вище.  Отриманий код спецсимволу вам потрібно буде вставити в потрібне місцеі замість нього на веб-сторінці браузер відобразить потрібний вам знак (наприклад, нерозривний пробіл).
Нерозривна прогалина та м'яке перенесення в прикладах
Як я вже згадував вище та як ви можете бачити з наведеної трохи вище таблиці спецсимволів, деякі мнемоніки у Html отримали крім цифрового ще й символьне позначення для них більше простого запам'ятовування.  Тобто.  замість знака решітки "#" (хеша) у символьних варіантах використовуються слова.  Наприклад, той самий нерозривний пропуск може бути записаний або як (цифрова мнемоніка), або як (символьна).
При написанні статей, якщо вам потрібно вставити в текст документа знак амперсанда (&) або кутової дужки (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.
Тобто, якщо ви пишіть статтю, в якій вам потрібно буде вставити в текст, наприклад, відображення тега< body>або ж вам просто потрібно вставити знак менше (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.
Тому вам потрібно буде вставити для вирішення такого завдання наступну конструкцію:
Те саме стосується і відображення коду самих мнемонік, бо вони починаються з амперсанда.  Вам потрібно буде вставити в текст код із заміною знака амперсанда на його підстановку (спецсимвол):
 Це потрібно буде зробити, щоб отримати на сторінці<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.
Також ви швидше за все буде використовувати нерозривний пробіл, який на веб-сторінці буде виглядати як звичайний пробіл, але при цьому браузер не сприйматиме його як пробіловий символ взагалі і не здійснюватиме за ним перенесення(наприклад, це буде доречно для таких словосполучень, як 1400 гБ і т.п., які не бажано розносити переносом по різних рядках):
1400 ГБ.
Іноді може виникнути зворотна ситуація, коли в тексті є дуже довгі слова і хочеться зробити так, щоб при виникненні необхідності браузер міг би розбивати це слово переносом.  Для таких цілей передбачено спецсимвол «м'яке перенесення» -
Довгепредлинне слово;
При виникненні необхідності переходу на інший рядок, браузер замість мнемоніки м'якого перенесення поставить дефіс і відправить частину слова, що залишилася, на наступний рядок.  Якщо місця для розміщення цього слова на одному рядку буде достатньо, то ніякого перекладу рядка браузер малювати не буде.  Ось так усе просто.
 Удачі вам!  До швидких зустрічей на сторінках блогу сайт
подивитися ще ролики можна перейшовши на
");">
Вам може бути цікаво
MailTo - що це і як у Html створити посилання для відправки Емейла 
Теги та атрибути заголовків H1-H6, горизонтальної лінії Hr, перенесення рядка Br та абзацу P за стандартом Html 4.01 
Як вставити в HTML посилання та картинку (фото) - теги IMG та A
Машинописний текст складається з друкованих знаків – графічних символів. 
Графічні символи - це символи, що мають у тексті видиме відображення. 
Усі графічні символи зібрані у наборі єдиної універсальної системи Юнікод. 
Вставити графічний символ Юнікод у html-документ 
- головне та єдине призначення для цієї таблиці.
Вставити символ у html-документ можна одним із способів:
скопіювати зображення символу із вікна браузера у вікно свого візуального html-редактора
скопіювати html-код символу безпосередньо в код html-документа
Вгамовуємо, що це два різні способи: вставляти візуальне у візуальне
вставляти код у код.
Шрифт для символу, його розмір і колір HTML можна задати кодом, виду: 
 КОД_СІМВОЛА 
де, 
Arial - шрифт, 
10px - розмір шрифту в пікселях, 
#ff0000 - код кольору шрифту (червоний)
Наприклад: 
☎ - розмір шрифту символу 30px, 
☎ - розмір шрифту символу 30px, колір - червоний 
☎ - розмір шрифту символу 20px, 
☎ – розмір шрифту символу 10px. 
Прим.  Рекомендовані шрифти для вставки спецсимволів - Arial, Verdana та Tahoma.  Ці шрифти коректно відображають символи Юнікод і самі, у свою чергу, коректно підтримуються веб-додатками.
«Символ»
(видиме відображення символу) 
З цієї графи можна скопіювати зображення символу та вставити його у вікно текстового html-редактора.  Символ скопіюється з розміром шрифту 20px.  Після завершення копіювання може знадобитися індивідуальне припасування розміру шрифту безпосередньо для скопійованого знака.
«Найменування»
(тільки для важливих чи незрозумілих символів) 
Пояснення призначення символу, його сфера застосування, приклади...
«Мнемоніка»
Мнемоніка - це буквена конструкція виду", що позначає буквений код символу в HTML. Вставляється безпосередньо в html-код html-документа.  ) свого символу і службовий знак (&), який служить сигналом до прочитання коду для браузера і не відображається на екрані монітора. Мнемоніка (грец.) - Мистецтво запам'ятовувати що-небудь.  Мнемотехніка застосовується для полегшення сприйняття інформації, що важко запам'ятовується, коли об'єкт запам'ятовування приводиться в асоціативний стан з чим-небудь.
«Код»
Код - числовий десятковий код символу HTML, виду &.  Вставляється безпосередньо в HTML-код HTML-документа.  Числовий десятковий код складається з числа, що позначає порядковий номер символу в системі Юнікод і кількох службових знаків (& і #), які є сигналом до прочитання коду для браузера і не відображаються на екрані монітора.  Числовий десятковий код має широке поширення та застосування, завдяки своїй універсальності та простоті сприйняття.
Символи керування в HTML (XHTML)
Символи керування в HTML (XHTML) – це службові символи HTML-мови, які використовуються при HTML-верстці веб-сторінки.  Ці символи повинні підтримувати будь-який браузер, оскільки без них неможливе правильне відображення HTML-тексту.  Символи керування не відображаються в тексті і, при прямому введенні з клавіатури - інтерпретуються браузером як розділові знаки, що закликають до виконання будь-якої дії при відображенні сторінки на екрані.
Дозволяється використовувати символи управління у звичайних текстах, де вони символізують загальнолюдські поняття та трактуються браузером як звичайні друкарські знаки.  У разі використання службових символів у HTML-текстах потрібно вводити не значення самого символу, саме його HTML-код.  Бо, повторюю - інакше браузер сприйматиме службовий символ, як заклик до дії і не коректно відображатиме HTML-текст на екрані монітора.
Символи керування та їх HTML-код знають і розуміють всі браузери без винятку, чого не можна сказати, на жаль - про інші знаки, які можуть відображатися некоректно в різних браузерах або, що ще гірше, - не відображатися зовсім.
Синтаксис та пунктуація









пропуск довжини N (звичайний пропуск)
 

 



пробіл довжини M (довга пробіл)
 

 




 

 

-

м'яке перенесення (недрукований знак)
-



‑

дефіс


 
 ‑

-

тире довжини N (звичайне тире)
-

–

—

тире довжини M (довге тире)
—

—

.

крапка


.

,

кома


,

…

багатокрапка
…

 
…

:

двокрапка


:

;

крапка з комою


;

!

знак оклику


!
ǃ

?

знак запитання


?

@

«собачка»


@

*

«зірочка»


*

#

«решітка»


#

‘

одиночна верхня ліва лапка
‘

 
‘

’

одиночна верхня права лапка
’

 
’

‚

одиночна нижня права лапка
‚

 
‚

“

подвійна верхня ліва лапка
“

 
“

”

подвійна верхня права лапка
”

 
”

„

подвійна нижня права лапка
&bdquo
 
„

«

подвійна ліва кутова лапка (рус)
«

«

»

подвійна права кутова лапка (рус)
»

»

́

знак наголосу, приклад: Вася́


́

"

апостроф, приклад: Вас"я


"

´

акут, приклад: Вася
´

´

¶

абзац (недрукований знак)
¶

¶

§

параграф
§

§

ˆ

акцент (перевернута пташка)
ˆ

 
ˆ

˜

мала тільда
˜

 
˜

¦

вертикальний пунктир
¦

¦

(
кругла дужка вліво


(
)

кругла дужка праворуч


)

〈

кутова дужка вліво
〈

〈

〉

кутова дужка вправо
〉

〉

‹

кутова дужка вліво, варіант
‹

‹

›

кутова дужка вправо, варіант
›

›

[

квадратна дужка вліво


[

]

квадратна дужка праворуч


]

/

слеш (slash) - символ косої межі


/

\

зворотний слеш (backslash)


\

⁄

коса дробова риса (знак поділу)
⁄

⁄

ǀ

вертикальна риса


ǀ

ǁ

подвійна вертикальна характеристика


ǁ

‾

накреслення, приклад: Вася‾вася
‾

‾

¯

macron, приклад: Вася?вася
¯

¯

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

плюс
+

+

−

мінус
−

-
−

=

одно


=

±

плюс мінус
±

±

×

знак множення
×

×

÷

знак розподілу
÷

÷

⋅

оператор «точка» (середина рядка)
⋅

· 
⋅

∗

оператор «зірочка» (середина рядка)
∗

∗

∼

оператор «Тільда»
∼

∼

.

маркер списку (середина рядка)
.

 

¹

верхній індекс "1"
¹

¹

²

верхній індекс "2"
²

²

³

верхній індекс "3"
³

³

Надрядковий та підрядковий індекс у HTML (XHTML) 
можна вставити за допомогою тегів ^{і _{відповідно: 
ЧИСЛО ^{Надрядковий індекс}→ ЧИСЛО Надрядковий індекс 
ЧИСЛО _{Підрядковий індекс}→ ЧИСЛО Підрядковий індекс}}
½

дріб «одна друга»
½

½

⅓

дріб «одна третина»


⅓

¼

дріб «одна четверта»
¼

¼

¾

дріб «три чверті»
¾

¾

№

знак номера


№

%

відсоток


%

‰

проміле
‰

 
‰

°

градуси
°

°

′

штрих (хвилини, фути)
′

′

″

подвійний штрих (секунди, дюйми) 
Приклад 1: 30° 25′ 12″ 
Приклад 2: 25′ 12 ″



″

″

µ

мікро
µ

µ

π

Пі
π

π

ƒ

знак функції 
(Не плутати з «інтеграл»)
ƒ

 
ƒ

∫

інтеграл
∫

∫

∅

перекреслений нуль, порожня множина 
(Не плутати з «діаметр»)
∅

∅

⌀

діаметр (не плутати з перекресленою латинською «про»)


⌀

ø

латинська "o" діагонально перекреслена
ø

ø

Ø

латинська заголовна "O" діагонально перекреслена
Ø

Ø

∏

знак твору
∏

∏

∑

знак підсумовування
∑

∑

√

радикал 
(квадратний корінь або корінь ступеня x)
√

√

∝

пропорційно
∝

∝

∞

нескінченність
∞

∞

∠

кут
∠

∠

⊥

ортогонально (перпендикулярно)
⊥

⊥

∴

знак «відтак»
∴

∴

≅

приблизно одно
≅

≅

≈

майже одно
≈

≈

≠

не дорівнює
≠

≠

≡

ідентично
≡

≡

≤

менше або дорівнює
≤

≤

≥

більше або дорівнює
≥

≥

∧

логічне І
∧

∧

∨

логічне АБО
∨

∨

⊕

знак «плюс у колі» 
(Пряма сума)
⊕

⊕

⊗

знак «множення у колі» 
(Векторний твір, стріла від спостерігача)
⊗

⊗

ʘ

точка у колі 
(Стріла на спостерігача)


ʘ























































































































































































































































































✵
✵