Теорія 17/02/2023

Коментарі в HTML: приклади та особливості

Авторка

HTML (HyperText Markup Language) — мова гіпертекстової розмітки документів для перегляду вебсторінок у браузері. HTML опановують з азами програмування, і коментарі HTML — окремий розділ.

Редакція Highload розібралася, що таке коментарі HTML, як правильно з ними працювати, а також можливі помилки, які можуть виникати.

Зміст

Що таке коментарі в HTML
Для чого вони потрібні
Синтаксис
Відображення у браузері
HTML-коментар з одного рядка
HTML-коментар з кількох рядків
Умовні коментарі
Можливі помилки
Приклади використання коментарів у HTML-коді
Браузери, які підтримують HTML

Що таке коментарі в HTML

Коментарі в HTML — це певна конструкція в коді, яка допомагає під час рефакторингу, але при цьому не буде видима користувачу, який переглядатиме сторінку в браузері.

Для чого вони потрібні

Це спосіб полегшити собі та своїм колегам подальшу роботу. Безумовно, кожен розробник не одноразово повертатиметься до раніше написаного коду. І певні підказки можуть бути корисними під час рефакторингу коду та видаленні зайвих рядків.

Жодних обмежень у використанні коментарів немає. Єдине місце на сторінці, де цього не можна робити — тег <title> — всередині цього тегу коментарі не працюватимуть.

Щоб закоментувати або розкоментувати код у HTML, скористайтеся поєднанням клавіш ctrl + / або cmd + /.

Також часто з кодом працюють кілька розробників. Це може бути великий enterprise-проєкт або ж легасі-код, з яким доведеться попрацювати не одному девелоперу. Коментарі колег допоможуть у розумінні логіки роботи продукту та прискоренні розробки.

Коментарі також можуть значно скоротити час, витрачений на виправлення багів.

До того ж, наявність коментарів завжди покращує читабельність коду.

Синтаксис

Що важливо пам’ятати, кажучи про синтаксис коментарів? Для написання коментаря використовується тег .

Давайте розглянемо приклад коментаря у коді:

<!DOCTYPE html>
<html>
 <head>
   <!-- заголовок сторінки -->
   <title>Коментарі у HTML-документі</title>
 </head>
 <body>
   <!-- шапка сайту -->
    <div class="header">...</div>
   <!-- основна частина сторінки -->
    <div class="content">...</div>
   <!-- ліва колонка -->
   <div class="toolbar">...</div>
    <!-- підвал сайту -->
   <div class="footer">...</div>
 </body>
</html>

Як ми вже казали вище, коментарі не працюватимуть усередині тегу <title>, але це не єдине обмеження. Історія повториться і з тегом <style>.

Особливу увагу варто приділити знаку оклику. Коли ми застосовуємо знак оклику після кутової дужки (<!), то повідомляємо браузеру, що весь наступний текст вже не слід сприймати як HTML-код. Справді, тег виглядає незвично і відрізняється від стандартних варіацій, оскільки містить тільки одну кутову дужку (це справедливо як для тега, що відкриває, так і для того, що закриває).

Давайте розглянемо ще один приклад:

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок вікна вебсторінки</title>
   </head>
   <body>
         <h1>Заголовок сторінки</h1>
         <!--  <p>Цю частину коду ми хочемо тимчасово сховати</p> -->
         <a href="https://ru.w3docs.com">домашня сторінка</a>  
       <!--  <p>Посилання на домашню сторінку сайту</p> -->
   </body>
</html>

Відображення у браузері

З відображенням коментарів у браузері все просто — вони не відображаються 🙂 Це твердження універсальне для всіх коментарів.

HTML-коментар з одного рядка

Коментарі бувають різні — вони можуть складатися з одного або кількох рядків. Пропонуємо спочатку розглянути коментарі, які складаються з одного рядка. У цьому випадку нам потрібно розмістити текст між послідовністю символів :

<!-- Це перший коментар, його не буде видно на сторінці -->

<h1>А це — заголовок. Його буде видно на сторінці.</h1>

<!-- Це другий коментар, його також не буде видно -->

Знак оклику в цьому випадку ставиться на початку, в кінці він вже не потрібен.

Цей коментар — найпростіший приклад використання коментарів у HTML-коді.

Онлайн-курс "Лідогенерація у B2B" від Laba.

Де шукати нових клієнтів, щоб збільшити дохід компанії та які інструменти лідогенерації застосовувати? Розбираємо покроково та комплексно.

Дізнатись більше про курс

HTML-коментар з кількох рядків

Більш складна варіація — це HTML-коментар із кількох рядків.

Приклад такого коментаря:

<!--
Багаторядковий коментар. 
У ньому міститься багато інформації. 
Можливо вмістити навіть цілу статтю.
Або оповідання.
-->

Або ж:

<!--
<h1>Закоментований заголовок</h1>
<p>Цього абзацу також не буде видно</p>
-->

У випадку з таким коментарем символи  вказують браузеру, що текст, розташований між набором символів, що відкриває,  — багаторядковий коментар.

Умовні коментарі

Умовні коментарі HTML — це коментарі, які дають можливість задавати блоки коду, які будуть виконуватися виключно у заданій версії браузера Internet Explorer. У всіх інших версіях браузера Internet Explorer та інших браузерах їх вміст вважатиметься звичайним коментарем.

