💬 Що таке коментар і як він пишеться

Уявіть ситуацію. Ви пишете код — і хочете залишити поруч із ним коротке пояснення. Наприклад, написати: «Це правило робить заголовок синім». Але якщо ви просто напишете цей текст у файлі — браузер спробує його виконати як код і зламається.

Щоб цього не сталося, і придумали коментарі.

---

✍️ Синтаксис коментаря

Синтаксис — це правила, як саме треба щось записувати в коді. Слово трохи складне, але суть проста: це як «граматика» для мови програмування.

У коментарів є спеціальні символи, які показують браузеру, де коментар починається і де закінчується. Без цих символів браузер не зрозуміє, що це не код.

---

🟠 Синтаксис коментаря в HTML

Коментар в HTML пишеться так:

<!-- текст коментаря -->

Розберімо по частинах:

• <!-- — початок коментаря. Символи: <, !, -, -.
• текст коментаря — те, що ви хочете написати. Може бути будь-якою довжиною.
• --> — кінець коментаря. Символи: -, -, >.

Все, що стоїть між <!-- і -->, браузер ігнорує.

Приклад:

<!-- Це коментар, браузер його не побачить -->
<p>А це звичайний абзац — він буде на сторінці</p>

Що станеться: браузер побачить перший рядок — і повністю пропустить його. На сторінці буде тільки абзац.

📌 Зверніть увагу: коментар не з’явився на сторінці взагалі. Тільки абзац.

---

🔵 Синтаксис коментаря в CSS

Коментар в CSS пишеться інакше:

/* текст коментаря */

Розберімо по частинах:

• /* — початок коментаря. Символи: /, *.
• текст коментаря — те, що ви хочете написати.
• */ — кінець коментаря. Символи: *, /.

Все, що стоїть між /* і */, браузер ігнорує.

Приклад:

/* Це коментар, браузер його не побачить */
h1 {
  color: navy;
}

Що станеться: браузер пропустить перший рядок і виконає правило — заголовок стане темно-синім.

📌 Зверніть увагу: коментар не з’явився на сторінці, але правило спрацювало — заголовок став темно-синім.

---

⚠️ Синтаксиси РІЗНІ — не можна плутати

Це дуже важливий момент. Коментар в HTML і коментар в CSS — це різні речі, як дві різні мови.

Де	Початок	Кінець	Приклад
HTML	<!--	-->	<!-- Заголовок сторінки -->
CSS	/*	*/	/* Колір заголовка */

---

🔥 Що станеться, якщо НЕ закрити коментар

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

У HTML — забули -->

Ось код, де коментар не закритий:

<!-- Тут я щось пояснюю
<h1>Мій клас</h1>
<p>Це абзац</p>

Що станеться: браузер не знайде --> — і вважатиме, що все до кінця файлу є коментарем. Уся сторінка зникне.

У CSS — забули */

Ось код, де коментар у CSS не закритий:

/* Тут я щось пояснюю
h1 {
  color: navy;
}

p {
  color: gray;
}

Що станеться: браузер вважатиме все до кінця файлу коментарем. Жодне правило не спрацює — сторінка виглядатиме так, ніби CSS не підключено.

📌 Зверніть увагу: заголовок чорний, абзац чорний. Правила color: navy; і color: gray; не працюють — бо вони «з’їдені» коментарем.

---

❓ Поміркуйте:

• Що таке коментар — це код чи текст?
• Як починається й закінчується коментар у HTML?
• А в CSS?
• Чому в HTML і CSS різний синтаксис коментарів?
• Що станеться, якщо забути закрити коментар у CSS?

🎯 Три способи використання коментарів

Тепер, коли ми знаємо синтаксис, розберімо навіщо коментарі потрібні на практиці. Є три основні ситуації, де вони допомагають.

---

1️⃣ Пояснити, що робить код

Найпростіше застосування. Ви пишете код — і залишаєте підказку для себе або колеги.

Приклад у CSS:

/* Головний заголовок сторінки — робимо синім і по центру */
h1 {
  color: navy;
  text-align: center;
}

/* Цитати виділяємо курсивом */
.quote {
  font-style: italic;
}

Що це дає: через місяць ви побачите ці рядки — і одразу зрозумієте, навіщо вони. Не треба буде розбиратися, чому саме navy і чому italic.

Приклад у HTML:

<!-- Головний блок сторінки початок -->
<h1>Мій клас</h1>
<p>Наш клас дуже дружний...</p>
<!-- Головний блок сторінки закінчився -->

<!-- Блок про досягнення початок -->
<h2>Наші досягнення</h2>
<ul>
  <li>Перемога в олімпіаді</li>
  <li>Перше місце в турнірі</li>
</ul>
<!-- Блок про досягнення закінчився -->

---

2️⃣ Тимчасово вимкнути код (закоментувати)

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

Приклад у CSS. Ось код із двома правилами:

h1 {
  color: navy;
  font-size: 40px;
}

p {
  color: gray;
}

Тепер закоментуємо font-size — щоб побачити, як заголовок виглядає без цього розміру:

h1 {
  color: navy;
  /* font-size: 40px; */
}

p {
  color: gray;
}

Що сталося:

• font-size: 40px; — закоментована. Браузер її ігнорує.
• Заголовок залишається темно-синім (бо color не закоментовано), але розмір стандартний.
• Абзац — сірий, як і був.

Тепер закоментуємо все правило h1. Для цього поставимо /* перед правилом і */ після нього:

/*
h1 {
  color: navy;
  font-size: 40px;
}
*/

p {
  color: gray;
}

Що сталося:

• Усе правило h1 закоментовано. Браузер його не бачить.
• Заголовок виглядає так, ніби CSS до нього не застосовувався — чорний, стандартного розміру.
• Абзац залишився сірим — його правило не закоментовано.

Те саме працює в HTML. Закоментуємо цілий абзац:

<h1>Мій клас</h1>
<!-- <p>Цей абзац тимчасово не показується</p> -->
<p>А цей абзац є на сторінці</p>

Що сталося: перший абзац зник зі сторінки. Він є в коді, але браузер його не показує.

---

3️⃣ Розділити код на логічні частини

У великих файлах коментарі-«заголовки» допомагають швидко орієнтуватися.

Приклад у CSS:

/* === ЗАГОЛОВКИ === */
h1 {
  color: navy;
}

h2 {
  color: darkgreen;
}

/* === АБЗАЦИ === */
p {
  color: gray;
  font-size: 18px;
}

/* === СПИСКИ === */
ul {
  color: darkred;
}

Що це дає: замість одного довгого списку правил — три чітко відокремлені частини. Легко знайти потрібне.

Приклад у HTML:

<!-- === ШАПКА САЙТУ === -->
<header>
  <h1>Мій сайт</h1>
</header>

<!-- === ОСНОВНИЙ ВМІСТ === -->
<main>
  <p>Тут основний текст сторінки</p>
</main>

<!-- === ПІДВАЛ === -->
<footer>
  <p>© 2026 Мій сайт</p>
</footer>

---

---

❓ Поміркуйте:

• Чому закоментувати код краще, ніж видалити його?
• Навіщо в HTML писати коментар і до, і після блоку?
• Як коментарі допомагають у великих проєктах?
• Що станеться зі сторінкою, якщо закоментувати абзац у HTML?

✅ Підсумок

Ми розібрали, що таке коментарі, як їх писати та навіщо вони потрібні. Ось головне, що варто запам’ятати.

---

❓ Перевірте себе

Спробуйте відповісти на кожне запитання самостійно — а потім натисніть, щоб перевірити себе.

1. Що таке коментар — це код чи текст?

Це текст, який браузер ігнорує. Він не виконується й не впливає на сторінку. Існує тільки для людей.

2. Як починається й закінчується коментар у HTML?

Початок — <!--, кінець — -->. Усе між ними браузер не читає.

3. А в CSS?

Початок — /*, кінець — */. Усе між ними браузер ігнорує.

4. Чому в HTML і CSS різний синтаксис коментарів?

Бо це дві різні мови. HTML описує структуру сторінки, CSS — оформлення. І в кожної мови — свій синтаксис для коментарів.

5. Що станеться, якщо забути поставити кінець коментаря?

Браузер вважатиме, що все до кінця файлу — коментар. У HTML усе, що після початку коментаря, зникне (до — залишиться). У CSS не працюватиме жодне правило після незакритого коментаря.

6. Навіщо коментарі використовують у коді?

Три причини:

• Пояснити, що робить код.
• Тимчасово вимкнути частину коду для тесту.
• Розділити код на логічні частини.

7. Чому закоментувати код краще, ніж видалити?

Бо закоментований код легко повернути — просто прибрати /* і */. А видалений код доведеться писати заново.