Теория урока

7. Парные теги в HTML

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Как уже писал ранее, у парных тегов есть открывающий и закрывающий теги. Открывающий тег схож с одинарным тегом <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>, <head> и <body>.

7. Парные теги в HTML

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