Вивчайте Розуміння Парних і Одиночних Тегів у HTML

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

Парні теги

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

Синтаксис:

<tag_name>Some content</tag_name>

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

index.html

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

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

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

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

Синтаксис:

<tag_name />

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

index.html

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

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

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

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

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

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

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

index.html

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

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

Підсумок

Парні теги охоплюють вміст за допомогою <tag> і </tag>.

Одинарні теги (самозакриваючі) не містять внутрішнього вмісту.

Правильне вкладення забезпечує валідний і читабельний HTML.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Свайпніть щоб показати меню

Парні теги

Синтаксис:

<tag_name>Some content</tag_name>

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

index.html

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

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

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

Синтаксис:

<tag_name />

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

index.html

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

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

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

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

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

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

index.html

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

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

Підсумок

Парні теги охоплюють вміст за допомогою <tag> і </tag>.

Одинарні теги (самозакриваючі) не містять внутрішнього вмісту.

Правильне вкладення забезпечує валідний і читабельний HTML.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3