Aby dodać komentarz w kodzie HTML, należy użyć specjalnej składni, dzięki której fragment tekstu będzie zupełnie niewidoczny dla użytkownika odwiedzającego stronę, choć nadal pozostanie dostępny w kodzie źródłowym. Komentarze są bardzo przydatnym narzędziem przy pracy nad stronami internetowymi – pomagają organizować kod, zostawiać krótkie notatki czy wyjaśniać działanie poszczególnych fragmentów.
Podstawowa składnia komentarzy HTML
Komentarz w HTML umieszczamy pomiędzy znacznikami:
<!-- To jest komentarz w HTML --> Wszystko, co znajduje się pomiędzy <!-- a -->, nie będzie wyświetlone przez przeglądarkę, nawet jeśli w treści komentarza pojawią się inne znaczniki HTML czy teksty.
Przykład:
<!-- Tu zaczyna się sekcja główna strony -->
<div class="main-section">
<h1>Witamy na naszej stronie!</h1>
</div>
<!-- Tu kończy się sekcja główna --> Komentarze wielowierszowe
Można dodawać komentarze rozciągające się na wiele linii – wystarczy zachować początek i koniec komentarza:
<!-- Poniższy fragment kodu odpowiada za wyświetlanie sekcji z nowościami. W przyszłości można go rozbudować o listę dynamiczną produktów. -->
<div class="news-section">
<!-- Kolejny komentarz wewnątrz kodu -->
<p>Nowości produktowe!</p>
</div> Komentarz wielowierszowy jest często używany do szczegółowych opisów złożonych fragmentów kodu lub do tymczasowego „wyłączania” ich bez kasowania.
Typowe zastosowania komentarzy HTML
Stosowanie komentarzy w HTML ma wiele praktycznych zastosowań –
- Wyjaśnienia fragmentów kodu – komentarz pozwala opisać działanie danego elementu HTML, co ułatwia późniejszą edycję lub współpracę z innymi osobami;
- Oznaczanie początku i końca sekcji – w rozbudowanym dokumencie HTML warto stosować komentarze jako „zakładki”, które wyraźnie oddzielają sekcje, np. nagłówka, stopki, panelu nawigacji itp.;
- Tymczasowe ukrywanie kodu – fragment kodu HTML objęty komentarzem zostaje „wyłączony” – przeglądarka go nie analizuje ani nie wyświetla. W ten sposób można na przykład testować różne wersje sekcji, nie usuwając poprzednich zapisów;
- Notatki związane z przyszłymi zmianami – komentarze służą także do zostawiania wskazówek na przyszłość, np. przypomnienia o wymaganej optymalizacji czy rozbudowie określonego bloku.
Przykłady wykorzystania komentarzy
- Opis struktury dokumentu
<!-- Początek nagłówka strony -->
<header>
<h1>Moja strona domowa</h1>
</header>
<!-- Koniec nagłówka strony --> - Ukrywanie fragmentu kodu
<!--
<form action="/szukaj" method="get">
<input type="text" name="query">
<button type="submit">Szukaj</button>
</form>
--> W powyższym przykładzie formularz nie będzie wyświetlany, dopóki nie zostanie odkomentowany.
- Notatka dla innego programisty
<!-- TODO: Zmień link, kiedy pojawi się nowa wersja polityki prywatności -->
<a href="/stara_polityka.pdf">Polityka prywatności</a> Ważne zasady korzystania z komentarzy HTML
- Nie umieszczamy poufnych danych w komentarzach – kod źródłowy HTML jest dostępny dla każdego użytkownika przeglądarki; komentarze mogą być łatwo odczytane przez osoby postronne;
- Nie zaleca się zagnieżdżania komentarzy – wewnątrz komentarza nie można umieścić kolejnego
<!-- ... -->, ponieważ prowadzi to do błędów interpretacji kodu; - Unikaj nadmiaru komentarzy przy dążeniu do minimalizacji rozmiaru pliku HTML – komentarze także wpływają na wagę dokumentu, choć przeglądarka je ignoruje.
Podsumowanie
Dodawanie komentarzy w HTML to prosta i bardzo istotna praktyka, która pomaga zarówno w organizacji kodu, jak i komunikacji między osobami pracującymi nad stroną. Pamiętaj, że wszystkie informacje zawarte w komentarzu mogą być widoczne dla każdego użytkownika, który podejrzy źródło strony. Warto więc stosować je z umiarem, skupiając się na czytelności i funkcjonalności własnego kodu.
