İçindekiler

Html’de h etiketleri yazılarımızın başlıkları için kullandığımız etiketlerdir. başlık etiketleri için örnekler aşağıda verilmiştir.

Html’de başlıklar;

<h1>Örnek html başlığı 1</h1>
<h2>Örnek html başlığı 2</h2>
<h3>Örnek html başlığı 3</h3>
<h4>Örnek html başlığı 4</h4>
<h5>Örnek html başlığı 5</h5>
<h6>Örnek html başlığı 6</h6>

Örnek html başlığı 1 çıktısı;

Örnek html başlığı 1

 

Örnek html başlığı 2 çıktısı;

Örnek html başlığı 2

 

Örnek html başlığı 3 çıktısı;

Örnek html başlığı 3

 

Örnek html başlığı 4 çıktısı;

Örnek html başlığı 4

 

Örnek html başlığı 5 çıktısı;

Örnek html başlığı 5

 

Örnek html başlığı 6 çıktısı;

Örnek html başlığı 6

 

Gördüğünüz üzere HTML’de başlıklar bu şekilde sıralanmaktadır. İlk bakışta sadece boyut olarak fark ediyor gibi düşünebilirsiniz ancak başlıkların sıralamasının düzgün bir şekilde yapılması site yapısı için çok önemlidir. hadi gelin size bir örnek ile doğru sıralamayı gösterelim.

<h1>LOREM İPSUM DOLOR SİT AMET </h1>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

<h2>Lorem İpsum Dolor </h2>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

En üstte olan kısım yani ana başlığa h1 etiketi verilir diğer alt başlığa ise h2 etiketi verilir. İçerik bölümünde bulunan paragraf kısımlarında ise <p></p> etiketleri kullanılır.

Peki ya birden fazla alt başlık varsa?

birden fazla alt başlık hatta alt başlıklarında altında tekrar alt başlıklar olabilir, gelin bunu da basit bir örnek ile gösterelim.

<h1>LOREM İPSUM DOLOR SİT AMET </h1>

<p> Lorem Ipsum is simply dummy text of the printing and typ

esetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

<h2>Lorem İpsum Dolor </h2>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

<h2>Lorem İpsum Dolor </h2>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

<h2>Lorem İpsum Dolor Sit Amet </h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

<h3>Lorem İpsum Dolor Sit Amet Alt?</h3>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

 

Gördüğünüz gibi eğer alt başlığın da alt başlığı bulunuyorsa bu şekilde ilerleyebilirsiniz, öğrenmek için örneği iyi inceleyip mantığını anlamanız yeterlidir.

Peki sadece yazı, makale gibi işlerde mi <h> etiketleri kullanılıyor? tabii ki hayır. Sitenizin içerisinde pek çok alanda kullanılıyor aslında, bir web sitesi oluşturdunuz ve içerisinde hizmetlerinizi listeliyorsunuz hangi <h> etiketini seçmeniz gerekiyor?

Site içerisinde doğru <h> etiketi kullanımı için önce sayfa yapısını oluşturmanız gerekiyor <h1> etiketi bütün siteyi kapsayan başlık anlamında kullanılır, örneğin HİZMETLER sayfası için “SUNDUĞUMUZ HİZMETLER” yazısını örnek olarak verebiliriz, “SUNDUĞUMUZ HİZMETLER” yazının altında hizmetleriniz listeleniyor bu hizmet detaylarını şu şekilde varsayalım 1. hizmet: MAKALE HİZMETİ 2. hizmet: SUNUCU HİZMETİ olsun, bu sayfanın ana başlığı yani <h1> etiketi “SUNDUĞUMUZ HİZMETLER” olduğuna göre hizmet isimlerini alt başlık olarak düşünebiliriz yani Makale Hizmeti ve Sunucu Hizmetini <h2> etiketi ile kapsamamız gerekiyor. Hizmetiniz alt dallar ile ayrılıyorsa <h3> etiketi ile devam etmeliyiz, sıralaması alt alta olması şart değil hiyerarşik sırada düzen kurmanız önemlidir. Hizmet açıklaması eklenecekse eğer onu da tabii ki <p> etiketi ile kapsamalıyız. Gelin bir örnek ile üzerinden geçelim ve iyice anlayalım.

<h1>SUNDUĞUMUZ HİZMETLER</h1>

<h2>Makale Hizmeti</2>

<h3>Az Kelime Makale</h3> – <h3>Çok Kelime Makale</h3>

<p>Sizler için en iyi makale hizmetini sunuyoruz.</p>

 

</h3>VDS Sunucular</h3> – <h3>VPS Sunucular</h3>

<h2>Sunucu Hizmeti</2>

<p>Sizler için en iyi Sunucu hizmetini sunuyoruz.</p>

 

Site içeriğinde de örnekte gördüğünüz gibi <h> etiketlerini kullanmanız gerekiyor, <h> etiketleri SEO yani arama motoru optimizasyonu içinde en önemli etkenler arasındadır, milyarlarca sitenin listelendiği Google gibi büyük platformlarda düzgün optimize ile öne çıkmak istiyorsanız sitelerinizin altyapısını en baştan düzgün oluşturmanız gerekiyor. Basitleştirilmiş HTML derslerimize bizi takip ederek devam edebilirsiniz, sorularınız olması durumunda yorum yapmaktan çekinmeyin.