Komentarz HTML

<!-- -->

Niezależnie czy tworzymy niewielką stronę firmową, czy też dużą aplikację internetową, w pewnym momencie nasz kod stanie się dość obszerny. Nawet mała strona internetowa może sięgać kilkuset linijek. Jak się w tym wszystkim połapać? Oczywiście będąc na bieżąco w kodzie, będziemy w stanie spamiętać gdzie co jest. Natomiast jak wrócimy do strony po pewnym czasie gwarantuje, że zaczniemy się głowić nad naszym własnym kodem i próbować rozwiązać co tam też napisaliśmy i po co?

Z pomocą przychodzą nam komentarze. Jest to ludzki element każdego kodu, niezależnie czy kodujemy w HTML i CSS, czy programujemy w PHP’ie. Komentarze występują w każdym języku programowania, głównym ich zadaniem jest pomoc człowiekowi rozszyfrować o czym piszemy i czego dana część kodu służy, szczególnie, gdy pracujemy w wieloosobowych zespołach nad jednym kodem. Każdy język programowania ma swoją składnię, w języku HTML komentarze zapisujemy pomiędzy znacznikami <!– oraz –>. Wszystko co zostanie zapisane pomiędzy tymi znacznikami zostanie pominięte przez przeglądarkę przy wyświetlaniu treści. Będą one jedynie widoczne dla osób przeglądających kod strony internetowej.

<!-- Lista projektów graficznych -->
<ul>
   <li>Logo</li>
   <li>Wizytówka</li>
   <li>Katalog</li>
</ul>

Używanie komentarzy może pomóc koderowi posegregować sekcje strony, np. możemy oznaczyć miejsce, w którym dodajemy pliki CSS, tak aby przy przeglądaniu strony szybko i łatwo trafić do tej sekcji.

<!-- CSS'y -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/custom.css">

Komentarze będą szczególnie potrzebne przy rozbudowanych elementach <div>, które zostaną zagnieżdżone.

<div class="container">
   <div class="col-1">
     <ul>
        <li></li>
        <li></li>
        <li></li>
     </ul>
   </div> <!-- End of col-1 -->
   <div class="col-2">
     <ul>
        <li></li>
        <li></li>
        <li></li>
     </ul>
   </div> <!-- End of col-2 -->
</div> <!-- End of container -->

Nawet przy tak niewielkiej ilości kodu bez komentarzy można by było się zgubić i zastanawiać przez dłuższą chwilę, którego div’a zamyka dany znacznik </div>.

Przy pomocy komentarzy można również zostawić instrukcję działania dla innych webdeveloperów. Jest to swoisty sposób porozumiewania się ze współpracownikami.

<!-- Piotrek wstaw tu proszę sekcję kontaktową. -->

Przy pomocy komentarzy można również zostawiać wskazówki samemu sobie.

<!-- Ale tu namieszałem w kodzie muszę to koniecznie poprawić! -->

Oczywiście to co w praktyce będziemy pisali w komentarzach, będzie raczej wyglądało w następujący sposób.

<!-- Poprawić -->

<!-- Nie składa się -->

Ja bym jednak zalecał, żeby nasze komentarze były bardziej opisowe, wtedy inni też będą mogli je zrozumieć, a i sami jak wrócimy po dłuższym czasie do naszego kodu nie będziemy mieli problemu ze zrozumieniem samych siebie.

<!-- Poprawić kolory, kontrast za mocny -->

<!-- Ta sekcja nie składa się na telefonach -->

W niektórych językach występują komentarze, które obowiązują tylko do końca danej linii. W html wszystkie komentarze są domyślnie wielo-liniowe.

<!-- Komentarz, który
został napisany
na trzech liniach. -->

W komentarzach możemy również zamieszczać kod html, który jest nam chwilowo niepotrzebny. Co to oznacza i po co to? Wyobraźmy sobie, że napisaliśmy kawałek kodu, którego nie chcemy na razie usuwać, ale nie chcemy, żeby pojawiał się na stronie. Może użyjemy go jeszcze w przyszłości, ale nie jesteśmy tego pewni, dlatego mówimy, że musimy skomentować kawałek kodu.

<!-- <h2>Nagłówek, który został skomentowany i nie zostanie wyświetlony</h2>
<p>Paragraf, który na razie skomentujemy, zobaczymy może nam będzie jeszcze potrzebny.</p> -->

<h2>Nagłówek, którego nie chcemy komentować.</h2>
<p>Paragraf, który zostanie wyświetlony na stronie wraz z powyższym nagłówkiem.</p>

Podsumowanie Komentarz HTML

I tak właśnie wyglądają Komentarze HTML. Początkujący developerzy raczej rzadko ich używają, ale ja gorąco zachęcam do komentowania własnego kodu. Gwarantuję, że usprawni to i uprzyjemni waszą pracę.