HTML Etiketleri (Tags) Nedir? Doğru Kullanım Kuralları ve Örnekler

HTML etiketleri nasıl çalışır? Açılış-kapanış etiketleri, iç içe kullanım kuralları, en sık yapılan hatalar ve SEO uyumlu örnekler.

HTML’de her şey “etiket” (tag) mantığıyla çalışır. Etiketler, tarayıcıya bir içeriğin ne anlama geldiğini söyler. Örneğin bir metni paragraf olarak tanımlamak için <p>, başlık olarak tanımlamak için <h1> etiketi kullanırız. Tarayıcı bu etiketleri okur ve içeriği buna göre biçimlendirir. Arama motorları ise etiketlerin anlamını çözerek sayfanın hangi bölümlerinin daha önemli olduğunu anlar.

Açılış ve Kapanış Etiketleri

HTML etiketlerinin büyük çoğunluğu açılış ve kapanış olmak üzere iki parçadan oluşur:

• <p>: Paragrafın başladığını söyler

• </p>: Paragrafın bittiğini söyler

• <h1>: Ana başlık

• </h1>: Ana başlığın sonu

Kapanış etiketinin başında / işareti bulunur. Bu yapı, tarayıcının içeriğin nerede başlayıp nerede bittiğini doğru anlamasını sağlar.

Kendiliğinden Kapanan (Self-Closing) Etiketler

Bazı etiketlerin kapanış etiketi yoktur. Bunlar tek başına anlam ifade eder:

• <img>: Görsel ekler

• <br>: Satır atlatır

• <hr>: Yatay çizgi ekler

Bu etiketler içerik sarmalamaz, tek başına görev yapar.

Etiketlerin İç İçe Kullanımı (Nesting)

HTML etiketleri iç içe kullanılabilir. Ancak doğru hiyerarşi şarttır:

Yanlış kullanım örneği (hatalı):

Bu tür hatalar tarayıcıda beklenmeyen görünümlere ve SEO açısından yapısal sorunlara yol açar. Etiketler açıldıkları sıranın tersine kapatılmalıdır.

HTML’de Boşluk, Satır ve Okunabilirlik

HTML tarayıcı tarafından yorumlanırken, kodun içindeki fazla boşluklar ve satır araları genellikle dikkate alınmaz. Ancak geliştirici için okunabilirlik çok önemlidir. Düzenli yazılmış HTML, hataları bulmayı kolaylaştırır:

En Sık Yapılan Hatalar

• Etiketleri kapatmayı unutmak

• Yanlış iç içe kullanım

• Anlamsız etiket seçimi (başlık yerine paragraf kullanmak)

• Aynı sayfada birden fazla <h1> kullanmak

• SEO için önemli etiketleri (h1, alt, title) boş bırakmak

Bu hatalar hem görünümü bozar hem de Google’ın sayfanı doğru anlamasını zorlaştırır.

Profesyonel Çalışma İpuçları

Kod yazarken otomatik tamamlama ve hata vurgulama büyük avantaj sağlar. Bu nedenle Visual Studio Code gibi bir editör kullanmak, HTML etiketlerini öğrenme sürecini ciddi şekilde hızlandırır. Kodunu anında test etmek için modern tarayıcılar (örneğin Google Chrome) geliştirici araçlarıyla birlikte kullanılmalıdır.

Bölüm Özeti:
Bu bölümde HTML etiketlerinin nasıl çalıştığını, açılış–kapanış mantığını, doğru iç içe kullanım kurallarını ve en sık yapılan hataları öğrendin. Bu temeli sağlam oturtmadan ileri konulara geçmek, ileride zorlanmana neden olur.