Jak zakomentować kod w HTML?

Aby zakomentować kod w HTML, należy użyć specjalnej składni komentarza HTML, która umożliwia wstawianie notatek, opisów czy tymczasowe wyłączanie fragmentów kodu. Komentarze w HTML są ignorowane przez przeglądarki i nie są wyświetlane użytkownikom odwiedzającym stronę.

Składnia komentarza w HTML

Komentarz w HTML otwiera się za pomocą sekwencji <!-- i kończy za pomocą -->.

<!-- To jest komentarz w HTML --> 

Wszystko, co znajduje się pomiędzy tymi znacznikami, zostanie pominięte podczas wyświetlania strony.

Komentarz jednoliniowy

<!-- Tutaj znajduje się komentarz --> <p>Ten element będzie widoczny na stronie.</p> 

Komentarz wieloliniowy

Komentarze mogą obejmować także wiele linii:

<!-- To jest przykład komentarza wieloliniowego. Może on zawierać krótką dokumentację lub fragmenty wyłączonego kodu. --> 

Przykłady zastosowań komentarzy w HTML

Komentarze mają szerokie zastosowanie w pracy nad stroną internetową

  • Wyjaśnienie struktury kodu – np. podział sekcji na nagłówki, treść, stopkę;
  • Tymczasowe wyłączanie fragmentów kodu – podczas testowania lub prac programistycznych;
  • Dodawanie informacji lub ostrzeżeń dla innych programistów – pracujących nad tym samym kodem;
  • Oznaczanie początku i końca fragmentów pliku –.
<!-- Początek nagłówka strony --> <header> <h1>Mój blog</h1> </header> <!-- Koniec nagłówka strony --> 
<!-- <nav> <ul> <li><a href="#">Start</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> --> 
<!-- UWAGA: Poniższy artykuł wymaga aktualizacji sekcji -> <article> <h2>Stara treść</h2> </article> 
<!-- Początek treści głównej --> <main> <p>Witamy na stronie!</p> </main> <!-- Koniec treści głównej --> 

Najważniejsze zasady i dobre praktyki

  • Komentarze nie pojawiają się na stronie – widoczne są tylko w kodzie źródłowym (np. po użyciu opcji „Pokaż źródło strony”);
  • Nie należy umieszczać w komentarzach danych poufnych – (np. haseł), ponieważ każdy może podejrzeć kod źródłowy;
  • Unikaj nadmiernej liczby komentarzy – zwłaszcza w projektach, w których istotna jest minimalna waga pliku – same komentarze zwiększają rozmiar kodu;
  • Komentarze mogą zawierać polskie znaki, znaki specjalne i wiele linii tekstu;
  • W przypadku większych projektów warto przyjąć spójny styl komentowania – np. oznaczanie każdej sekcji rozpoczynającej się w kodzie:
<!-- START: sekcja ofertowa --> <!-- END: sekcja ofertowa --> 

Czego nie robić w komentarzach HTML

  • Unikaj umieszczania znaku -- – (dwa myślniki obok siebie) wewnątrz komentarza – to może prowadzić do problemów w renderowaniu kodu;
  • Nie komentuj całych plików – zwłaszcza gdy są to pliki produkcyjne, aby niepotrzebnie nie powiększać ich objętości;
  • Unikaj powielonych, nieprzydatnych lub nieaktualnych komentarzy – które mogą wprowadzać w błąd innych programistów.

Przykład praktyczny

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Przykład użycia komentarzy</title> <!-- Tutaj możesz dodać pliki CSS --> </head> <body> <!-- Sekcja nagłówka --> <header> <h1>Moja przykładowa strona</h1> </header> <!-- Sekcja główna --> <main> <p>To jest główny tekst strony.</p> <!-- <p>Ta linia jest tymczasowo wyłączona.</p> --> </main> <!-- Sekcja stopki --> <footer> <p>Wszelkie prawa zastrzeżone © 2025</p> </footer> </body> </html> 

Komentarze w HTML to uniwersalne narzędzie ułatwiające zarządzanie kodem, współpracę z innymi osobami oraz testowanie i rozwijanie projektów webowych. Warto stosować je świadomie, dbając o przejrzystość i czytelność kodu oraz bezpieczeństwo informacji.

Programista i twórca serwisu Creative Coding, absolwent Politechniki Warszawskiej (WEiTI). Od 10+ lat łączy front‑end, grafikę generatywną i narzędzia dla twórców; opublikował 120+ projektów i artykułów, prowadził warsztaty dla 2 000+ uczestników. Pracuje z JavaScriptem, Three.js, P5.js i GLSL, bada wydajność i dokumentuje procesy, tworząc praktyczne przewodniki dla osób łączących kod z obrazem, dźwiękiem i interakcją.
Zostaw komentarz

Komentarze

Brak komentarzy. Dlaczego nie rozpoczniesz dyskusji?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *