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>

  • Logo
  • Wizytówka
  • Katalog

[sociallocker]
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>

Nagłówek, którego nie chcemy komentować.

Paragraf, który zostanie wyświetlony na stronie wraz z powyższym nagłówkiem.

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ę.
[/sociallocker]

Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.