Розмітка тексту

Абзац

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

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
  eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
  asperiores non temporibus ut nisi minima?
</p>

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

Корисно

В редакторі VSCode, в HTML-документі можна набрати код lorem10, після чого натиснути клавішу Tab. Це створить масив тексту з 10 слів. Замість 10 можна поставити будь-яке число.

Заголовки

Група тегів <h1>...<h6> - визначає текстові заголовки смислових розділів різного рівня, які вказують на важливість секції контенту, розташованого після них. Це інструмент структурування текстового контенту.

Тег <h1> найчастіше використовується тільки один раз, як основний заголовок сторінки. Решта заголовків можуть використовуватися скільки завгодно разів, але їх завжди слід застосовувати правильно, дотримуючись ієрархії.

Корисно

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

Списки

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

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

Використовується для перерахування дій в певному порядку, наприклад рецепт.

<h1>Як заварити чай</h1>
<p>Покрокова інструкція для чайників, просто повтори і у тебе все вийде!</p>

<ol>
  <li>Закип'ятити воду</li>
  <li>Засипати чай в чашку</li>
  <li>Налити в чашку окріп</li>
  <li>Чекати 10 хвилин, після чого можна пити</li>
</ol>

Тег <ul> - створює маркований (невпорядкований) список, кожен елемент якого починається з невеликого символу (маркера). За допомогою CSS маркер можна прибрати або замінити.

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

<h1>Найгарячіші курорти</h1>
<p>Цього року експерти рекомендують відвідати наступні локації.</p>

<ul>
  <li>Туніс</li>
  <li>Туреччина</li>
  <li>Греція</li>
  <li>Єгипет</li>
</ul>

Увага

За специфікацією в теги <ul> і <ol> можна вкладати тільки елементи списку - теги <li>. Водночас, всередині тегів <li> можуть бути вкладені інші довільні теги.

Вкладені списки

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

<ul>
  <li>
    Комп'ютери та комплектуючі
    <ul>
      <li>Процесори</li>
      <li>Монітори</li>
      <li>Відеокарти</li>
    </ul>
  </li>
  <li>
    Побутова техніка
    <ul>
      <li>Холодильники</li>
      <li>Телевізори</li>
      <li>Пральні машини</li>
    </ul>
  </li>
  <li>
    Товари для дому
    <ul>
      <li>Крісла</li>
      <li>Матраци</li>
      <li>Електрокаміни</li>
    </ul>
  </li>
</ul>

Посилання

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

Адреса посилання задається в обов'язковому атрибуті href="адреса". Адреса - це URL,яка може вказувати на сторінку, файл, будь-який ресурс.

<a href="https://google.com">Посилання на головну сторінку Google</a>

Атрибути target і rel

За замовчуванням посилання відкривається в поточній вкладці браузера. Атрибут target="значення" визначає те, в який вкладці повинен відкриватися документ, на який веде посилання. Якщо значення - _blank, сторінка відкривається у новій вкладці браузера.

Атрибут rel доповнює атрибут href інформацією про відношення між поточним і пов'язаним документом, і використовується в парі з target="_blank".

<!-- Посилання на зовнішній ресурс, відкриється в поточній вкладці -->
<a href="https://www.facebook.com/">Facebook</a>

<!-- Посилання на зовнішній ресурс, відкриється у новій вкладці -->
<a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
  Facebook
</a>

Атрибут download

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

Атрибут download="ім'я файлу" повідомляє браузеру, що зазначений ресурс не повинен відкриватися, а завантажуватися в момент, коли користувач клікне на посилання. Значення атрибута задає ім'я файлу, що завантажується, тобто можна змінити ім'я під час завантаження. Атрибут можна використовувати без вказівки значення, тоді буде використано ім'я оригінального файлу.

<!-- Посилання на завантаження файлу -->
<a href="/путь/к/cv.pdf" download>Завантажити резюме</a>

Спеціальні значення href

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

<!-- Посилання на телефонний номер -->
<a href="tel:+14251234563">+1 (425) 123-45-63</a>

<!-- Посилання на адресу електронної пошти  -->
<a href="mailto:example@mail.ua">example@mail.ua</a>

Посилання-якір

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

Для створення якоря необхідно додати тег, до якого ми хочемо проскролити сторінку, атрибут id - унікальний ідентифікатор. А атрибуту href у посилання задати значення, що починається з символу #, після якого вказаний ідентифікатор елемента.

Кнопка

Інтерактивний елемент, який оживляється за допомогою JavaScript. Наприклад, кнопка відкриття і закриття спливаючого вікна, перемикання мобільного меню або відправлення форми. Необхідно явно вказувати атрибут type. Його значення за замовчуванням - submit, але, найчастіше потрібне значення button. Так, кнопка типу «кнопка» - така особливість.

<button type="button">Відкрити модальне вікно</button>

Корисно

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

Атрибут lang

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

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Інструкція по експлуатації пиріжків" />
    <title>Пиріжки - це смачно!</title>
  </head>
  <body>
    <p>Інструкція з експлуатації</p>
    <p lang="en">Operating instructions</p>
    <p lang="fr">Manuel d'utilisation</p>
  </body>
</html>

Увага

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