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

Абзац

Тег <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>

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

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

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

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

Кнопка

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

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

Корисно

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