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

Парные теги

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

  • Шаг 1. Написать самый старший контейнер (тот который первый): <div> ... </div>
  • Шаг 2. Написать следующий тег внутрь старшего тега: <div><p> ... </p></div>
  • Шаг 3. Пишем последний тег, внутрь второго тега: <div><p><b> ... </b></p></div>
  • Шаг 4. Дописываем текст, в самую середину: <div><p><b> TEXT </b></p></div>

Следующий пример показывает все основные парные теги, далее вы узнаете обо все парных и не парных тегах.

Код HTML
<!DOCTYPE html>
<html>
<head>
<title>Заголовок сайта</title>
</head>
<body>
<h1>Заголовок 1 уровень</h1>
<h2>Заголовок 2 уровень</h2>
<h3>Заголовок 3 уровень</h3>
<h4>Заголовок 4 уровень</h4>
<h5>Заголовок 5 уровень</h5>
<h6>Заголовок 6 уровень</h6>
<p>Абзац</p>
<b>Жирный текст</b>
<u>Подчеркнутый текст</u>
<i>Курсивный текст</i>
<ul>
<li>Маркированный список 1</li>
<li>Маркированный список 2</li>
</ul>
<ol>
<li>Нумерованный список 1</li>
<li>Нумерованный список 2</li>
</ol>
</body>
</html>

Нашел замечательную картинку на сайте htmlbook, которая показывает, как не надо делать, для этого поставлены скобки сверху.

парные теги
<
×
>
Курс «Знакомство с HTML»
Урок 0.1. Вводный урок по курсу HTML и CSS
Урок 1.1. Что такое HTML?
Урок 1.2. Первое знакомство с HTML
Урок 2.1. Теги в HTML. Одинарные и парные теги
Урок 2.2. Что такое теги и для чего они нужны?
Урок 2.3. Одинарные теги
Урок 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. Анимация
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно