Пошук уроків, статей та іншого контенту
Навчитеся додавати однорядкові та багаторядкові коментарі, які допомагають пояснювати HTML-код і не відображаються на сторінці.
Коментарі — це пояснення в коді, які браузер не відображає на вебсторінці.
Їх використовують, щоб:
пояснити призначення частини коду;
залишити нагадування для себе або інших розробників;
тимчасово приховати частину HTML-коду;
розділити великий документ на логічні частини.
Коментарі залишаються у вихідному коді сторінки. Користувач не бачить їх безпосередньо на сторінці, але може переглянути через інструменти розробника або перегляд джерела.
В HTML коментар починається послідовністю <!-- і завершується послідовністю -->.
<!-- Це коментар -->
<h1>Моя вебсторінка</h1>Браузер відображатиме заголовок, але текст Це коментар на сторінці не з'явиться.
Коментар можна розмістити в тому самому рядку, що й HTML-код:
<h1>Моя вебсторінка</h1> <!-- Головний заголовок сторінки -->Однак для кращої читабельності пояснення зазвичай записують на окремому рядку.
HTML не має окремого синтаксису для однорядкових і багаторядкових коментарів. Ті самі позначки <!-- і --> можна використовувати для коментаря, який займає кілька рядків:
<!--
Цей коментар займає
кілька рядків.
Він не відображається на сторінці.
-->Багаторядкові коментарі зручні для пояснення складнішої частини документа:
<!--
Секція з інформацією
про компанію
-->
<section>
<h2>Про нас</h2>
<p>Ми створюємо вебсайти.</p>
</section>Коментарі можна використати, щоб тимчасово прибрати елемент зі сторінки, не видаляючи його з файлу:
<h1>Моя сторінка</h1>
<!--
<p>Цей абзац тимчасово прихований.</p>
-->У цьому прикладі браузер не створить абзац на сторінці.
Такий спосіб зручний під час розробки, але для остаточного коду непотрібні фрагменти краще видаляти, а не залишати закоментованими.
У CSS коментарі мають інший синтаксис: вони починаються з /* і завершуються */.
/* Основні стилі сторінки */
body {
background-color: white;
color: #222;
}CSS-коментарі також можуть займати кілька рядків:
/*
Стилі для головного заголовка.
Заголовок буде синім і по центру.
*/
h1 {
color: blue;
text-align: center;
}Не можна використовувати HTML-синтаксис <!-- --> у CSS:
/* Правильно */
body {
color: black;
}
/* Неправильно для CSS:
<!-- body { color: black; } -->
*/<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Коментарі</title>
<style>
/* Основні стилі сторінки */
body {
font-family: Arial, sans-serif;
color: #222;
}
/*
Стиль для головного заголовка:
вирівнюємо текст по центру
*/
h1 {
text-align: center;
color: darkblue;
}
</style>
</head>
<body>
<!-- Заголовок сторінки -->
<h1>Коментарі в коді</h1>
<!-- Основний текстовий блок -->
<p>
Коментарі допомагають пояснювати код.
</p>
<!-- Цей елемент не відображається на сторінці
<p>Тимчасово прихований текст.</p>
-->
</body>
</html>На сторінці відобразяться лише заголовок і видимий абзац. Коментарі та закоментований абзац браузер не покаже.
Пишіть коментарі там, де вони справді допомагають зрозуміти код:
<!-- Навігація сайту -->
<nav>
<a href="/">Головна</a>
</nav>Не потрібно коментувати очевидні дії:
<!-- Це заголовок -->
<h1>Новини</h1>Такий коментар майже не додає корисної інформації, адже роль елемента вже зрозуміла з назви h1.
Хороший коментар пояснює навіщо потрібен код, а не просто повторює його:
<!-- Повідомлення показується лише користувачам, які не авторизувалися -->
<p>Увійдіть в обліковий запис, щоб продовжити.</p>Коментар має завершуватися саме послідовністю -->:
<!-- Правильний HTML-коментар -->Якщо не додати -->, браузер може сприйняти решту документа як частину коментаря.
HTML-коментарі:
<!-- HTML-коментар -->CSS-коментарі:
/* CSS-коментар */Ці синтаксиси не слід змішувати.
HTML-коментарі не можна вкладати один в один:
<!--
Зовнішній коментар
<!-- Внутрішній коментар -->
-->Послідовність --> у внутрішньому коментарі завершить зовнішній коментар раніше, ніж очікується. Якщо потрібно тимчасово пояснити великий фрагмент, використовуйте один коментар без додаткових пар <!-- --> усередині.
Коментарі не показуються на сторінці, але вони не є секретними. Не зберігайте в них:
паролі;
ключі доступу;
токени;
приватну інформацію;
службові дані, які не повинні потрапляти до користувача.
HTML-коментарі записують між <!-- і -->.
HTML-коментар може займати один або кілька рядків.
CSS-коментарі записують між /* і */.
Коментарі не відображаються на сторінці, але залишаються у вихідному коді.
Коментарі допомагають пояснювати код і тимчасово приховувати HTML-елементи.
Не залишайте в коментарях паролі та інші конфіденційні дані.