Çalıştırılabilir HTML Dokümanları: HTML yorum satırı

Q: HTML'de yorum satırı nasıl yazılır?

ile bitir: . Tarayıcı iki işaret arasındaki her şeyi, etiketler dahil, yok sayar; bu yüzden aynı sözdizimi kodu yoruma almak için de kullanılır.

Q: HTML'de yorum satırı kısayolu nedir?

VS Code'da ve çoğu kod editöründe satırları seç ve Ctrl + / (Windows ve Linux) ya da Cmd + / (Mac) tuşlarına bas. Editör seçimi ile sarar, aynı tuşlar bunları kaldırır.

Q: HTML yorumları iç içe yazılabilir mi?

Hayır. İlk --> yorumu bitirir, yani c --> içinde c --> metni sayfada görünür. İçinde yorum olan bir bloğu yoruma almak için önce içteki yorumu kaldır ya da değiştir.

Q: HTML yorumları CSS ya da JavaScript içinde çalışır mı?

Hayır. Bir elementinin içinde / ... /, bir içinde de // ya da / ... / kullan. Bir style bloğundaki HTML yorumu, içindeki CSS kurallarını gizlemez.

HTML'de yorum satırı nasıl yazılır

Bir HTML yorumu  ile biter. Tarayıcı iki işaret arasındaki her şeyi yok sayar, bu yüzden metin sayfada hiç görünmez:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Yalnızca başlık ve paragraf görünür. HTML'de tek bir yorum sözdizimi vardır ve tek satır için de birçok satır için de çalışır.

VS Code'da ve çoğu editörde kısayol şudur: birkaç satır seç ve Ctrl + / tuşlarına bas (Mac'te Cmd + /). Editör işaretleri senin yerine ekler, aynı tuşlar onları kaldırır.

Kodu yoruma almak

Tarayıcı bir yorumun içindeki etiketleri yok saydığı için, işaretlemeyi  ile sarmak onu silmeden gizler. Bir sayfayı bir element olmadan test etmenin en hızlı yolu budur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Banner satırındaki  işaretlerini sil, banner geri gelir. Yoruma alınmış kod yine de sayfayla birlikte indirilir, bu yüzden ona ihtiyacın olmadığından emin olunca sil.

Yorumlar iç içe yazılamaz

İlk --> yorumu her zaman kapatır. Yoruma aldığın kod zaten bir yorum içeriyorsa, dıştaki yorum erken biter ve geri kalanı sayfaya taşar. Bu örnek iç içe yorumları tarayıcının ayrıştırıcısına verir ve sonunda neyin görünür kaldığını gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> metin olarak gösterilir. Büyük bir bloğu yoruma almadan önce içindeki yorumları kaldır (ya da artık eşleşmesin diye --> kısımlarını değiştir).

Birkaç kural daha: bir yorum  gibi kapatır; ikisini de yorum metninin dışında tut.

Yorumlar herkese açıktır

Yorumlar sunucunun gönderdiği HTML'in bir parçasıdır, bu yüzden her ziyaretçi onları Kaynağı Görüntüle ya da geliştirici araçlarıyla okuyabilir. Bir script de onları listeleyebilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Yorumları kodla ilgili notlarla sınırlı tut. Özel olan hiçbir şey (şifreler, API anahtarları, dahili URL'ler, müşteri verisi) yoruma alınmış olsun ya da olmasın HTML'de bulunmamalı. Build araçları ve minifier'lar genellikle yayındaki HTML'den yorumları çıkarır, bu da birkaç bayt kazandırır.

CSS ve JavaScript'te yorumlar

HTML yorumları yalnızca HTML'de çalışır. <style> ve <script> içinde o dilin yorum sözdizimini kullanırsın:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

Başlık maviye döner: CSS  işaretlerini yok sayar ve aralarındaki kuralı yine de uygular. CSS'i yalnızca /* ... */ devre dışı bırakır. Bu sözdizimi CSS yorumları sayfasında anlatılıyor.

Koşullu yorumlar

Eski kodlarda bazen  bulunur. Bunlar Internet Explorer 9 ve öncesi için talimatlardı. Güncel tüm tarayıcılar bunları sıradan yorumlar olarak ele alır, yani içerik yok sayılır ve bütün blok silinebilir.

Sık yapılan hatalar

Yorumları iç içe yazmak. İçteki --> dıştaki yorumu bitirir. Bir bloğu yoruma almadan önce içteki yorumları kaldır.
Yorumlara gizli bilgi koymak. Yorumlar her ziyaretçiye gönderilir.
Eksik bir -->. <!-- işaretinden dosyanın sonuna kadar her şey kaybolur; sayfanın yarısı yok olmuş gibi görünür.
CSS'te  kullanmak. Kuralları devre dışı bırakmaz. /* */ kullan.
HTML'de // kullanmak. // note metin olarak gösterilir. HTML yalnızca  sözdizimini anlar.

Sıkça Sorulan Sorular

HTML'de yorum satırı nasıl yazılır?

 ile bitir: . Tarayıcı iki işaret arasındaki her şeyi, etiketler dahil, yok sayar; bu yüzden aynı sözdizimi kodu yoruma almak için de kullanılır.

HTML'de çok satırlı yorum nasıl yapılır?

HTML'de yalnızca tek bir yorum sözdizimi vardır ve istediğin kadar satıra yayılabilir. İlk satıra  koy.

HTML'de yorum satırı kısayolu nedir?

VS Code'da ve çoğu kod editöründe satırları seç ve Ctrl + / (Windows ve Linux) ya da Cmd + / (Mac) tuşlarına bas. Editör seçimi  ile sarar, aynı tuşlar bunları kaldırır.

HTML yorumları iç içe yazılabilir mi?

Hayır. İlk --> yorumu bitirir, yani  c --> içinde c --> metni sayfada görünür. İçinde yorum olan bir bloğu yoruma almak için önce içteki yorumu kaldır ya da değiştir.

Kullanıcılar HTML yorumlarını görebilir mi?

Sayfada gösterilmezler, ama sayfayla birlikte tarayıcıya gönderilirler. Herkes onları Kaynağı Görüntüle ya da geliştirici araçlarıyla okuyabilir, bu yüzden içlerine asla şifre, anahtar ya da özel not koyma.

HTML yorumları CSS ya da JavaScript içinde çalışır mı?

Hayır. Bir <style> elementinin içinde /* ... */, bir <script> içinde de // ya da /* ... */ kullan. Bir style bloğundaki HTML yorumu, içindeki CSS kurallarını gizlemez.

İlgili kavramlar