Komentarze w HTML - Kurs HTML

Lekcja 1.5: Komentarze w HTML

Strona główna > Rozdział 1: Wprowadzenie do HTML > Komentarze w HTML

Czym są komentarze w HTML?

Komentarze w HTML to fragmenty tekstu w kodzie źródłowym strony, które są całkowicie ignorowane przez przeglądarkę internetową. Oznacza to, że nie są one wyświetlane użytkownikowi ani nie wpływają na sposób renderowania strony. Komentarze służą głównie do dodawania notatek, wyjaśnień lub tymczasowego wyłączania fragmentów kodu dla programistów.

Składnia komentarzy HTML

Komentarze w HTML umieszcza się między specjalnymi znacznikami:  (koniec komentarza). Wszystko, co znajduje się pomiędzy tymi znacznikami, jest traktowane jako komentarz.

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

Komentarze mogą obejmować jedną lub wiele linii:

Komentarz jednoliniowy:

<p>To jest widoczny paragraf.</p> <!-- Ten paragraf wyjaśnia kod -->

Komentarz wieloliniowy:

<!-- 
    To jest komentarz,
    który zajmuje
    kilka linii.
-->
<p>Kolejny widoczny paragraf.</p>

Zastosowania komentarzy

1. Wyjaśnianie kodu

Najczęstszym zastosowaniem komentarzy jest dodawanie wyjaśnień do kodu. Pomaga to innym programistom (lub Tobie w przyszłości) zrozumieć, co robi dany fragment kodu, dlaczego został napisany w określony sposób lub jakie ma znaczenie.

<!-- Sekcja nawigacji głównej -->
<nav>
    <ul>
        <li><a href="index.php">Strona główna</a></li>
        <li><a href="about.php">O nas</a></li>
        <!-- TODO: Dodać link do strony kontaktowej później -->
    </ul>
</nav>

2. Debugowanie kodu

Komentarze są niezwykle przydatne podczas debugowania (szukania i naprawiania błędów). Możesz tymczasowo "wykomentować" (wyłączyć) fragment kodu, aby sprawdzić, czy to on powoduje problem, bez konieczności jego usuwania.

<p>Ten paragraf jest widoczny.</p>

<!-- Poniższy fragment jest tymczasowo wyłączony na potrzeby testów
<div class="problematic-section">
    <p>Jakiś potencjalnie problematyczny kod...</p>
</div>
-->

<p>Ten paragraf również jest widoczny.</p>

Gdy znajdziesz i naprawisz błąd, możesz łatwo usunąć znaczniki komentarza, aby przywrócić wyłączony fragment kodu.

3. Notatki i przypomnienia

Możesz używać komentarzy do zostawiania sobie notatek, przypomnień o zadaniach do wykonania (TODO) lub informacji o autorstwie fragmentu kodu.

<!-- Autor: Jan Kowalski, Data: 2025-04-28 -->
<!-- TODO: Zoptymalizować ładowanie obrazków w tej sekcji -->
<section class="gallery">
    <!-- ... kod galerii ... -->
</section>

Czego unikać w komentarzach?

Nie umieszczaj -- wewnątrz komentarza: Sekwencja -- jest zarezerwowana do oznaczania końca komentarza. Użycie jej wewnątrz może spowodować błędy.
Nie zagnieżdżaj komentarzy: Komentarze HTML nie mogą być zagnieżdżane. Przeglądarka zinterpretuje pierwsze wystąpienie --> jako koniec komentarza.
Nie umieszczaj wrażliwych danych: Pamiętaj, że komentarze są częścią kodu źródłowego strony i każdy może je zobaczyć, wybierając opcję "Wyświetl źródło strony" w przeglądarce. Nigdy nie umieszczaj w komentarzach haseł, kluczy API ani innych poufnych informacji.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Dodaj komentarze do poniższego kodu HTML, wyjaśniając rolę nagłówka i paragrafu oraz tymczasowo wyłączając drugi paragraf.

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Strona z komentarzami</title>
</head>
<body>
    <h1>Nagłówek strony</h1>
    <p>To jest pierwszy paragraf.</p>
    <p>To jest drugi paragraf, który ma być wyłączony.</p>
</body>
</html>

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Strona z komentarzami</title>
</head>
<body>
    <!-- Główny nagłówek strony -->
    <h1>Nagłówek strony</h1>
    
    <!-- Pierwszy paragraf z treścią -->
    <p>To jest pierwszy paragraf.</p>
    
    <!-- Poniższy paragraf jest tymczasowo wyłączony
    <p>To jest drugi paragraf, który ma być wyłączony.</p>
    -->
</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Dodaj komentarz w sekcji <head> wyjaśniający, do czego służy meta tag charset.
Utwórz listę <ul> z trzema elementami <li> i dodaj komentarz nad listą opisujący jej zawartość.
Wykomentuj jeden z elementów listy <li>.
Dodaj komentarz TODO z przypomnieniem o dodaniu obrazka na stronę.

Najczęściej zadawane pytania

Jak wstawić komentarz w HTML?

Komentarz w HTML wstawia się za pomocą znaczników  na końcu. Cały tekst umieszczony pomiędzy tymi znacznikami jest traktowany jako komentarz i ignorowany przez przeglądarkę.

Czy komentarze HTML są widoczne dla użytkowników strony?

Nie, komentarze HTML nie są bezpośrednio widoczne dla użytkowników przeglądających stronę. Są one jednak częścią kodu źródłowego, więc każdy może je zobaczyć, korzystając z opcji "Wyświetl źródło strony" w przeglądarce.

Do czego służą komentarze w HTML?

Komentarze służą głównie do dodawania notatek i wyjaśnień w kodzie, co ułatwia jego zrozumienie. Są również przydatne do tymczasowego wyłączania fragmentów kodu podczas testowania i debugowania strony.

Czy można zagnieżdżać komentarze HTML?

Nie, standard HTML nie pozwala na zagnieżdżanie komentarzy. Przeglądarka zinterpretuje pierwsze napotkane --> jako koniec komentarza, co może prowadzić do nieoczekiwanych błędów, jeśli spróbujesz umieścić jeden komentarz wewnątrz drugiego.

Czy komentarze wpływają na wydajność strony?

Komentarze minimalnie zwiększają rozmiar pliku HTML, co teoretycznie może nieznacznie wpłynąć na czas ładowania. Jednak w praktyce wpływ ten jest zazwyczaj pomijalny, a korzyści płynące z czytelności kodu przeważają nad tym minimalnym kosztem.