Коментарі та пробіли

Ласкаво просимо до "Основ HTML"! Сьогодні ми розглянемо двох "невидимих" супергероїв веброзробки: коментарі та пробіли. Ці поняття не змінюють яскравий дизайн, який бачать відвідувачі на екрані, але значно спрощують життя розробнику. Поїхали!

Що таке HTML-коментар?

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

Початок коментаря: .

Ось як виглядає коментар між двома тегами абзацу:

Можна редагувати

<p>Ласкаво просимо на мій сайт!</p>

<!-- Це секретний коментар тільки для мене -->

<p>Ось мій другий абзац.</p>

Навіщо використовувати коментарі?

Можливо, ти думаєш: навіщо писати код, який ніхто не бачить? Є дві головні причини:

Залишати нотатки: Уяви коментарі як стікери для коду. Можеш залишати нагадування для себе в майбутньому або пояснювати складний фрагмент, щоб колегам було легше його зрозуміти.
Тимчасово вимикати код: Якщо ти тестуєш сайт і шукаєш помилку, можна тимчасово "сховати" частину коду, перетворивши її на коментар. Розробники називають це "закоментувати код". Після виправлення помилки просто прибери символи коментаря і код знову працюватиме.

Секрет браузера

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

Але коментарі не є повністю захищеними. Будь-хто може натиснути правою кнопкою миші й вибрати "Переглянути код сторінки", щоб побачити сирий HTML. Тому ніколи не записуй у коментарі паролі чи будь-яку чутливу інформацію.

Стискання пробілів (whitespace collapse)

Коли ти набираєш текст у звичайному редакторі, натискання "Пробіл" або "Enter" одразу зміщує текст на екрані. В HTML це працює інакше.

Браузери використовують правило whitespace collapse (стискання пробілів). Це означає, що браузер ігнорує зайві пробіли та порожні рядки. Якщо ти натиснеш "Пробіл" або "Enter" 50 разів між двома словами в HTML, браузер стисне все це до одного звичайного пробілу на екрані.

Швидка аналогія: Уяви, що ти пакуєш пухку зимову куртку у вакуумний пакет. Скільки б повітря (зайвих пробілів) не було всередині, вакуум (браузер) "витягне" його і залишить лише головне (твій текст).

Чому браузери так роблять? Це дозволяє тобі використовувати стільки пробілів і порожніх рядків, скільки потрібно для зручного читання коду, не ламаючи випадково фінальний вигляд сторінки.

Підсумок

Ти чудово справляєшся! Коротко повторимо головне:

Коментарі () — це невидимі нотатки для тебе й інших розробників.
Коментарі можна використовувати, щоб тимчасово вимикати код під час тестування.
Відвідувачі не бачать коментарі на сторінці, але можуть знайти їх через "Переглянути код сторінки".
Браузери стискають зайві пробіли та порожні рядки до одного пробілу. Це корисне правило називається whitespace collapse.