Merhaba dijital kaşif! 🌍 Web sayfanın başlıkları, yazının ruhu, ziyaretçilerin radarına takılan ilk sinyaller ve Google’ın da göz bebeği! Bugün HTML başlık etiketlerini hem detaylı hem de eğlenceli bir şekilde inceleyeceğiz. Kod örnekleri, ipuçları ve ufak hilelerle dolu bir rehber bu.
1. Başlık Etiketleri Hakkında Temel Bilgi 🏰
HTML başlıkları:
<h1>En Önemli Başlık</h1>
<h2>İkinci Seviyedeki Başlık</h2>
<h3>Üçüncü Seviyedeki Başlık</h3>
<h4>Dördüncü Seviyedeki Başlık</h4>
<h5>Beşinci Seviyedeki Başlık</h5>
<h6>Altıncı Seviyedeki Başlık</h6>
<h1>: Sayfanın en kral başlığı, genellikle bir tane olmalı.<h2>:<h1>’in yardımcısı, bölümleri ayırmak için kullanılır.<h3>–<h6>: Daha detaylı alt başlıklar, paragraf mantığını korur.
İpucu: Başlıklar sadece “büyük yazı” değildir; sayfanın mantığını ve SEO’yu belirler.
2. Hiyerarşi ve Mantık: Başlıksız Olmaz! 🏗️
Bir sayfayı karışık bir şekilde yazmak Google’ı ve okuyucuları delirtebilir. Mantıklı bir hiyerarşi şart!
<h1>Benim Süper Blogum</h1>
<h2>Hakkımda</h2>
<h3>Eğitim</h3>
<h3>Deneyim</h3>
<h2>Projeler</h2>
<h3>HTML Mini Projesi</h3>
<h3>CSS Tasarım Örneği</h3>
Mantık:
<h1>→ Sayfanın adı, kral! 👑<h2>→ Bölümler, yardımcılara komut verir.<h3>→ Alt bölümler, detaylandırır.
Mini ipucu: Başlıkları atlamak SEO ve erişilebilirlik açısından kötü bir fikirdir. Örneğin
<h1>→<h3>atlamak, sayfanın mantığını bozabilir.
3. <h1>: Kral Başlık 🏆
<h1> sayfanın yıldızı, büyük kralı. Genellikle sayfada sadece bir kez kullanılır.
<h1 style="text-align:center; color:#1e90ff;">
Benim Web Dünyama Hoş Geldiniz!
</h1>
İpuçları:
- SEO:
<h1>anahtar kelimenizi içermeli. - Görünüm: CSS ile merkezleyebilir, rengini değiştirebilir, fontunu özelleştirebilirsiniz.
- Hiyerarşi: Bir sayfada birden fazla
<h1>kullanmak kafa karıştırır.
4. <h2> ve <h3>: Yardımcı Kahramanlar 🦸♂️
Alt başlıklar hem sayfayı düzenler hem kullanıcıya rehberlik eder.
<h2 style="color:#ff6347;">Projelerim</h2>
<h3 style="font-style:italic;">HTML Blog</h3>
<h3 style="font-style:italic;">CSS Animasyonları</h3>
İpuçları:
<h2>bölüm başlığıdır; birden fazla olabilir.<h3>alt bölümler için idealdir.- SEO dostu içerik için başlıklarda anahtar kelime kullanabilirsiniz.
5. <h4>–<h6>: Detay Ustaları 🔍
Sayfanın en detaylı başlıklarıdır. Genellikle metin içinde alt konuları veya küçük notları vurgulamak için kullanılır.
<h4>İpuçları:</h4>
<ul>
<li>Başlık etiketlerini görsel için değil, anlam için kullan.</li>
<li>Boyut büyük yapmak istiyorsan CSS kullan.</li>
</ul>
<h5>Not:</h5>
<p>Alt başlıklar uzun metinlerde rehberlik eder.</p>
<h6>Küçük ama değerli!</h6>
Eğlenceli not:
<h6>’ya genellikle “küçük ama anlamlı” etiketi denir. Boyutu küçük ama hâlâ SEO için önemlidir!
6. Başlık Etiketleri ile Stil Şovu 🎨
Başlıklar sadece metin değildir; CSS ile onları birer sanat eserine çevirebilirsiniz.
<h2 style="
color:#ff4500;
font-family:'Comic Sans MS';
text-shadow: 2px 2px 4px gray;
text-transform: uppercase;
">
MERHABA DÜNYA!
</h2>
Ne yaptık?
- Renk ile dikkat çektik
- Comic Sans ile mizah kattık 😎
- Gölge ile derinlik verdik
- Büyük harf ile bağırdık (ama nazik bir şekilde)
7. Başlık Etiketleri için Pratik İpuçları 💡
- Mantık > Görünüm: Sadece büyük olsun diye
<h1>kullanma. - SEO dostu ol: Anahtar kelimeleri başlıklara serpiştir.
- CSS ile oynayın: Başlıklar görünüm için değil, mantık için; görsellik CSS ile gelmeli.
- Okunabilirlik: Ziyaretçiler sayfayı tarar, başlıklar yolu gösterir.
- Hiyerarşi: Atlamamaya çalış, Google ve kullanıcı seni sevsin.
8. Bonus: Başlık Etiketleri ile Eğlenceli Mini Sayfa 🖌️
<h1>🍕 Pizza Blogu</h1>
<h2>Menü</h2>
<h3>Margherita</h3>
<h3>Pepperoni</h3>
<h2>Blog Yazıları</h2>
<h3>Evde Pizza Yapımı</h3>
<h3>Pizzayı Yakmadan Fırına Koymak</h3>
<h4>İpuçları ve Hileler</h4>
<h5>Küçük Sırlar</h5>
<h6>Ve Unutma: Her zaman bol peynir!</h6>
🎯 Görüyorsun, başlıklar bir sayfayı sadece okunabilir değil, eğlenceli ve mantıklı kılar.
9. Özet
<h1>kral,<h2>–<h6>yardımcılar- Mantıklı hiyerarşi şart
- Başlıklar SEO ve kullanıcı dostu içerik için kritik
- CSS ile görünümünü özelleştir
- Küçük başlıklar bile önemli
