Робота з текстом

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

Особливості тексту в HTML

Перед тим як редагувати код веб-сторінки, слід взяти до уваги деякі особливості, які притаманні HTML при роботі з текстом.

Будь-яка кількість пробілів, які йдуть підряд, в браузері відображається як один

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

See the Pen abzpgbp by NataliiaKINSEL (@persifal17) on CodePen.

Винятком з цього правила є елемент <pre>, вміст якого матиме такий самий вигляд, як воно зазначено в коді, з урахуванням всіх прогалин. З цієї причини <pre> часто застосовується для фрагментів програм, де важливі пробіли (приклад 1).

Приклад 1. Використання <pre>

See the Pen abzpgbp by persifal17 (@persifal17) on CodePen.

Результат даного прикладу показаний на рис. 1.

Текст займає всю ширину вікна браузера

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

Абзаци

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

See the Pen abzpgbp by persifal17 (@persifal17) on CodePen.

Кожен абзац починається з відкриваючого тега <p> і закінчується закривним тегом </p>. У прикладі 2 показано застосування декількох абзаців.

Приклад 2. Використання абзаців

See the Pen abzpgbp by persifal17 (@persifal17) on CodePen.

Як видно з наведеного рисунка, при використанні елемента <p> між абзацами виникають відступи. Від них можна позбутися, якщо в місцях перенесення рядків додати елемент <br>. На відміну від абзацу, <br> НЕ створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому тексті.

Так, текст прикладу 1 з урахуванням перенесення рядків буде перетворений так (приклад 3).

Приклад 3. Використання <br>

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

See the Pen abzpgbp by persifal17(@persifal17) on CodePen.

Врахуйте, що один абзац не можна вкладати всередину іншого.

Заголовки

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

У HTML для заголовків є шість елементів від <h1> до <h6>. Елемент <h1> визначає заголовок першого рівня, він найбільш значимий і застосовується зазвичай для заголовків статтей або постів блогу. Елемент <h2> визначає заголовок другого рівня, він використовується, як правило, для підзаголовків. Останнім за ієрархією йде <h6>.

Синтаксис створення заголовків показаний в прикладі 4.

Приклад 4. Додавання заголовків

See the Pen abzpgbp by persifal17 (@persifal17) on CodePen.

Вміст елемента <h1> відображається найбільшим жирним шрифтом, а <h6> - найдрібнішим.

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

Верхній і нижній індекси

Індексом по відношенню до тексту називається зміщення символів щодо базової лінії вгору або вниз (рис. 1). Залежно від положення, індекс називається, відповідно, верхнім або нижнім. Вони активно застосовуються в математиці, фізиці, хімії і для позначення одиниць виміру. HTML пропонує два елементи для створення індексу: <sup> - верхній індекс (від англ. Superscript) і <sub> - індекс нижній (від англ. Subscript). Текст всередині цих елементів позначається меншим розміром, ніж звичайний текст, і зміщується вгору або вниз.

Рис. 1. Базова лінія тексту

У прикладі 5 показано застосування нижнього індексу для хімічної формули.

Приклад 5. Використання нижнього індексу

See the Pen abzpgbp by persifal17 (@persifal17) on CodePen.

У прикладі 6 показано застосування верхнього індексу для математичної формули.

Приклад 6. Використання верхнього індексу

See the Pen abzpgbp by persifal17 (@nataliiakinsel) on CodePen.

Спеціальні символи

Перевагою кодування UTF-8 є те, що вона дозволяє безпосередньо вставляти символи, яких на клавіатурі немає, наприклад знаки зодіаку. На сайті utf8icons.com ви можете знайти безліч різних символів, скопіювати їх і вставити в свій код HTML. Головне, щоб текстовий редактор підтримував кодування UTF-8.

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

Табл. 1. Спецсимволи

<	Знак «менше»
>	Знак «більше»
"	Лапки
&	Амперсанд
 	Нерозривний пробіл
­	М'який перенос

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

Таким чином, щоб вивести код HTML, в тексті ми використовуємо такий запис (приклад 7).

Приклад 7. Використання спецсимволів

See the Pen abzpgbp by persifal17(@persifal17) on CodePen.