Теги та атрибути

Тег (tag) - це базовий елемент в HTM розмітці. Всі дані на веб-сторінці описуються за допомогою тегів із відповідними назвами. Наприклад: заголовки, текст, гіперпосилання, зображення тощо.

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

<назва_тегу>...</назва_тегу>

Зазвичай тег складається із двох частин: відкривального тегу і закривального. Закривальний тег позначають, так само як і відкривальний, але із додаванням символу слешу (/) перед іменем тегу. Між відкривальним і закривальним тегом - розташовують його вміст.

Коментарі

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

<!-- Коментар в один рядок. Його не видно на сторінці -->
<p>Абзац</p>

<!--
  Коментар у два рядки.
  Зручно коли, коментар довгий.
-->

Атрибути тегів

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

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

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

Подивіться на приклади опису атрибутів:

<a href="https://google.com" target="_blank">...</a>

<img src="image.png" alt="image information" />

<button type="submit">...</button>

<p class="reviewSya">...</p>

У прикладі вище у тегу <a> (гіперпосилання) вказано обовʼязковий атрибут href, в якому вказують яку сторінку треба завантажити при натисканні на це посилання. Також вказано необовʼязковий атрибут target, який у даному разі вказує, що посилання відкриється у новому вікні, або вкладинці.

У тегу зображення <img> вказано два атрибути й вони обидва - обовʼязкові. src - це адреса, за якою зберігається зображення. alt - альтернативний текст, який буде показано у разі, якщо з якоїсь причини не завантажиться зображення.

Парні теги​

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

<!-- Блок вмісту із заголовком, зобраденням і текстом  -->
<div>
  <h2>Котики</h2>
  <img src="cat.png" alt="sweet cat" />
  <p>
    Котики - тваринки, яких найчастіше шукають розробники під час написання коду.
  </p>
</div>

Одинарні теги​

З прикладів вище ми побачили, що деякі теги (наприклад <img>) мають лише свою відкривальну частину і не мають текстового контенту, зате мають атрибути, наприклад посилання на файл, або альтернативні налаштування. Раніше обовʼязковим був слеш перед закривальною кутиковою дужною. Тепер стандарт дозволяє використовувати теги й без нього (але краще ставити цей слеш).

<!-- Інформація про кодування тексту на сторінці -->
<meta charset="UTF-8" />

<!-- Підключення файлу таблиці стилів -->
 <link rel="stylesheet" href="./css/syles.css" />

<!-- Зображення -->
<img src="image.jpg" alt="some information about image" />

Вкладеність тегів​

Теги можна вкладати один в одного. Важливо дотримуватися порядку закриття тегів за принципом мотрійки.

<тег_1>
  <тег_2>
    <тег_4>...</тег_4>
  </тег_2>
  <тег_3>
    <тег_5>...</тег_5>
    <тег_6>...</тег_6>
  </тег_3>
</тег_1>

Крім того, є правила вкладеності тегів. Зокрема, не всі теги можна вкладати в інші теги. Для цього потрібно перевіряти можливість вкладення в документації.

Приклад коректної вкладеності тегів:

<p>
  <a href="google.com">Google</a> - знайди <b>хатнього улюбленця</b>.
</p>

<p>Хатні улюбленці:</p>
<ul>
  <li>Коти</li>
  <li>Собаки</li>
  <li>Птахи</li>
</ul>

Приклад некоректної вкладеності тегів (рядки з помилками виділено):

<!-- Порушено порядок закриття тегів -->
<p>
  <a href="google.com">Google<b> - знайди </a> хатнього улюбленця</b>.
</p>

<!-- Порушено правило вкладеності тегів -->
<p>Хатні улюбленці:</p>
<ul>
  <p>Коти</p>
  <p>Собаки</p>
  <p>Птахи</p>
</ul>

Специфікація HTML​

Головна документація, яка описує стандарти HTML - це специфікація HTML Living Standard. Зокрема там можна дізнатися, які бувають теги і їх правила вкладеності.

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

Вкладеність тегів​

Порядок визначення вкладеності тегу:

1. В специфікації знайти потрібний елемент.
2. Перевірити контентну модель елемента (Content model), в який вкладаємо.

3. Перевірити категорію елемента (Categories), який вкладаємо.

4. Якщо підходить категорія і немає обмежень, то вкладати теги можна.

Використовувані теги часто повторюються, тому запамʼятати основні правила вкладеності буде не важко. Також можна скористатися швидким онлайн сервісом перевірки вкладеності https://caninclude.glitch.me/

Покликання:

Офіційна специфікація HTML тегів

Типи тегів

Інформація про HTML теги та їх атрибути

Інформація про CSS-властивості

Перевірка можливості вкладеності тегів