4. Теги в HTML. Одинарные и парные теги

Кратко

HTML теги: одинарные и парные

- Одинарные теги не имеют закрывающего тега, например: <br>, <img>.

- Парные теги состоят из открывающего и закрывающего тега, образуя контейнер.

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

- Примеры: <br> - перенос на новую строку, <hr> - разделительная линия, <img> - вставка изображения.

- В ранних версиях HTML было правильно писать <br/>, <img/>, но теперь это не актуально.

Парные теги

- Примеры: <h1>Что такое дескрипторы в HTML?</h1>.

- Содержимое контейнера находится между открывающим и закрывающим тегами.

- Важно правильно писать парные теги для избежания ошибок в валидности кода.

HTML5 и новые теги

- HTML5 является расширением HTML4, сохраняя все дескрипторы HTML4 и добавляя новые.

- В HTML5 появились теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.

Почему важно знать теги

- Поисковики проверяют HTML документы на валидность, ищут ключевые слова в дескрипторах.

- Знание тегов важно для верстки страниц и SEO.

Как выучить теги

- Специально учить теги не нужно, они запоминаются в процессе практики.

- Если что-то забыли, можно обратиться к интернету.

Думаю, вы поняли из чего состоит код HTML? Верно, из множества парных и одинарных тегов. В этом уроке разберемся подробнее с HTML тегами.

В языке HTML происходит деление тегов на одинарные (непарные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А парные дескрипторы состоят из двух частей, одна из которых указывает начало, другая - конец.

Одинарные теги HTML

Одинарные теги не имеют закрывающего тега. Например: <br>, <img>. В ранних версиях было правильно (согласно стандарта) писать: <br/>, <img/>, теперь такой стиль написания одинарных тегов не актуален. Как сказал А.П. Чехов: «Краткость - сестра таланта», всегда при написании кода необходимо руководствоваться этим правилом. Если можно сократить или упростить, то сделайте это. Поэтому не стоит лишний раз ставить слэш, разумеется, если вы заявили о том, что ваш HTML документ пятой версии. Про версии HTML было сказано ранее.

Самые используемые одинарные теги: <br> - перенос на новую строку, <hr> - разделительная линия, <img> - вставка изображения. Далее поговорим о парных тегах в HTML.

Парные теги HTML

Парных тегов намного больше. У парного дескриптора есть открывающий и закрывающий теги. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом.

Рассмотрим следующий пример:

<h1>Что такое дескрипторы в HTML?</h1> 

В нем <h1> - парный тег, а содержимым этого тега является текст Что такое теги в HTML?. Началом парного тега является <h1>, а концом </h1>. В данном случае слэш (косая черта) перед именем тега обязателен.

Главная проблема, с которой сталкиваются на начальных этапах, это путаница в написании парных тегов: неразбериха во вложенности.

Например, правильная запись: 

<p><b>Жирный абзац</b></p> 

А в следующем примере есть ошибка вложенности:

<p><b>Жирный абзац</p></b> 

HTML документ с такой версткой считается невалидным. Валидный код - это код написанный в соответствии со стандартами, разработанными Консорциумом Всемироной Паутины (W3C).

Чтобы не путать вложенность, следуйте следующему алгоритму: создайте парные теги <p></p>, далее вложите в них другие <p><b></b></p>, и в конце напишите текст внутрь обоих тегов:

<p><b>Как правильно писать парные теги</b></p> 

Теперь немного поговорим о версиях.

Что нового в HTML5 в плане тегов?

Язык HTML5 является расширением HTML4, поэтому в нем сохранены все дескрипторы HTML4 и добавлены новые. В HTML5 появились специальные теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.

Примечание (10.2024)

В 2024 году сравнивать HTML4 и HTML5 неактуально, но все равно оставлю этот абзац как часть истории.

Почему важно научиться пользоваться тегами?

Поисковики Yandex и Google трепетно относятся к верстке HTML документов, проверяя их на валидность. Ищут в них ключевые слова, заключенные в специальные дескрипторы и так далее. В этом разделе речь идет о верстке страниц на HTML, поэтому не будем углубляться в эту тему, которая относится к продвижению (SEO).

Как выучить все теги HTML?

Да, тегов большое множество, но специально учить их нет необходимости. Индейцы метко подметили: «Скажи мне – и я забуду, покажи мне – и я не смогу запомнить, привлеки меня к участию – и я пойму».

Пока вы будете практиковаться, что-то писать (верстать), парные и одинарные теги сами запомнятся. Со временем, конечно. А если что-то забыли, то всегда можно обратиться к интернету или сайту Codebra.

В следующем уроке продолжим изучение этой темы, но под другим углом.

Примечание (10.2024)

Только спустя несколько лет заметил дублирование уроков (этот и следующий). Пожалуй, оставлю оба урока. Если что-то непонятно было вам в этом уроке, будет понятно в следующем.

Похожие уроки Codebra

1. Удалите все между тегами <body> ... </body>
2. Создайте внутри тегов <body> ... </body> парный тег <h1>
3. Напишите число между тегами <h1> ... </h1>

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

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