Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

2.4. Парные теги

Как я уже писал, у парных тегов есть открывающий и закрывающий тег. Открывающий тег схож с одинарным тегом <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
Тест 0.2. Вводный тест по курсу HTML и CSS
Урок 1.1. Что такое HTML?
Урок 1.2. Первое знакомство с HTML
Урок 2.1. Теги в HTML. Одинарные и парные теги
Урок 2.2. Что такое теги и для чего они нужны?
Урок 2.3. Одинарные теги
Урок 2.4. Парные теги
Вы здесь
Тест 2.5. Тест: теги
Урок 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. Опять чего-то не хватает в структуре
Тест 3.11. Тест по структуре HTML документа
Тест 3.12. Тест по подключению файлов к веб-странице и кодировке
Урок 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. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно