Використання пробільних символів для форматування коду HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Крім того, щоб відобразити в браузері не сам знак амперсанда, а його позначення у вигляді &lt;footer&gt;, потрібно додати з таблиці його код:

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

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

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

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

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

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

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

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

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

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

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

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

Матеріал надано Goldbusinessnet.com