HTML і текст

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

Посилання

Мабуть, HTML міг би існувати без будь-якого тегу, окрім тегу посилання — <a>, бо цей тег уособлює в собі весь сенс HTML. Зокрема, перші дві літери “HT” (HyperText) — це якраз про посилання, адже його повна і офіційна назва “гіпертекстове посилання” або гіперпосилання.

Цей тег вже фігурував в главі “Основи HTML”, в якості приклада тегу з атрибутом. Але він не такий простий, як може здаватися на перший погляд та і не такий складний, щоб щось не зрозуміти.

Найпростіше посилання

Ми вже розбирали такий елемент, але я нагадаю ще раз, як він виглядає:

<a href="https://ebaboon.me">Притомний фронтенд</a>

Значення атрибута href вказує адресу веб-сайта, на яку перейде браузер, якщо клацнути на таке посилання. Як видно, в прикладі це сайт "https://ebaboon.me". Окрім цього, посилання має ще текстовий контент, який бачить користувач на сторінці, тут це “Притомний фронтенд”.

Посилання, що зовсім не гіперпосилання

Насправді, можливості тегу <a> давно вийшли за рамки класичного розуміння гіперпосилань, і зараз цей тег вміє відкривати не тільки сайти, а і е-пошту, і навіть набирати телефонний номер!

Подивіться приклад нижче з комп’ютера і з телефона та клацніть на посилання в обидвох випадках.

See the Pen HTML: Tag a by Epic Baboon (@ebaboon) on CodePen.

Якщо значення атрибута href починається з mailto:, то браузер спробує викликати програму, що створить електронного листа, замість того, щоб відкрити таку веб-сторінку. Як ви могли зрозуміти з прикладу, лист буде створено з адресою, що вказана відразу після mailto:, тобто ebaboon@suremail.info. Чекаю на ваші палкі листи! (Ні).

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

Посилання на елемент

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

В якості прикладу розберемо посилання до цього розділу. І почнемо з адреси посилання:

https://ebaboon.me/html/html-and-text.html#Посилання-на-елемент

Адреса посилання (або URL) на елемент складається із:

• посилання на сторінку — https://ebaboon.me/html/html-and-text.html,
• #
• ідентифікатор елемента — Посилання-на-елемент.

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

<h3 id="Посилання-на-елемент">Посилання на елемент</h3>

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

Власне, посилання до цього елемента виглядає так:

<h3 id="Посилання-на-елемент">Посилання на елемент</a>

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

<a href="https://ebaboon.me/html/html-and-text.html#Посилання-на-елемент`">Посилання на елемент</a>

Правильне зовнішнє посилання

Чи звертали ви увагу на те, що деякі посилання відкриваються в новій табі бразера, а деякі — в поточній, замість попередньої сторінки? В чому сенс?

В вебі розрізняють внутрішні і зовнішні посилання. Внутрішні — це посилання на сторінки в рамках одного сайту, наприклад, навігація “Притомного” містить внутрішні посилання, бо всі вони ведуть на його власні сторінки. А зовнішні посилання ведуть на інші сайти.

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

Мабуть, ви вже помічали, що на сайті “Притомного” є посилання, що мають стрілочку в кінці:

Притомний фронтенд

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

Як досягти такого ефекту? В арсеналі тегу <a>, окрім іншого, є атрибут target, в який можна підставити значення _blank. Воно змінить поведінку посилання таким чином, що посилання буде відкриватися в новій табі, при цьому поточна таба не буде закрита.

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

See the Pen HTML tag a by Epic Baboon (@ebaboon) on CodePen.

Заголовки

Заголовки — це базові і одні із найважливіших тегів в HTML. Існують 6 рівнів заголовків: від <h1> по <h6> відповідно, де <h1> — це заголовок-бос найвищого рівня.

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

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

See the Pen HTML Headings by Epic Baboon (@ebaboon) on CodePen.

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

