JavaRush /Курси /Frontend SELF UA /Знайомство з HTML-тегами

Знайомство з HTML-тегами

Frontend SELF UA
Рівень 1 , Лекція 2
Відкрита

1. Теги

Теги бувають різних типів. По-перше, вони бувають одиночні і парні. Найчастіше зустрічаються парні теги. І, як ти, мабуть, вже здогадався, вони завжди йдуть парою. Їх ще називають відкриваючий і закриваючий.

Відкриваючий тег — це просто ключове слово у трикутних дужках.


<tag>

Приклад:

HTML
      
<h1>
      
    

Закриваючий тег схожий на відкриваючий, але перед ключовим словом стоїть коса риска.


</tag>

Приклад:

HTML
      
</h1>
      
    

Відкриваючий тег завжди перший у парі. НЕ може спочатку йти закриваючий тег, а потім – відкриваючий. Такий HTML-документ буде вважатися недійсним.

2. Дерево тегів

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

HTML
      
<html>
    Звичайний текст
        <a href="http://javarush.com/about">
            Посилання на щось цікаве
        </a>
    ще якийсь текст
</html> 
      
    

Грубо кажучи, в HTML-тексті може бути послідовність тегів:


<h1> <h2> </h2> </h1>

Але не може бути:


<h1> <h2> </h1> </h2> 

Якщо відкриваючий тег <h2> знаходиться всередині пари <h1>-тегів, то і його парний закриваючий тег </h2> теж має знаходитися всередині пари тих же <h1>-тегів.

Таким чином усі теги документа утворюють деяке дерево тегів. Спочатку йде тег верхнього рівня, який охоплює весь документ, зазвичай він називається <html>, у нього є дочірні пари тегів, у них свої і так далі.

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

3. Одинарні теги

Порожній тег

Якщо у тега немає вмісту, то зазвичай він виглядає так:


<tag> </tag>

Для таких тегів придумали спеціальний компактний запис:


<tag/>

Зверни увагу, що цей тег відрізняється від закриваючого тега — коса риска у нього стоїть наприкінці. Це просто скорочений запис порожньої пари тегів. Його так і називають — порожній тег.

Одинарні теги

Однак у HTML є і спеціальні одинарні теги. Вони не мають закриваючого тега. Список таких тегів визначається HTML-стандартом. Приклади:

  • <br> — перенесення рядка;
  • <hr> — лінія розділення;
  • <img> — картинка.

Всього їх 14, половина з них службові, а друга — з'явилися ще у першій версії HTML. Зараз такі теги намагаються не вводити.

Коментарі (1)
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ
Tom Рівень 1
19 лютого 2025
cool🤗