Komentarze w HTML

Po co są komentarze w HTML? 💬

Komentarze w HTML służą do opisywania kodu – są widoczne w kodzie źródłowym, ale nie wyświetlają się na stronie.

pomagają zrozumieć trudniejsze fragmenty kodu,
zostawiasz notatki dla siebie lub innych programistów,
możesz tymczasowo „wyłączyć” fragment kodu bez jego usuwania.

Komentarz w HTML wygląda tak:

Przykład

<!-- To jest komentarz -->

Przeglądarka ignoruje wszystko, co znajduje się między .

Składnia komentarza

zaczynasz od <!--
kończysz -->
komentarz może być w jednej linii lub w kilku liniach

Przykład

<!--
  To jest
  komentarz wieloliniowy.
-->

Uwaga: komentarze nie mogą zawierać -- w środku treści.

Gdzie można używać komentarzy?

Komentarze możesz dodać praktycznie wszędzie:

w <head> (np. opis sekcji z metadanymi),
w <body> (np. opis struktury strony),
pomiędzy elementami (np. oddzielenie sekcji),
wokół fragmentu kodu, który chcesz tymczasowo ukryć.

Przykład

<!DOCTYPE html>
<html>
  <head>
    <!-- Metadane strony -->
    <meta charset="UTF-8">
    <title>Strona z komentarzami</title>
  </head>
  <body>
    <!-- Nagłówek strony -->
    <h1>Witaj na stronie!</h1>

    <!-- Tymczasowo wyłączony paragraf
    <p>Ten tekst jest ukryty.</p>
    -->

    <p>Ten tekst jest widoczny.</p>
  </body>

</html>

Komentarze do testowania i debugowania 🧪

Komentarze są bardzo przydatne, gdy chcesz:

sprawdzić, czy konkretny fragment psuje stronę,
ukryć część kodu, ale go nie kasować,
oznaczyć miejsca do poprawy.

Przykład

<!-- TODO: Zmienic ten tekst na bardziej profesjonalny -->
<p>Jakis tekst tymczasowy.</p>

<!-- FIXME: Ten link nie dziala poprawnie w Firefox -->
<a href="#">Kliknij mnie</a>

Popularne „słowa-klucze” w komentarzach:

TODO – coś do zrobienia,
FIXME – coś do naprawy,
NOTE – ważna notatka.

Dobre i złe praktyki

Dobre praktyki:

komentuj trudniejsze fragmenty kodu,
pisz komentarze po polsku lub angielsku (spójnie w całym projekcie),
używaj komentarzy do oznaczania sekcji (np. ).

Złe praktyki:

komentarze typu:  nad <p> – to nic nie wyjaśnia,
zostawianie starych, nieaktualnych komentarzy,
wpisywanie w komentarzach haseł, danych logowania itp.

FAQ

Czy komentarze widać na stronie? Nie, komentarze są widoczne tylko w kodzie źródłowym.

Czy komentarze spowalniają stronę? Trochę mogą, jeśli jest ich bardzo dużo – ale w typowych projektach to nie problem.

Czy mogę zagnieżdżać komentarze? Nie, składnia HTML na to nie pozwala – lepiej użyć kilku prostych komentarzy obok siebie.

Czy komentarze działają też w CSS i JS? Tak, ale mają inną składnię (np. w CSS: /* komentarz */).

Ćwiczenie

Otwórz swój plik index.html.
Dodaj komentarz nad głównym nagłówkiem.
Zakomentuj jeden paragraf.
Otwórz stronę w przeglądarce i sprawdź, czy zakomentowany tekst zniknął.

Spróbuj też podejrzeć komentarze przez Wyświetl źródło strony w przeglądarce.