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

У HTML існують як парні теги, так і одиночні теги (також відомі як самозакривальні теги або порожні елементи). Кожен тип виконує певну функцію та має своє призначення.

Парні теги

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

Синтаксис:

html
Скопіювати код

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

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

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

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

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

Синтаксис:

html
Скопіювати код

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

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

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

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

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

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

html
Скопіювати код

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

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

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

Підсумок

HTML складається з парних і одиночних тегів, кожен з яких виконує різні функції. Парні теги мають відкриваючий і закриваючий тег для охоплення вмісту, тоді як одиночні теги є самозакриваючимися. Коректне вкладення тегів і дотримання правильної ієрархії є важливими для створення валідної структури HTML.