1 Komentarze
     1.1 Komentowanie a CDATA
     1.2 Komentarze warunkowe Internet Explorera
     1.3 Inne wskazówki

Komentarze

Komentarze występują w każdym języku, nawet tych znacznikowych, więc musiały się znaleźć w HTML-u także. Wersja liniowa tutaj nie istnieje, komentarz musi mieć początek i zakończenie:

<!--
  (treść komentarza)
-->

Jeśli używasz XHTML-a, musisz pamiętać, że w środku komentarza nie może występować ciąg znaków "--". Odpadają więc szlaczki oddzielające części kodu na Twojej stronie. Używaj "==" jeśli musisz. Podane niżej zapisy są błędne:

1. <!----------------------------------------------------->
2. <!-- ----------------------------------------------- -->
3. <!-- tutaj nalezaloby cos dopisac -- ale nie wiem co -->

Ostatnia linijka technicznie znaczy tyle, że komentarz kończy się po "dopisać", potem są tylko atrybuty dla jakiegoś taga.

W zwykłym HTML można umieszczać komentarze przed znacznikiem <html/>, lecz w XML (XHTML z typem MIME application/xhtml+xml) tak być nie powinno.

Komentowanie a CDATA

Zwykło się używać komentarzy do zmuszenia starych przeglądarek, bez wsparcia dla CSS czy ECMAScript do pominięcia reguł i kodu. Rozważmy następujący przykład:

<style type="text/css">
<!--
  body { background-color: pink; }
-->
</style>

Ten kod nie powinien zostać zrozumiany przez nowoczesne przeglądarki, jako że definicja różowego tła dla body nie istnieje. Podobnie tutaj, mimo że autor chciał wykluczyć możliwość, że jakiś Netscape zrozumie opacznie znak <:

<script type="text/javascript">
<!--
  ?
  var task = document.getElementByID("taskbar").getElementsByTagName("a");
  if ((task.length < 10) && (task.length > 5)) {
   ?
-->
</script>

CSS nie stanowi wielkiego problemu (jednakże zalecam także podane niżej rozwiązanie), chyba że używasz tworów Microsoftu, jak parseExpression czy inne takie. Dla skryptów należałoby zacząć używać sekcji CDATA.

<script type="text/javascript">
//<![CDATA[
  ?
  var task = document.getElementByID("taskbar").getElementsByTagName("a");
  if ((task.length < 10) && (task.length > 5)) {
     ?
 //]]>
 </script>

Takie oznaczenie mówi parserowi XML, że w środku są zwyczajne dane. Można więc spokojnie używać <, >, &. Przed oznaczeniami CDATA występuje //, gdyż tak w JavaScript oznacza się komentarze liniowe, co wyklucza te linijki ze skryptu. Parser XML napotka jednak <![CDATA[</code> i przestanie. Rozpocznie znowu po <code>]]></code>, więc należy unikać jak ognia przypadku, gdzie w skrypcie mamy właśnie znaki <code>]]>.

Sekcja CDATA zostanie zrozumiana tylko gdy strona jest serwowana jako typ MIME odpowiedni dla XML lub XHTML (application/xhtml+xml lub application/xml).

Sekcje CDATA są o tyle bardziej interesujące, że przeglądarki interpretujące XML mają prawo usunąć z pliku wejściowego wszystkie komentarze już na samym początku procesu interpretacji.

Komentarze warunkowe Internet Explorera

Przeglądarka Microsoftu posiada "tylne drzwi", które umożliwiają ukrycie niektórych fragmentów kodu dla wszystkich przeglądarek dzięki zastosowaniu komentarza - Internet Explorer jednak te specjalne komentarze odpowiednio interpretuje, pozwalając na odkrywanie dla niego niektórych znaczników - co ułatwia tworzenie specjalnie dla niego przeznaczonych reguł CSS.

Komentarz warunkowy powoduje wskoczenie IE w tryb parsowania znaczników, które są w nim. Wygląda on trochę dziwnie:

<!--[if IE]>
  treść
<![endif]-->

W normalnej przeglądarce, ]> i <![ zostanie potraktowane jako część komentowanego tekstu i pominięta. IE jednak zamknie komentarz, jeśli spełnia warunek w [if]. Warunki zaczynają się właśnie od if potem następuje operator, IE oraz wersja. Gdy operator nie wystąpi, to jest to równoznaczne z operatorem =. Operatory:

1. lt (lower than) mniejszy
2. gt (greater than) większy
3. lte (lower than equal) mniejszy równy
4. gte (greater than equal) większy równy

Przykład wykorzystania przy ładowaniu stylu CSS z odpowiednim box-modelem dla Internet Explorera 5 i starszych:

<!--[if lte IE 5]>
  <link rel="stylesheet" href="ie5-boxmodel.css" />
<![endif]-->

Inne wskazówki

Komentowanie własnego kodu jest zawsze opłacalne. W przypadku HTML-a komentarze są pomijane w wyglądzie strony, ale zajmują miejsce (w odróżnieniu od programów, które mają wycinane komentarze podczas kompilowania), więc nie należy przesadzać.

Przydatne bardzo jest oznaczenie bloków znaczników, aby było od razu widać który znacznik co zamyka:

<div id="header">
 ...
</div><!-- id="header" -->
<div id="content">
 ...
<div class="entry">
<div class="head a0">
 ...
</div><!-- class="head" -->
</div><!-- class="entry" -->
 ...
</div><!-- id="content" -->

Gdy piszemy na początku strukturę strony, wszystko wydaje się proste do odróżnienia, zwłaszcza w edytorach kolorujących znaczniki, numerujących linijki i tak dalej. Ale gdy w entry pojawi się nagle masa tekstu, to można się pogubić. A najbardziej, jak mamy cztery zamykające </div> obok siebie.

____<font size="1">Artykuł to zmodyfikowana wersja tekstu "Komentarze w HTML" Piotra Petrusa (udostępniony na licencji Creative Commons) opublikowany za wiedzą i zgodą autora.</span>