Розміщуючи заголовки на веб-сторінці, потрібно дотримуватися декількох простих правил:

1. Один <h1> на сторінку!

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

   <!DOCTYPE html>
   <html lang="en" dir="ltr">
   <head>
       <meta charset="UTF-8"/>
       <title>United Kingdom - Wikipedia</title>
       ...
   </head>
   <body class="mediawiki ...">
       ...
       <div id="content" class="mw-body" role="main">
           <h1 id="firstHeading" class="firstHeading mw-first-heading">
               <span class="mw-page-title-main">United Kingdom</span>
           </h1>
       </div>
       ...
   </body>
   </html>
   

   Всього один <h1> на сторінку, хоча стаття дуже велика і має розгалуджену структуру. І як ви вже зрозуміли, <h1> використовується для головної назви на сторінці.

2. Структура заголовків повинна бути ієрархічною.

   Це означає, що рівні заголовків повинні йти послідовно, один за одним.

   ❌ Так не треба:

   <h1>Заголовок 1</h1>
   <h3>Заголовок 3</h3>
   <h4>Заголовок 4</h4>
   

   ✔️ Треба так:

   <h1>Заголовок 1</h1>
   <h2>Заголовок 2</h2>
   <h3>Заголовок 3</h3>
   

3. Заголовок нижчого рівня не може йти перед заголовком вищого рівня.

   ❌ Так не треба:

   <h2>Заголовок 2</h2>
   <h1>Заголовок 1</h1>
   

   ✔️ Треба так:

   <h1>Заголовок 1</h1>
   <h2>Заголовок 2</h2>
   

Іноді буває потреба об’єднати декілька заголовків або заголовок і абзац у групу. Семантично найкраще для цього підійде тег <hgroup>.

Абзаци і преформатований текст

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

Абзац

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

See the Pen HTML Element by Epic Baboon (@ebaboon) on CodePen.

Начебто все окей, але є одне древнє прокляття 👻 пов’язане з ним. Дивіться, що буде, якщо спробувати розмітити віршик:

See the Pen Untitled by Epic Baboon (@ebaboon) on CodePen.

Чомусь весь віршик в один рядок, хоча записаний в стовпчик. Браузер просто ігнорує переноси рядків.

Преформатований текст

Така поведінка, як у тега <p> може додати зайвих проблем, якщо треба зберегти первісний вигляд тексту. Для цього використовують тег для преформатованого тексту, тобто такого, що має зберегти своє первісне форматування.

Тег <pre> дозволяє розмітити текст так, щоб він точнісінько повторював ту структуру тексту, що описана в документі:

See the Pen Untitled by Epic Baboon (@ebaboon) on CodePen.

See the Pen HTML Practice: pre by Epic Baboon (@ebaboon) on CodePen.

Особливі символи в HTML

HTML-мнемоніки

А от що справді викликає колізії в HTML, то це ситуації, коли в тексті потрібно використати символ <, або >. Бо цей символ є частиною тегу, і браузер не в змозі відрізнити, коли ви використовуєте ці символи просто в тексті, а коли він — частина тегу.

See the Pen HTML Entities by Epic Baboon (@ebaboon) on CodePen.

🚧 Цей HTML зламався, несіть новий!

Щоб все працювало як треба, використовують такі штуки, як HTML-мнемоніки (англ. HTML Entities) — це спеціальні кодування, що перетворюються браузером на різні символи, типу ‱, §, ∞ тощо.

Будуються мнемоніки наступним чином:

& + ‘код із літер’ + ;

або

& + ‘# + цифри’ + ;

Мнемоніки є невід’ємною частиною HTML і його складовою. Отже, запишемо знак < за допомогою мнемоніки <:

See the Pen HTML Entities by Epic Baboon (@ebaboon) on CodePen.

Особливо уважні вже побачили використання мнемоніки < у прикладі з коровою. Хто знайшов — молодець, ось вам медалька 🏅.

