Комментарии в HTML [Модуль 1: Основы HTML-разметки]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Комментарии в HTML ‒ это невидимые для пользователя пометки, которые помогают разработчикам ориентироваться в разметке, временно отключать элементы или добавлять пояснения коллегам. В этом блоке вы потренируетесь писать как обычные, так и условные комментарии, правильно закрывать их, оборачивать фрагменты кода, использовать комментарии для временного отключения элементов и подписывать закрывающие теги в больших вложенных структурах. Всего вас ждёт 10 практических мини-задач: от простого добавления  до условных IE-комментариев и комментирования скриптов. В каждом упражнении уже подключены стили, остаётся лишь заполнить пропуски и запустить результат. Комбинируйте знания, следите за аккуратностью синтаксиса и убедитесь, что лишние пробелы не попадают внутрь маркеров ‒ браузер воспринимает их дословно. Удачи!

Список тем

Спрячьте текст-подсказку перед картинкой

id: 37783_html-comment-1

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

CSS

.container {
  text-align: center;
  font-family: Arial, sans-serif;
}
.container img {
  width: 150px;
}

                     <div class='container'>
  <p>input1 Картинка кота input2</p>
  <img src='https://naytikurs.ru/img/1.png' alt='Cat'>
</div>

HTML

<div class='container'>
  <p>input1 Картинка кота input2</p>
  <img src='https://naytikurs.ru/img/1.png' alt='Cat'>
</div>

HTML-комментарий начинается с . Всё, что находится между ними, браузер игнорирует. Поместите открывающий маркер перед текстом, а закрывающий после него.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Временно отключаем кнопку

id: 37783_html-comment-2

Разработчик хочет скрыть кнопку «Нажми меня», чтобы она не мешала верстке, но оставить код в файле. Добавьте комментарии до и после тега <button>.

CSS

.wrap {
  padding: 10px;
}
.btn {
  padding: 6px 14px;
  background: #ffe66d;
  border: 1px solid #ccc;
  cursor: pointer;
}

                     <div class='wrap'>
  input1
  <button class='btn'>Нажми меня</button>
  input2
</div>

HTML

<div class='wrap'>
  input1
  <button class='btn'>Нажми меня</button>
  input2
</div>

Оберните весь тег <button> вместе с его содержимым в комментарий:  после неё.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Подписываем список дел

id: 37783_html-comment-3

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

CSS

.todo {
  list-style: square;
  margin-left: 20px;
}

                     <ul class='todo'>
  input1 Список дел input2
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML

<ul class='todo'>
  input1 Список дел input2
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Вставьте  сразу после. Сам текст тоже останется внутри комментария.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Подпись закрывающего тега

id: 37783_html-comment-4

У длинных блоков удобно подписывать закрывающий тег, чтобы быстро видеть, какой контейнер завершился. Добавьте комментарий после </div> с текстом «.card end».

CSS

.card {
  border: 1px solid #999;
  padding: 8px;
  max-width: 340px;
}

                     <div class='card'>
  <h2>Карточка</h2>
  <p>Описание внутри карточки.</p>
</div> input1 .card end input2

HTML

<div class='card'>
  <h2>Карточка</h2>
  <p>Описание внутри карточки.</p>
</div> input1 .card end input2

Комментарий располагается сразу после закрывающего тега: </div>

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Условный комментарий для Internet Explorer

id: 37783_html-comment-5

Для старых версий IE нужно подключить отдельный стиль. Оберните линк в условный комментарий, который сработает только в IE.

CSS

p { font-size: 14px; }

                     <head>
  input1
  <link rel='stylesheet' href='ie.css'>
  input2
</head>
<body>
  <p>Проверка conditional comment.</p>
</body>

HTML

<head>
  input1
  <link rel='stylesheet' href='ie.css'>
  input2
</head>
<body>
  <p>Проверка conditional comment.</p>
</body>

Открывающий маркер: .

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Отключаем скрипт полностью

id: 37783_html-comment-6

Иногда нужно временно убрать выполнение скрипта. Скомментируйте тег <script> вместе с его содержимым, чтобы в консоль ничего не выводилось.

CSS

body { font-family: Verdana; }

                     input1
<script>
  console.log('hello');
</script>
input2

HTML

input1
<script>
  console.log('hello');
</script>
input2

Поставьте  после </script>, тем самым спрятав весь блок.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Скрываем второй пункт списка

id: 37783_html-comment-7

Во втором пункте списка есть ошибка, его нужно временно скрыть. Добавьте комментарии вокруг тега <li>Second</li>, оставив остальные элементы отображаться.

CSS

ul { padding-left: 18px; }

                     <ul>
  <li>First</li>
  input1 <li>Second</li> input2
  <li>Third</li>
</ul>

HTML

<ul>
  <li>First</li>
  input1 <li>Second</li> input2
  <li>Third</li>
</ul>

Разместите  после закрывающего li.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Пояснение к кнопке проигрывания

id: 37783_html-comment-8

После кнопки проигрывания нужно добавить невидимую для пользователя подпись-комментарий, чтобы объяснить назначение символа ▶ внутри неё.

CSS

.play {
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

                     <button class='play' aria-label='Play video'>▶</button> input1 Показываем значок плеера input2

HTML

<button class='play' aria-label='Play video'>▶</button> input1 Показываем значок плеера input2

Синтаксис обычный:  сразу после тега.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Маркируем конец шапки страницы

id: 37783_html-comment-9

Чтобы быстро отличить закрытие header от похожего div, добавьте комментарий  сразу после тега </header>.

CSS

header { background: #f5f5f5; padding: 10px; }

                     <header>
  <h1>Сайт о науке</h1>
</header> input1 /header input2
<main>
  <p>Основное содержимое.</p>
</main>

HTML

<header>
  <h1>Сайт о науке</h1>
</header> input1 /header input2
<main>
  <p>Основное содержимое.</p>
</main>

После </header> вставьте пробел и комментарий .

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

IE-только стили и подпись блока

id: 37783_html-comment-10

Комбинированная задача: добавьте условный IE-комментарий для подключения таблицы стилей и подпись закрывающего тега <section>. Вставьте все необходимые маркеры в пропущенные места.

CSS

.features { border-top: 2px dashed #bbb; padding-top: 6px; }

                     <head>
  input1
  <link rel='stylesheet' href='ie-legacy.css'>
  input2
</head>
<body>
  <section class='features'>
    <h2>Фишки проекта</h2>
  </section> input3 /features input4
</body>

HTML

<head>
  input1
  <link rel='stylesheet' href='ie-legacy.css'>
  input2
</head>
<body>
  <section class='features'>
    <h2>Фишки проекта</h2>
  </section> input3 /features input4
</body>

1) Для IE:  2) Для подписи:  сразу после </section>.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку