Перейти до основного вмісту

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

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

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

<ім'я_тегу>...</ім'я_тегу>

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

Приклади тегів.

<section>Секція</section>
<p>Абзац</p>
<a>Посилання</a>
<button>Кнопка</button>

Коментарі​

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

<!-- Це коментар, його вміст не відобразиться на сторінці -->

<p>Це абзац тексту, він буде на сторінці.</p>

<!--
  Коментар може бути багаторядковим.
   Це зручно для об'ємніших описів.
-->

Атрибути​

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

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

<a href="https://google.com" class="link">...</a>

<img src="cat.jpg" alt="cute cat" />

<input type="text" name="user_name" />

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

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

Розглянемо деякі атрибути тегу <a>.

<a href="http://google.com" target="_blank" title="Пошукова система Google">
  Google.com
</a>
  • href - адреса сторінки, на яку перейде користувач після натискання на текст посилання.
  • target - вказує на те, в якій вкладці відкривається сторінка після кліку на посилання
  • title - додає спливаючу підказку до тексту посилання.

Розглянемо деякі атрибути тегу <img>.

<img
  src="https://picsum.photos/640/480"
  alt="Довільна картинка від генератора"
/>
  • src - адреса зображення.
  • alt - альтернативний текст, який буде показаний, якщо зображення не завантажилося.

Парні теги​

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

<!-- Стаття із заголовком і абзацом -->
<article>
  <h1>Коротко про парні теги</h1>
  <p>
    Більшість тегів парні. Їх контент вкладений між відкриваючим і закриваючим
    тегом.
  </p>
</article>

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

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

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

<!-- Поле введення -->
<input type="text" />

<!-- Зображення -->
<img src="cat.jpg" alt="cool cat" />
Цікаво

У попередніх стандартах HTML поодинокі теги обов'язково записувалися зі зворотним символом / перед закривальною дужкою. Наприклад <img /> або <input />. В сучасному стандарті це необов'язково і ні на що не впливає.

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

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

<тег1>
  <тег2>
    <тег4>...</тег4>
    <тег5>...</тег5>
  </тег2>
  <тег3>
    <тег6>...</тег6>
  </тег3>
</тег1>

Ось валідна розмітка абзаца з посиланням і виділеним текстом, а також список переваг з описом.

<p>
  <a href="squoosh.app">Squoosh</a> - сервіс <em>оптимизації</em> зображень.
</p>

<p>Переваги</p>
<ul>
  <li>Працює в браузері</li>
  <li>Не навантажує систему</li>
  <li>Зручний інтерфейс</li>
</ul>

А в цій версії є проблеми (рядки підсвічені).

<!-- Не дотримується порядок закриття тегів -->
<p><a href="squoosh.app">Squoosh</a> - сервіс <em></a>оптимизації</p> зображень.</em>

<!-- Не дотримуються специфічні правила вкладення тегів -->
<ul>
  <p>Переваги</p>
  <li>Працює в браузері</li>
  <li>Не навантажує систему</li>
  <li>Зручний інтерфейс</li>
</ul>