Komentáře v HTML, CSS a JavaScriptu

Komentáře v HTML

HTML komentář začíná <!-- a končí -->. Vše mezi těmito značkami se v prohlížeči nezobrazí:

<!-- Toto je komentář – prohlížeč ho ignoruje -->

<nav>
  <!-- Hlavní navigační menu -->
  <ul>
    <li><a href="index.html">Domů</a></li>
    <!-- Odkaz na kontakt zatím vyřešíme later -->
  </ul>
</nav>

Komentář může být na jednom řádku nebo přes více řádků:

<!--
  Tato sekce zobrazuje výsledky vyhledávání.
  Dynamicky ji plní web_search.js.
-->
<ul id="dynamic-results"></ul>

Důležité: i když prohlížeč komentář nezobrazí, je součástí zdrojového kódu, který si každý může přečíst. Nikdy do komentářů nedávej hesla, přístupové klíče ani citlivé informace.

Komentáře v CSS

CSS komentář začíná /* a končí */. Funguje na jednom i více řádcích:

/* Základní nastavení typografie */
body {
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
}

/*
  Tlačítka – zlatá varianta
  Používá se pro hlavní akce (odeslat, pokračovat…)
*/
.btn-gold {
  background-color: goldenrod;
  color: #000;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
}

nav { color: #222; } /* Barva textu navigace */

Komentáře v CSS se výborně hodí pro rozdělení dlouhého souboru do sekcí. Na tomto webu začíná každá sekce souboru master_26.css komentářem s názvem sekce – díky tomu se ve velkém souboru snadno orientuji.

Komentáře v JavaScriptu

JavaScript nabízí dva druhy komentářů:

Jednořádkový komentář – //

Dvě lomítka zakomentují zbytek řádku. Je to nejčastěji používaný typ:

// Načteme počet navštívených lekcí z localStorage
let navstiveno = parseInt(localStorage.getItem('web-visited') || '0');

let celkem = 30; // celkový počet lekcí v učebně

Víceřádkový komentář – /* */

Stejný zápis jako v CSS. Hodí se pro delší vysvětlení nebo blokové zakomentování kódu:

/*
  Funkce generuje náhodnou otázku z banky.
  Parametr: kategorie ('html', 'css', 'js', nebo 'vse')
  Vrací: objekt s otázkou a odpověďmi
*/
function generujOtazku(kategorie) {
  // kód funkce…
}

/*
let staraVerze = document.getElementById('old-btn');
staraVerze.addEventListener('click', staraFunkce);
*/
// ↑ dočasně zakomentováno – bude opraveno příště

Kdy komentáře psát – a kdy ne

Komentáře jsou cenné, ale ne každý řádek kódu je potřeba okomentovat. Platí tato pravidla:

• Komentuj proč, ne co. Pokud je z kódu samotného jasné, co dělá, komentář nepřidává hodnotu. Komentuj důvod rozhodnutí, výjimky a záludnosti.
• Komentuj složitá místa. Regulární výrazy, neobvyklé algoritmy, opravy chyb prohlížeče – to vše si komentář zaslouží.
• Sekce v souborech. Dlouhé CSS nebo JS soubory jsou přehlednější, když jsou rozděleny komentáři na pojmenované bloky.
• Dočasné zakomentování. Místo mazání kódu ho lze dočasně zakomentovat při ladění. Nezapomeň ho pak smazat nebo obnovit.

Špatný komentář:

// Přičte 1 k proměnné i
i++;

Dobrý komentář:

// Počítáme od 0, protože pole jsou indexována od nuly
for (let i = 0; i < barvy.length; i++) { … }

Klávesová zkratka pro komentování

Většina editorů umí zakomentovat označené řádky jedinou klávesovou zkratkou. V Nove, VS Code i BBEditu je to obvykle Cmd + / na Macu nebo Ctrl + / na Windows. Editor automaticky použije správný typ komentáře podle jazyka souboru – v HTML vloží <!-- -->, v CSS nebo JS vloží // nebo /* */.

Tip od Zdeňka

Zdeněk radí: Já komentáře používám hodně – zvlášť v CSS, kde mám celý soubor rozdělen do číslovaných sekcí. S VoiceOverem procházím kód po řádcích a pojmenované sekce mi pomáhají rychle se zorientovat v dlouhém souboru. Komentář jako /* --- 5. NAVIGACE --- */ mi řekne přesně, kde jsem – bez nutnosti číst okolní kód. Je to malá věc, která při každodenní práci ušetří spoustu času.