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

Тег <p> - абзац (paragraph)

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

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Blanditiis quo repellendus quia, odit quaerat iure eius 
  optio minus velit quis maxime reiciendis quasi libero 
  laboriosam.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Officia illo obcaecati amet necessitatibus suscipit impedit 
  cupiditate quod aliquid rerum aperiam, velit totam, 
  accusantium et facilis.
</p>

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

Теги <h1>... <h6> - заголовки​ (header)

Це текстові заголовки. Їх є 6 різновидів. Від <h1> до <h6> - від найвагомішого до менш вагомих. Заголовки часто застосовують для структурування текстового контенту. Мають стилі за замовченням, але їх можна змінити за допомогою CSS, що буде розглянуто в наступних розділах.

Резервний код

<h1>Header 1</h1>
<p>Just some text</p>
<h2>Header 2</h2>
<p>Just some text</p>
<h3>Header 3</h3>
<p>Just some text</p>
<h4>Header 4</h4>
<p>Just some text</p>
<h5>Header 5</h5>
<p>Just some text</p>
<h6>Header 6</h6>
<p>Just some text</p>

Тег <h1> найчастіше використовують тільки один раз на документ. Це по суті основний заголовок сторінки. Інші заголовки можна використовувати скільки завгодно разів. Але завжди треба враховувати ієрархію.

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

Списки​ (list)

Списки це конструкцій які допомагають упорядкувати колекцію однотипних даних. По суті список це контейнер який може містити всередині тільки теги <li> (list item).

Тег <ol> - упорядкований список (ordered list)

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

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

<h1>Як доїхати в аеропорт:</h1>
<p>Покрокова інструкція маршруту</p>

<ol>
  <li>На метро доїхати до станції "Вокзальна"</li>
  <li>Перейти із Центрального на Південний вокзал</li>
  <li>Сісти на автобус до аеродрому "Бориспіль"</li>
  <li>Вийти біля потрібного терміналу</li>
</ol>

Тег <ul> - неупорядкований список (unordered list)

Невпорядкований список і ще називають маркованим. Тому що перед його кожним елементом буде невеликий символ - маркер. Зовнішній вигляд його можна змінити або прибрати зовсім.

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

<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> - посилання​ (anchor tag)

За допомогою цього тега <a> створюють посилання. У нього огортають якийсь елемент і при кліку по ньому буде завантажуватись інша сторінка або файл.

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

Посилання має обов'язковий атрибут href у якому вказують адресу на новий ресурс. Атрибути вказують через пробіл. Після назви слідує знак рівності, а потім у лапках вказують значення атрибута: href="адреса". Адресу ще часто називають URL.

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

Атрибути target і rel​

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

Атрибут rel доповнює атрибут href. Для уникнення небажаних махінації з боку хакерів його значення потрібно встановити у noreferrer noopener nofollow.

<!-- Посилання відкриється в поточній вкладці -->
<a href="https://www.google.com/">Google</a>

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

Атрибут title

Додає спливну підказку до тексту посилання.

<a href="http://google.com" title="Пошукова система Google">
  Google.com
</a>

Атрибут download​

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

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

<a href="/link/to/file.pdf" download>Завантажити файл</a>

Спеціальні значення атрибута href​

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

<a href="tel:[phone]">[phone]</a>

<a href="mailto:[e-mail]">[e-mail]</a>

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

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

Якір вказують у тезі за допомогою атрибута унікального ідентифікатора id. А в самому посиланні в атрибуті href після символа # вказують ідентифікатор елемента.

<a href="#header1">To header 1</a>
// певний код
<h1 id="header1"> Header 1</h1>

Тег <button> - кнопка​

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

Поведінку кнопки встановлять за допомогою атрибута type. За замовченням значення цього атрибута - submit. Його використовують для відправлення форм. Але найчастіше цьому атрибуту дають значення button. Наприклад коли потрібно відкрити модальне вікно.

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

ПОСИЛАННЯ і КНОПКИ - це різні елементи інтерфейсу. Якщо відбувається перенаправлення на іншу адресу то це однозначно посилання. Якщо відбувається дія без перезавантаження сторінки або без перенаправлення - то це кнопка.

Атрибут lang​

Якщо сторінка містить тексти різними мовами, то можна вказувати атрибут lang не тільки тегу html, а й окремим тегам. Це допоможе допоміжним сервісам краще обробити дані(наприклад скрінрідерам).

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="utf-8" />
    <title>Користувацька угода</title>
  </head>
  <body>
    <p>Користувацька угода</p>
    <p lang="en">User agreement</p>
    <p lang="fr">Accord de l'utilisateur</p>
  </body>
</html>

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

Покликання:

Специфікація тегу <p>

Специфікація тегів <h1>... <h6>

Специфікація тегу <ol>

Специфікація тегу <ul>

Специфікація тегу <a>

Специфікація тегу <button>