Розуміння парних і одиночних тегів у HTML

HTML використовує два типи тегів: парні теги та одиночні (самозакривальні) теги. Кожен з них виконує різну роль при структуризації вебсторінки.

Парні теги

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

Синтаксис:

<tag_name>Some content</tag_name>

Ось реальний приклад використання парних тегів:

У цьому прикладі:

• <section>...</section>: групує пов'язаний вміст разом;
• <h1>...</h1>: додає заголовок для секції;
• <p>...</p>: містить абзац із поясненням, що більшість HTML-тегів є парними.

Одиночні теги

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

Синтаксис:

<tag_name />

Ось реальний приклад використання одиночних тегів:

Цей код містить два елементи:

• <input />: створює текстове поле для введення. Атрибут placeholder=" name" показує підказку всередині поля;
• <img />: відображає зображення фруктів.
  • alt="Fruits": текст, який відображається, якщо зображення не завантажилося;
  • width та height: встановлюють розміри зображення;
  • src: вказує URL зображення.

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

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

Ось приклад вкладених тегів:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Розглянемо наступний коректний приклад:

Цей код відображає абзац із посиланням та виділеним текстом:

• <p>...</p>: охоплює весь абзац;
• <a href="https://privacy.com">...</a>: створює клікабельне посилання на Політику конфіденційності;
• <strong>...</strong>: робить слово "website" жирним для виділення.