Порой можно услышать от людей вопросы, касающиеся комментариев в html документе, в частности про то, для чего они нужны. Дело в том что создание более или менее серьезного сайта вряд ли обойдется вам в пару строчек кода. Наверняка вам придется повозиться с разметкой и использовать большое количество тегов.

Также бывает и такое, что содержимое тех или иных элементов веб-страницы может частично совпадать. Учитывая вышесказанное, велика вероятность того, что вернувшись через некоторое время к разметке «старых» веб-страниц, вы можете не понять что к чему.

Большое количество тегов и всякого рода вложенность может затруднить понимание структуры html документа. А что если вы рассматриваете исходный код большого сайта, созданного кем-то другим? В общем, ситуация та еще…

Но решение всё-таки есть. А заключается она в том, чтобы использовать так называемые комментарии. Как вы наверное догадались, при помощи них мы можем дать объяснение тому или иному отрезку кода. Думаю, не надо объяснять какая это крутая возможность. Вернувшись через некоторое время к разметке с наличием комментариев, вы как бы прогуливаетесь по дневнику своей памяти. Звучит интересно, не правда ли? А теперь, давайте перейдем к реализации данной возможности.

Видеоверсия:


Оставляем комментарии к участкам кода.

Текст комментариев мы заключаем внутри такой конструкции: 

<!- -        - ->
 Для начала, я предлагаю оставить комментарии к заголовку нашего индексного документа. Перед тегом <h1> мы ставим конструкцию комментариев и внутри нее пишем «Это заголовок страницы». Далее, перед первым абзацем мы пишем «Это вступительный текст». Еще мы можем оставить комментарий к таблице. В месте ее окончания мы укажем «Здесь заканчивается таблица». И наконец, мы оставляем комментарии к спискам. Давайте не будем изобретать велосипед а просто напишем «Здесь начинаются списки». И в конце отметим их окончание.Вот и все. Комментарии которые мы создали никак не отобразятся на самой веб-странице, однако будут видны в исходном коде.

Комментарии в html документе
Комментарии в html документе

Используем комментарии не по прямому назначению.

Также, я бы хотел отметить еще одну неочевидную плоскость в использовании комментариев. Давайте представим, что какой-нибудь отрезок кода, например ссылка в конце страницы сейчас нам не нужна, однако через некоторое время может понадобится. Мы можем не удалять данный отрезок кода (так как он может нам понадобится), а просто закомментировать его. Таким образом, эта ссылка не будет отбражаться на веб-странцие, но сохранится в html коде. Теперь нам остается сохранить прогресс при помощи сочетаний клавиш CTRL+S и проверить результат.

Закомментированая ссылка
Закомментированная ссылка

Отлично, как видите ссылка не отображается на веб-странице, хотя сохранилась в исходном коде. В тот момент, когда она нам понадобится, мы просто раскомментируем ее. Давайте проверим!

Ссылка без комментариев отображается как обычно
Ссылка без комментариев отображается как обычно

Отлично! Как видите, теперь она доступна для пользователей нашей веб-страницы. Итак, в этом уроке мы научились оставлять комментарии в html документе. Данная возможность очень полезна и поможет Вам сэкономить многие часы в будущем и защитит Вас от ненужных усилий для разбора исходного кода сайтов. Потратьте лишние 5 минут на оставление комментариев, впоследствии эти усилия окупятся сторицей.

А на этом у меня все. Надеюсь данный урок оказался для Вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих уроках!

2 Comments

  1. Ого) сто лет не видела статей на тему «как закомментировать что-то в html» и зачем все это, вообще, нужно =)
    Полезное знание, факт) Но в html не настолько полезное, как в js, к примеру.

    • Привет Галина,

      Считаю очень полезным пользоваться комментариями будь-то в html, css или js. Полезно как для себя, после возвращения к коду через время, так и для программиста, который возможно будет копаться в нем самостоятельно.

      Не мог выкинуть эту тему так как она не только может быть полезна для новичков, но и потому что у меня серия уроков по HTML (шаг за шагом).

      Спасибо за коммент)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

2 × три =

Закрыть