Юнікод і Емодзі

Більшість HTML-мнемонік може бути замінена символами Юнікоду, тобто звичайними символами (гліфами) із шрифту, що підтримує Юнікод. Це спрощує роботу з особливими символами і зменшує кількість символів в документі, а відповідно і його об’єм, що позитивно впливає на швидкість завантаження.

В прикладі я навів три варіанти запису символа копірайту — ©:

See the Pen HTML Unicode by Epic Baboon (@ebaboon) on CodePen.

Як це не дивно, але добре відомі вам Емодзі — це теж частина Юнікоду і так само легко можуть бути використані в HTML, як і знак копірайту із попереднього прикладу 👍.

See the Pen HTML Practice: Formatting by Epic Baboon (@ebaboon) on CodePen.

Форматування тексту

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

Виглядє і працює воно цілком очікувано:

See the Pen HTML Formatting by Epic Baboon (@ebaboon) on CodePen.

Особливості використання <b> і <strong> та <i> і <em>

На що треба звернути увагу, так це на пари тегів <b> і <strong>, а також на <i> і <em>. Дуже легко сплутати, який де треба використати. Теги в кожній парі мають однаковий візуальний ефект, але вони різні за семантикою. Точніше, у <b> і <i> вона настільки бліда, що її майже немає, як такої. Їх сутність в тому, щоб просто міняти зовнішній вигляд шрифту на жирний і курсив відповідно.

А от теги <strong> і <em> призначені для семантичного виділення контенту:

• <strong> — для тексту високої важливості,
• <em> — для тексту, на якому треба акцентувати увагу, виділити на тлі іншого тексту.

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

See the Pen HTML tags em i b strong by Epic Baboon (@ebaboon) on CodePen.

Форматування уривка статті

Настав час пригадати все, що ви прочитали про HTML до цього моменту!

Додайте до цього сумного шматка тексту всі необхідні теги, щоб він почав виглядати як пристойний HTML! У вас для цього достатньо знань і навичок, але дещо я додам від себе: щоб світлина не вилазила за край вікна, додайте такий атрибут — width="100%".

See the Pen HTML Practice: Formatting by Epic Baboon (@ebaboon) on CodePen.

Списки

Любителям списків сюди 🙋‍♂️. Якщо всі зібрались, то поїхали!

HTML підтримує 3 види списків:

• нумерований <ol>,
• ненумерований <ul>
• і дивний — список визначень <dl>.

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

See the Pen Untitled by Epic Baboon (@ebaboon) on CodePen.

Навігація і списки

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

Для побудови меню використовується семантичний тег <menu> iз внутрішніми тегами <li>, а для побудови навігаційного меню — <nav>. І хоч останній і дозволяє використовувати всередині себе елементи списків, але він також дозволяє використовувати і просто посилання — <a>.

Порада

Я рекомендую використовувати теги списків тільки для інформації, яку треба подати у вигляді списку.

Мабуть, єдиним вийнятком буде випадок, типу, як “Зміст” в цій статті. Такий елемент статті одночасно є і списком розділів і навігацією, для спрощеного доступу до кожного розділу.

Як себе перевірити: якщо забрати із списку функцію навігаціїї, він все ще буде корисним як список?

Цитування

Чомусь HTML має забагато, як на мою думку, тегів для цитування тексту. З одного боку, вони начебто всі потрібні, але різниця між деякими настільки тонка, що треба кожного разу звертатися до документації, щоб обрати потрібний. Кожен раз дивлюся який із цих вибрати: <blockquote>, <q> або <cite>.

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

See the Pen HTML Quotation and Citation by Epic Baboon (@ebaboon) on CodePen.

Код

В інтернеті повно статей технічного характеру, що пов’язані з програмуванням, і ця — одна з них. Частенько в таких статтях приводяться приклади коду, програмного виводу тощо. Такий контент теж має свої власні теги для розмітки. Наприклад, в цій статті, прямо тут є така розмітка, що описує рядок коду:

