Перейти до основного вмісту
Версія: Далі

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

Тег (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 - альтернативний текст, який буде показаний, якщо зображення не завантажилося.
Корисно

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

Парні теги​

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

<!-- Стаття із заголовком і абзацом -->
<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>

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

Специфікація HTML Living Standard - головний документ, який описує стандарти, можливості і майбутній розвиток мови HTML.

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

Корисно

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

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

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

  • Йдемо в специфікацію і знаходимо потрібний елемент.
  • Перевіряємо контентну модель елемента (Content model), в який вкладаємо.
  • Перевіряємо категорії елемента (Categories), який вкладаємо.
  • Якщо категорія підходить і обмеження не забороняють - вкладати можна, інакше - не можна.

Вже через пару днів використання HTML ви звикнете правильно вкладати елементи один в одного, оскільки правила вкладеності стануть інтуїтивно зрозумілі після знайомства з основними тегами.

Довідники​

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