У 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.