У умовних коментарів є свій синтаксис, який потрібно задавати:

У нас є кілька опцій для вибору оператора:

gt — більше ніж;

Курс-професія "Junior Data Analyst" від robot_dreams.

Комплексний курc для всіх, хто хоче опанувати нову професію з нуля.На прикладі реальних датасетів ви розберете кожен етап аналізу даних.

Програма курсу і реєстрація

gte — більше або дорівнює;
! — не дорівнює;
lt — менше ніж;
lte — менше або дорівнює;
IE — будь-яка версія браузера Internet Explorer;
IE 6 — Internet Explorer 6;
IE 7 — Internet Explorer 7;
IE 8 — Internet Explorer 8;
IE 9 — Internet Explorer 9.

Курс English For Tech: Speaking&Listening від Enlgish4IT.

Після курсу ви зможете найкраще презентувати свої досягнення, обговорювати проекти та вирішувати повсякденні завдання англійською мовою. Отримайте знижку 10% за промокодом TCENG.

Дізнатись про курс

Параметр «Версія» необов’язковий, але в ньому можна вказати номер версії браузера Internet Explorer.

Давайте подивимося на кілька прикладів:

 — виконувати вміст коментаря, якщо браузер — будь-яка версія Internet Explorer;

 — виконувати вміст коментаря, якщо браузер — Internet Explorer більшої версії, ніж зазначено.

Наприклад:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Без коментарів</title>  
 </head>
 <body>
  <p>Швидкість — це фізична величина.</p>
 </body>
</html>

<!--[if lte IE 8]>
  ...
<![endif]-->

Умовний коментар завжди починається так:

<!--[if lte IE 8]>
  <p>... після якої йде HTML-код. Закінчується (<strong>endif</strong>) умовний коментар рядком:</p>
<![endif]-->

Можливі помилки

Кажучи про коментарі, неможливо не згадати можливих помилок, з якими можуть зіткнутися розробники.

Для початку згадаємо важливі правила, які існують у коментуванні:

не можна починати коментар зі знака >;

Курс Full-stack розробки від Mate academy.

Станьте Full-stack розробником з нуля. Mate academy дає комплексні знання і навички для розробки повноцінних веб-рішень — від візуальної частини до серверної логіки. Ви освоїте технології, щоб створити власний проєкт від а до я — без допомоги інших.

Ознайомитися з курсом

аналогічна заборона діє і для знака -, ми не можемо використовувати його на початку;
після знака - не може слідувати символ >;
не можна використовувати послідовно символи дефіс-мінус --;
не можна завершувати коментар символом дефіс або мінус -.

Є ще одне важливе зауваження в темі про помилки в роботі з HTML-кодом — це використання зайвих прогалин, а також іноді пропуск знаків оклику.

Приклад таких помилок можна побачити нижче:

< !-- Неправильный коментар #1 -->

<-- Неправильный коментар #2 -->

Оскільки ці коментарі написані неправильно, правила відображення на них не поширюються. Вони відображатимуться у браузері.

Онлайн-курс "Excel та Power BI для аналізу даних" від robot_dreams.

Навчіться самостійно аналізувати й візуалізувати дані, знаходити зв’язки, розуміти кожен аспект отриманої інформації та перетворювати її на ефективні рішення.

Детальніше про курс

Що ми ще можемо віднести до помилок?

Наприклад, незакритий тег чи відсутність обов’язкового атрибута. Використання нерекомендованих символів у посиланнях — також підводний камінь, на який часто натикаються розробники-початківці.

Щодо значення атрибуту id — воно не має повторюватися:

<!-- неправильно -->
<div id="block"></div>
<div id="block"></div>

<!-- правильно -->
<div id="block-1"></div>
<div id="block-2"></div>

Приклади використання коментарів у HTML-коді

Пропонуємо вам подивитись кілька прикладів використання коментарів у HTML-коді.

У цьому прикладі один коментар:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 <title>Коментар</title>  
 </head>
 <body>
  <p>Я одягнув шапку-невидимку.</p>
  <!--Я став невидимим-->
 </body>
</html>

Тут закоментовані розділи сайту «Меню» та «Вміст документа»:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>Коментарі</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body> 

  <!-- Меню -->
  <div>Меню</div>

  <!-- Контент -->
  <div>Вміст документа</div>

 </body> 
</html>

Ось гарний приклад, у якому коментар допомагає зрозуміти, де починається новий розділ:

<!DOCTYPE html>
<html>
 <head>
   <title>Коментарі</title>
   <meta charset="utf-8">
 </head>
 <body> 
   <!-- Розділ -->
   <section class="b-lastAdded">
    <h1 class="b-lastAdded__title">Останні додані світлини</h1>
    <div class="b-lastAdded__item">...</div>
   </section>
 </body> 
</html>

Браузери, які підтримують HTML

Сьогодні, як це не дивно, не всі браузери підтримують HTML. Але Opera, Chrome, олдскульна Mozilla та Internet Explorer забезпечують максимальну підтримку нових стандартів.

Курс Python розробки від Mate academy.

Python — найпопулярніша мова 2024 року. Наш курс допоможе вам стати професіоналом, готовим до викликів сучасного IT ринку. Ви навчитеся створювати вебсайти, аналізувати дані, розробляти алгоритми, та навіть створювати штучний інтелект. .

Отримати деталі про курс