<!-- … -->
Komentarz w kodzie HTML: notatka dla ludzi, której przeglądarka nie wyświetla, choć każdy zobaczy ją w źródle strony.
- Wyświetlanie
- brak (nie jest wyświetlany)
- Dozwolona zawartość
- Dowolny tekst, także w wielu liniach, bez sekwencji
-->,--!>i<!--
Przykład
#<!-- Lekcja 4, treść poprawiona 12 września -->
<h2>Lekcja 4: Listy w HTML</h2>
<p>Listę numerowaną tworzysz znacznikiem <ol>, a wypunktowaną znacznikiem <ul>.</p>
<!--
<p>Zadanie domowe: zrób listę zakupów na weekend.</p>
<button type="button">Sprawdź rozwiązanie</button>
-->
<p>W następnej lekcji zajmiemy się tabelami.</p>W podglądzie widać tylko nagłówek i dwa akapity. Zakomentowane zadanie z przyciskiem nadal jest w kodzie i wróci na stronę, gdy usuniesz <!-- i -->.
Definicja i zastosowanie
#Komentarz zaczyna się od <!--, a kończy na -->. Wszystko pomiędzy przeglądarka pomija przy wyświetlaniu strony, także znaczniki. Komentarz może zajmować jedną linię albo wiele i może stać niemal wszędzie w dokumencie, nawet przed znacznikiem <html> i po </html>. Nie wstawisz go tylko do środka znacznika, na przykład między atrybuty.
Komentarzy używa się na dwa sposoby. Pierwszy to notatki dla siebie i zespołu: wyjaśnienie nieoczywistego fragmentu, oznaczenie początku i końca dużej sekcji, przypomnienie o czymś do poprawienia. Drugi to zakomentowanie, czyli tymczasowe wyłączenie fragmentu kodu bez usuwania go. W VS Code zrobisz to skrótem Ctrl + / (na Macu Cmd + /).
Komentarz kończy się na pierwszym napotkanym -->. Dlatego komentarzy nie da się zagnieżdżać: reszta zewnętrznego komentarza pojawi się na stronie jako zwykły tekst. Z tego samego powodu w treści komentarza nie może wystąpić --> ani <!--. Brak zamykającego --> jest jeszcze groźniejszy, bo komentarz połyka wtedy całą dalszą część strony. W elementach <style> i <script> obowiązują komentarze CSS (/* … */) i JavaScriptu (// …), a w <textarea> i <title> zapis <!-- … --> wyświetli się dosłownie.
Pamiętaj, że komentarze są publiczne. Przeglądarka ich nie wyświetla, ale każdy zobaczy je w źródle strony (np. skrótem Ctrl + U) i w narzędziach deweloperskich, więc nie zostawiaj w nich haseł, kluczy API ani notatek, których nie chcesz pokazywać światu. Dawniej popularne były też komentarze warunkowe Internet Explorera, np. <!--[if IE]> … <![endif]-->. Współczesne przeglądarki traktują je jak zwykłe komentarze, a sam Internet Explorer przestał je rozumieć w wersji 10, więc dziś spotkasz je głównie w szablonach e-maili dla klasycznego Outlooka na Windows.
Składnia
#<!-- Treść komentarza -->
<!--
Komentarz
w kilku liniach
-->Więcej przykładów
#<!-- Stary cennik, do usunięcia
<!-- Plan Pro, cena do ustalenia -->
<p>Plan Pro: 49 zł miesięcznie</p>
-->
<p>Plan podstawowy: 0 zł</p>Zewnętrzny komentarz kończy się już na pierwszym -->, zaraz po słowach „do ustalenia”. Dlatego akapit z planem Pro i końcowe --> wyświetlają się na stronie, choć miały zostać ukryte.
<!--[if IE]>
<p>Używasz Internet Explorera. Zaktualizuj przeglądarkę, żeby korzystać z kursu.</p>
<![endif]-->
<p>Ten akapit widzi każda przeglądarka.</p>Dla współczesnej przeglądarki cały blok od <!--[if IE]> do <![endif]--> to jeden zwykły komentarz, więc w podglądzie widać tylko drugi akapit.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Komentuj to, czego nie widać w samym kodzie, czyli dlaczego coś zrobiono tak, a nie inaczej. Komentarz „akapit” nad elementem
<p>niczego nie wnosi. - Fragment HTML, który skrypt ma wstawić na stronę później, trzymaj w
<template>, a nie w komentarzu. Zawartość szablonu przeglądarka rozumie jako HTML, więc skrypt łatwo ją skopiuje. - W JSX, czyli w komponentach React, komentarze HTML nie działają. Tam piszesz
{/* komentarz */}.
Powiązane hasła
#- <!DOCTYPE html>Deklaracja typu dokumentu w pierwszej linii pliku. Mówi przeglądarce, żeby wyświetliła stronę w trybie standardów, a nie w trybie zgodności.
- <template>Niewidoczny szablon HTML, który skrypt kopiuje i wstawia na stronę.
- <style>Arkusz stylów CSS wpisany bezpośrednio w dokument HTML.
- <script>Osadza kod JavaScript w stronie albo wczytuje go z pliku, żeby dodać stronie zachowanie.
- <html>Korzeń dokumentu HTML. Wszystkie pozostałe elementy strony znajdują się w jego wnętrzu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.