Komentarze w HTML

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. Ale to bardzo zakręcone, więc po prostu nie wolno tego robić.

W zwykłym HTML można umieszczać komentarze przed znacznikiem <html/>, lecz w XML (XHTML z application/xhtml+xml) tak być nie powinno. No i jasne chyba jest, że nie można zagnieżdzać komentarzy:

1. <!--
2. …
3. <div id="content">
4. <!-- dopisac naglowek -->
5. …
6. </div>
7. -->

To jest źle. Na stronie w HTML-u nie dość, że pojawi się zawartość diva to jeszcze błąd dla XHTML-a. Wiem, ja też bym chciał jakiś bardziej ogólny znacznik komentarzy, jak { } bądź /* */ versus // w językach programowania. No ale co począć, należy się zastosować:

1. <!--
2. …
3. <div id="content">
4. --><!-- dopisac naglowek --><!--
5. …
6. </div>
7. -->

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:

1. <style type="text/css">
2. <!--
3. body { background-color: pink; }
4. -->
5. </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 opatrznie znak <:

1. <script type="text/javascript">
2. <!--
3. …
4. var task = document.getElementByID("taskbar").getElementsByTagName("a");
5. if ((task.length < 10) && (task.length > 5)) {
6. …
7. -->
8. </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.

1. <script type="text/javascript">
2. //<![CDATA[
3. …
4. var task = document.getElementByID("taskbar").getElementsByTagName("a");
5. if ((task.length < 10) && (task.length > 5)) {
6. …
7. //]]>
8. </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[ i przestanie. Rozpocznie znowu po ]]>, więc należy unikać jak ognia przypadku, gdzie w skrypcie mamy właśnie znaki ]]>. Można je rozdzielić na ]] > przecież.

Sekcja CDATA zostanie zrozumiana tylko gdy strona jest pisana jako XML (application/xhtml+xml).

Komentarze warunkowe

Drużyna Microsoftu zajmująca się Internet Explorerem miała parę tęgich głów, które zapewne przerażone wynikiem pracy, zaproponowały w swoim geniuszu stworzenie tylnich drzwiczek tylko rozumianych przez IE. Dobrym posunięciem były tutaj komentarze, bo nie wpływały na proces walidacji. No okej, wtedy mało kto się przejmował takimi drobnostkami, ale chwała im i za to.

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

1. <!--[if IE]>
2. treść
3. <![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:

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

Ratuje życie, używajcie z głową. ;) Można jeszcze, za QuirksMode, podać jako ciekawostkę tag <comment/>. Nie jest on w specyfikacji i nie widzę jego sensownego użycia, ale może się komuś przyda. :S

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:

1. <div id="header">
2. …
3. </div><!-- id="header" -->
4. <div id="content">
5. …
6. <div class="entry">
7. <div class="head a0">
8. …
9. </div><!-- class="head" -->
10. </div><!-- class="entry" -->
11. …
12. </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.

Masz fart, jeśli Twój edytor potrafi zwijać części kodu, pozostawiając widoczną pierwszą linijkę z identyfikatorem i ostatnią. Lecz po prostu najlepiej zacznij tak oznaczać swoje sekcje strony, a będzie Ci lżej. Zobaczysz.