Ana Sayfa
HTML eğitim yazıları

HTML5 Yorum Etiketi Nedir ve Nasıl Kullanılır?

HTML etiketi hakkında detaylı bilgi edinin. Yorum etiketinin ne olduğunu, nasıl kullanıldığını ve neden önemli olduğunu öğrenin.
html5 yorum etiketi
HTML5 Yorum Etiketi

Merhaba sevgili HTML5 meraklıları! Bugün sizlere HTML dünyasında çok önemli ama bir o kadar da basit bir öğe olan <!--...--> (yorum etiketi) hakkında detaylı bilgi vereceğim. Bu yazıda, <!--...--> etiketinin ne olduğunu, nasıl kullanıldığını ve neden önemli olduğunu öğreneceksiniz. Hazır mısınız? Hadi birlikte bu gizemli etiketi keşfedelim!

<!--...--> HTML Yorum Etiketi Nedir?

<!--...--> etiketi, HTML'de yorum eklemek için kullanılır. Bu etiket sayesinde kodun içine notlar bırakabilirsiniz. Bu notlar, tarayıcı tarafından görülmez ve kullanıcılara gösterilmez. Bu yüzden, <!--...--> etiketi ile kodunuzun anlaşılmasını kolaylaştırabilir ve ileride kendinize veya başka geliştiricilere hatırlatmalar yapabilirsiniz. Bu etiket, kodunuzu daha düzenli ve yönetilebilir hale getirmenizi sağlar.


<!--...--> HTML Yorum Etiketinin Kullanım Amacı Nedir?

Peki, neden <!--...--> etiketini kullanmalıyız? İşte bu etiketin sağladığı bazı avantajlar:

  • Kodun Anlaşılabilirliğini Artırmak: Kodunuzu yazarken kendinize veya başka bir geliştiriciye kodun amacı hakkında notlar ekleyebilirsiniz. Bu, kodu daha sonra gözden geçirirken neyin neden yapıldığını anlamanızı kolaylaştırır.
  • Takım Çalışmasını Kolaylaştırmak: Eğer bir takım içerisinde çalışıyorsanız, <!--...--> etiketi ile diğer takım arkadaşlarınıza yardımcı olabilir ve kodun işlevini daha iyi açıklayabilirsiniz.
  • Hata Ayıklama ve Gelecekteki Geliştirmeler: İleride kodunuzu güncellemek veya hata ayıklamak gerektiğinde, yorumlar işinizi çok daha kolay hale getirebilir.

<!--...--> Yorum Etiketi Nasıl Kullanılır?

<!--...--> etiketi oldukça basit bir yapıya sahiptir. Aşağıdaki örnekte, bu etiketi nasıl kullanabileceğinizi görebilirsiniz:

<div class='pre'>
  <pre><!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yorum Etiketi Örneği</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <!-- Bu kısım sayfamızın başlığını temsil ediyor -->
    <p>Bu, HTML dünyasında öğrenilecek çok şey var!</p>
    <!-- İleride bu paragrafa daha fazla bilgi ekleyeceğim -->
</body>
</html></pre>
</div>
Yukarıdaki örnekte gördüğünüz gibi <!-- Bu kısım sayfamızın başlığını temsil ediyor --> ve <!-- İleride bu paragrafa daha fazla bilgi ekleyeceğim --> şeklinde yorumlar ekledik. Bu yorumlar, sayfanızı ziyaret eden kullanıcılar tarafından görülmez, ancak sizin veya takım arkadaşlarınızın işini kolaylaştırmak için oradadır.

Yorum Etiketi Kullanırken Nelere Dikkat Edilmeli?

  • Kısa ve Net Olun: Yorumlarınızı kısa ve öz tutun. Uzun ve karmaşık yorumlar, kodunuzu daha da karmaşık hale getirebilir.
  • Kodun Amacını Açıklayın: Özellikle karmaşık kod blokları için, kodun ne yaptığını kısa bir şekilde açıklayın.
  • Gereksiz Yorumlardan Kaçının: Her kod satırı için yorum eklemek yerine, sadece anlaşılması zor veya önemli noktalara yorum ekleyin.

Yorum Etiketi Tarayıcı Desteği

Element
chrome
edge
firefox
safari
opera
<!DOCTYPE> ✅ ✅ ✅ ✅ ✅

<!--...--> Etiketini Kullanarak Kendi HTML Sayfanızı Oluşturun

Artık <!--...--> etiketini nasıl kullanacağınızı bildiğinize göre, kendi HTML sayfanızda bu etiketi kullanarak notlar eklemeye başlayabilirsiniz. Bu basit ama etkili yöntem, gelecekte kodunuzu daha iyi anlamanıza ve organize olmanıza yardımcı olacak.

Unutmayın, HTML öğrenmek bir yolculuktur ve her yeni bilgi sizi bu yolculukta bir adım daha ileriye taşır. <!--...--> gibi küçük detaylar bile, sizi daha iyi bir geliştirici yapabilir. Şimdi HTML sayfanıza yorumlar ekleyerek bu bilgiyi pekiştirin ve kodunuzu daha anlaşılır hale getirin!

<!--...--> HTML Yorum Etiketi İle İlgili İki Farklı Örnek

Örnek 1: Geçici Kodu Yorumlamak

Bazen bir kod parçasını geçici olarak devre dışı bırakmak isteyebilirsiniz. Bu durumda, <!--...--> etiketi çok kullanışlıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geçici Yorum Örneği</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <!-- <p>Bu paragrafı geçici olarak devre dışı bıraktım.</p> -->
    <p>Bu, görünmesi gereken paragraftır.</p>
</body>
</html>

Bu örnekte, <p>Bu paragrafı geçici olarak devre dışı bıraktım.</p> satırı <!--...--> etiketi içine alınarak geçici olarak devre dışı bırakılmıştır. Bu, belirli bir kodu test ederken veya sayfa üzerindeki içeriği düzenlerken oldukça faydalıdır.

Örnek 2: Kod Bölümünü Açıklamak

Özellikle büyük bir HTML dosyasında belirli bir kod bloğunun amacını açıklamak, kodun daha anlaşılır olmasını sağlar.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kod Açıklama Örneği</title>
</head>
<body>
    <h1>Hoş Geldiniz!</h1>
    <!-- Navigasyon menüsü başlıyor -->
    <nav>
        <ul>
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Hakkında</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>
    <!-- Navigasyon menüsü bitiyor -->
    <p>Siteye göz atın ve keşfedin!</p>
</body>
</html>
Bu örnekte, <!-- Navigasyon menüsü başlıyor --> ve <!-- Navigasyon menüsü bitiyor --> yorumları, kodun hangi bölümünün navigasyon menüsü ile ilgili olduğunu belirtmek için kullanılmıştır. Bu, kodunuzu daha anlaşılır ve düzenli hale getirir.

İyi kodlamalar ve görüşmek üzere!