let x = 42;

HTML-код цього елемента виглядає так (поки що ігноруйте атрибути class, це стилістичний атрибут, що конкретно тут допомагає розфарбовувати синтаксис):

<code class="language-js hljs javascript">
    <span class="hljs-keyword">let</span> x = <span class="hljs-number">42</span>;
</code>

Ця підгрупа тегів, що допомагають форматувати інформацію технічного характеру, за своєю поведінкою і первісним зовнішнім виглядом дуже нагадують тег <pre>:

See the Pen HTML tags for code by Epic Baboon (@ebaboon) on CodePen.

Таблиці

Один із “найсемантичніших” тегів, важко навіть уявити, як таблицю можна використати якимось іншим чином, ніж для відображення табличних даних. Але був період в вебі, коли близько 100% сайтів були зроблені цілком з таблиць, бо браузери того часу однозначно інтерпретували тільки розмітку таблиць в якості розмітки структури документа.

Та не будем згадувати ті темні часи, зараз таблиці — це просто таблиці.

Найпростіша таблиця

Кореневим тегом таблиці є тег <table>. В найпростішому варіанті, всередині нього розміщуються теги, що розмічають рядки таблиці — <tr>, в яких, в свою чергу, мають розміщуватися теги комірок, в тій кількості, скільки у вас стовпчиків в таблиці — <td>. Для тих комірок, що містять заголовки колонок використовують тег <th>.

<table>
    <tr>
        <th>Ім'я</th>
        <th>Прізвище</th>
    </tr>
    <tr>
        <td>Сергій</td>
        <td>Притула</td>
    </tr>
    <tr>
        <td>Тарас</td>
        <td>Чмут</td>
    </tr>
</table>

Працює це так:

See the Pen HTML Simple Table by Epic Baboon (@ebaboon) on CodePen.

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

Більш складна таблиця

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

See the Pen HTML Tables by Epic Baboon (@ebaboon) on CodePen.

Зверніть увагу на атрибут colspan="2" в першій комірці заголовку таблиці, він використовується для того, щоб об’єднати комірки. Якщо ви подивитесь на кількість комірок в <tbody>, то побачите, що їх там 3, а кількість комірок в <thead> — 2, але завдяки атрибуту colspan="2" відбувається об’єднання двох (значення атрибуту) комірок.

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

Це мінімально необхідна інформація, що стосується таблиць, ми ще неодноразово будемо розглядати таблицю в різних темах цього посібника, тому не засмучуйтесь, що інші цікаві властивості таблиці будуть в майбутньому. Як кажуть люди: “Stay hungry, stay foolish.”

Все разом

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

• Найважливіші з них: заголовки <h1>–<h6>, абзац <p>.

• HTML має свій власний механізм HTML-мнемонік, який дозволяє використовувати спеціальні символи. Більшість із цих символів можна замінити символами Юнікоду.

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

Корисні посилання

• Докладна стаття про заголовки від MDN.
• Довідник тегів форматування тексту від W3Schools.
• Різниця між <i> і <em> та між <b> і <strong> від MDN.
• Списки від W3Schools.
• Про цитування від W3Schools.
• Бібліотека Емодзі та символів Юнікоду.
• HTML-мнемоніки від W3Schools.
• Базово про таблиці на MDN.
• Докладно про таблиці на MDN.
• Перший-ліпший генератор таблиць.

Домашнє завдання

Зробіть всі практичні завдання в статті:

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

І виконайте наступні завдання від W3Schools:

• HTML Посилання 1, 3, 4, 5
• HTML Заголовки з 1 по 3
• HTML Абзац і Преформатований текст з 3 по 5
• HTML Форматування з 1 по 5
• HTML Цитування 1, 2 і 4
• HTML Світлини 1, 5, 6
• HTML Таблиці 1, 2, 4, 5, 6
• HTML Код з 1 по 3