HTML (HyperText Markup Language) — мова гіпертекстової розмітки документів для перегляду вебсторінок у браузері. HTML опановують з азами програмування, і коментарі HTML — окремий розділ.
Редакція Highload розібралася, що таке коментарі 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> З відображенням коментарів у браузері все просто — вони не відображаються 🙂 Це твердження універсальне для всіх коментарів.
Коментарі бувають різні — вони можуть складатися з одного або кількох рядків. Пропонуємо спочатку розглянути коментарі, які складаються з одного рядка. У цьому випадку нам потрібно розмістити текст між послідовністю символів <!-- та -->:
<!-- Це перший коментар, його не буде видно на сторінці --> <h1>А це — заголовок. Його буде видно на сторінці.</h1> <!-- Це другий коментар, його також не буде видно -->
Знак оклику в цьому випадку ставиться на початку, в кінці він вже не потрібен.
Цей коментар — найпростіший приклад використання коментарів у HTML-коді.
Більш складна варіація — це HTML-коментар із кількох рядків.
Приклад такого коментаря:
<!-- Багаторядковий коментар. У ньому міститься багато інформації. Можливо вмістити навіть цілу статтю. Або оповідання. -->
Або ж:
<!-- <h1>Закоментований заголовок</h1> <p>Цього абзацу також не буде видно</p> -->
У випадку з таким коментарем символи <!-- HTML-коментаря з декількох рядків --> вказують браузеру, що текст, розташований між набором символів, що відкриває, <!-- і набором символів, що закриває, --> — багаторядковий коментар.
Умовні коментарі HTML — це коментарі, які дають можливість задавати блоки коду, які будуть виконуватися виключно у заданій версії браузера Internet Explorer. У всіх інших версіях браузера Internet Explorer та інших браузерах їх вміст вважатиметься звичайним коментарем.
У умовних коментарів є свій синтаксис, який потрібно задавати:
<!--[if Умова IE Версія]>Якийсь текст<![endif]-->
У нас є кілька опцій для вибору оператора:
gt — більше ніж;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.Параметр «Версія» необов’язковий, але в ньому можна вказати номер версії браузера Internet Explorer.
Давайте подивимося на кілька прикладів:
<!--[if IE]>Якийсь код<![endif]--> — виконувати вміст коментаря, якщо браузер — будь-яка версія Internet Explorer;
<!--[if gt IE 9]>Якийсь код<![endif]--> — виконувати вміст коментаря, якщо браузер — 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]-->
Кажучи про коментарі, неможливо не згадати можливих помилок, з якими можуть зіткнутися розробники.
Для початку згадаємо важливі правила, які існують у коментуванні:
>;-, ми не можемо використовувати його на початку;- не може слідувати символ >; --;-.Є ще одне важливе зауваження в темі про помилки в роботі з HTML-кодом — це використання зайвих прогалин, а також іноді пропуск знаків оклику.
Приклад таких помилок можна побачити нижче:
< !-- Неправильный коментар #1 -->
<-- Неправильный коментар #2 -->
Оскільки ці коментарі написані неправильно, правила відображення на них не поширюються. Вони відображатимуться у браузері.
Що ми ще можемо віднести до помилок?
Наприклад, незакритий тег чи відсутність обов’язкового атрибута. Використання нерекомендованих символів у посиланнях — також підводний камінь, на який часто натикаються розробники-початківці.
Щодо значення атрибуту id — воно не має повторюватися:
<!-- неправильно --> <div id="block"></div> <div id="block"></div> <!-- правильно --> <div id="block-1"></div> <div id="block-2"></div>
Пропонуємо вам подивитись кілька прикладів використання коментарів у 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. Але Opera, Chrome, олдскульна Mozilla та Internet Explorer забезпечують максимальну підтримку нових стандартів.
Компанія OpenAI розглядає додаткові способи отримання доходу, одним з яких є розміщення реклами в ChatGPT.…
Платформа спільної розробки та хостингу коду GitHub дозволила завантажувати додаткові типи файлів до задач, запитів…
Провідний китайський стартап у сфері штучного інтелекту DeepSeek був змушений відкласти випуск своєї майбутньої моделі…
Google представила компактну версію своєї відкритої моделі Gemma, розроблену для роботи на локальних пристроях, включно…
Перший віце-прем’єр-міністр та очільник Мінцифри Михайло Федоров під час вчорашнього стріму в Тік-Ток розповів, що…
Додаток Google Translate отримав нову функцію Practice для вивчення іноземних мов. Про це повідомляє Android…