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

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

Frontend SELF

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. Сейчас такие теги стараются не вводить.

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии (5)

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ

ILona Уровень 3

6 июля 2025

Не совсем понятно, где применить заголовок, вложенный в заголовок.

tnigomanov Уровень 1

12 июня 2025

<html> - HyperText Markup Language(язык гипертекстовой разметки), тег является корневым элементом, то есть обрамляет весь html код.
- break(перенос строки, разрыв). <hr> - horizontal rule(горизонтальная линия). Ответить

Anonymous #3566729 Уровень 2

12 ноября 2025

в некоторых IDLE этот тег наряду с DOCTYPE добавляется автоматически, а в некоторых его просто нету, но в файле после скачивания- есть

Чынара Уровень 1

6 апреля 2025

не совсем понимаю

solemnly swear that I am up to no good Уровень 21

8 декабря 2024


<html> - HyperText Markup Language(язык гипертекстовой разметки), 
тег является корневым элементом, то есть обрамляет весь html код.
<br> - break(перенос строки, разрыв).
<hr> - horizontal rule(горизонтальная линия).