Урок с практикой по HTML (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

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

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

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

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

Парные теги HTML

Парных тегов намного больше. У парного дескриптора есть открывающий и закрывающий тег. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом. В коде 2.1.1.1 есть строка <h1>Что такое дескрипторы в HTML?</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 появились специальные теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.

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

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

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

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

<
×
>
Курс «Знакомство с HTML»
Урок 0.1. Вводный урок по курсу HTML и CSS
Урок 1.1. Что такое HTML?
Урок 1.2. Первое знакомство с HTML
Урок 2.2. Что такое теги и для чего они нужны?
Урок 2.3. Одинарные теги
Урок 2.4. Парные теги
Урок 3.1. Структура HTML документа
Урок 3.2. Что означают теги HTML, HEAD, BODY?
Урок 3.3. Первая строка всех сайтов - DOCTYPE
Урок 3.4. Исходный код веб-страницы
Урок 3.5. Заголовок в HTML - тег TITLE
Урок 3.6. Кодировка HTML страницы и атрибуты
Урок 3.7. Описание стилей в HTML документе
Урок 3.8. Подключение внешних файлов в HTML - стили CSS
Урок 3.9. Практика: что не хватает в структуре
Урок 3.10. Практика: опять чего-то не хватает в структуре
Урок 4.1. Использование HTML метатегов (Мета теги)
Урок 4.2. Практика: повторим метатеги
Урок 4.3. Практика: метатеги Facebook
Другие курсы
Курс 2. Разметка текста
Курс 3. Ссылки
Курс 4. Изображения
Курс 5. Таблицы
Курс 6. Формы
Курс 7. HTML5
Курс 8. Остальное
Курс 9. Знакомство с CSS
Курс 10. Селекторы в CSS
Курс 11. Структура и каскад
Курс 12. Единицы измерения
Курс 13. Шрифт
Курс 14. Свойства текста
Курс 15. Форматирование
Курс 16. Отступы, рамки, поля
Курс 17. Цвета и фон
Курс 18. Позиционирование
Курс 19. Верстка таблиц
Курс 20. Списки
Курс 21. Анимация
Курс 22. Практика с htmlbook.ru
Курс 23. Элементы сайта
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.