HTML Elementleri Nelerdir? Nasıl Kullanılır? (Ders-2)

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Günümüzde, internet siteleri markaların online varlıklarını temsil eden en önemli unsurlar arasında yer almaktadır. Bu sebeple, web sitelerinin SEO uyumlu ve kullanıcı dostu dizayn edilmesi oldukça önemlidir. Bunun için de HTML elementleri doğru kullanılmalıdır.

HTML elementleri, web sayfalarının bütünsel yapısını belirleyen etiketlerdir. Arama motorları, web sayfalarının içeriğini tanımlamak için HTML elementlerini taramaktadır. Bu nedenle doğru bir şekilde kullanıldığında, HTML elementleri SEO’ya katkıda bulunmaktadır.

Aşağıda örnek bir HTML kodu paylaşılmıştır.


 <!DOCTYPE html>
 <html>
 <body>

 <h1>İlk Başlığım</h1>
 <p>İlk Paragrafım</p>

 </body>
 </html> 
 

Bir önceki dersimizde, HTML'nin ana teması hakkında bilgilendirme sağlamıştık. Yukarıda bulunan HTML giriş kodları hakkında bir önceki dersi okumadıysanız buraya tıklayarak bir önceki derse gidebilirsiniz.

Şimdi yukarıda bulunan HTML kodumuzu parçalayalım;

<html> ile başlayıp yazacağımız kod parçasının bir HTML kodu olduğunu belirtiyoruz, bir altında <body> etiketini ekleyip, vücudumuzu oluşturmaya başlıyoruz. <h1> bir ana başlık atacağımız anlamına geliyor. <h1> arasına başlık yazıp </h1> ile başlığımızı kapatıyoruz. bir sonraki ise, başlığın altına bir yazı yazmamız gerekiyor. uzun bir paragraf yazacağız, bunun için ise <p>İlk Paragrafım</p> paragraf kodunu kullanıyoruz.

Şimdiye kadar HTML dosyamızda bir başlık ve bir paragraf oluşturduk, yukarıda bulunan örneğe göre şimdilik yapacağımız kodlama işlemleri bitmiş durumda, bu yüzden de HTML kodumuzu bitirdiğimizi söylememiz gerekiyor. Bunu da, </body> ilk önce vücut bölgesinin kapanışını yaparak, ardından da HTML bitişi </html> yaparak kaydedip yayınlamaya hazır hale getiriyoruz.

H1 ve H2 Üst Başlıklar H1 başlık etiketi, sayfanın en önemli başlığıdır ve genellikle sayfa başlığı olarak kullanılır. H2 etiketi, sayfadaki alt başlıkları ifade eder. H1 ve H2 etiketlerinin doğru bir şekilde kullanılması, arama motorlarının sayfanın içeriğini daha iyi tanımasına yardımcı olacaktır.

Kullanım şekilleri:


<h1>Ana başlık </h1>
<h2>Alt başlık </h2>
<h3>Alt başlık </h3>
<h4>Alt başlık </h4>
<h5>Alt başlık </h5>
<h6>Alt başlık </h6>
 

h1'den itibaren her alt başlık numaralandırmasında boyut küçülmeye başlayacaktır. Yakında başlayacağımız CSS derslerinde, başlıklara nasıl stil(renk, boyut vs.) yükleyeceğimizi anlatacağız.

Başlıklar ile ilgili blog yazımıza gitmek için tıklayınız.

Paragraflar

Paragraflar ve Metin Biçimlendirmesi Doğru bir HTML kodu, başlık ve alt başlık etiketleri gibi etiketlerin yanı sıra paragrafları doğru bir şekilde biçimlendirir. Paragraf etiketi <p> şeklindedir ve web sayfasındaki metin bloklarını sıralamak için kullanılır. Metin biçimlendirme etiketleri <strong> gibi HTML etiketleri arasında yer alır ve SEO etkisi oldukça ilginç bir şekilde, cümle içerisinde daha doğru kullanıldığında etkilenmektedir.


<p>İlk Paragrafım</p>

Peki ya bir paragrafta, bir alt satıra geçmek için ne yapmalıyız?


<p>İlk <br> Paragrafım</p>

Eğer bir paragrafta bir alt satıra geçmek istediğimiz yere <br> kodunu eklersek bir alt satıra geçmiş bir şekilde görüntü alacağız.

<strong> Nedir?

<strong> bir paragrafı veyahut bir başlığı vurgulamak istediğinizde, daha kalın harflerle yazmanızı sağlayacaktır.

Örnek:

"Bu bir örnek cümledir"
cümlesinin "örnek" kelimesini strong içerisine alalım.

    
    <p> Bu bir <strong>örnek</strong> cümledir. </p>
    

Ders-2'nin sonuna geldik, 3. derste görüşmek dileğiyle!

Sizin İçin Önerdiklerimiz

Blog Resim
HTML Nitelikleri Nelerdir? Nasıl Kullanılır? (Ders-3)

HTML

HTML Derslerinin 3. bölümüne hoşgeldiniz, HTML (Hyper Text Markup Language), web sayfalarının yapısını ve içeriğini oluşturmak için kullanılan..

Devamını Oku
Blog Resim
HTML Yazı Elementleri ve Kullanım Örnekleri (Ders-5)

HTML

Merhabalar! 5. Bölüme Hoşgeldiniz, bu bölümde HTML yazılarının elementleri ve kullanım örneklerini göstereceğiz. HTML (Hyper Text Markup Language)..

Devamını Oku
Blog Resim
HTML Dosyaları Nasıl Oluşturulur? (Ders-1)

HTML

HTML (Hyper Text Markup Language), web sitelerinin yapısal temelini oluşturan bir programlama dilidir. Bu programlama dili, web tasarımına yeni..

Devamını Oku
Blog Resim
HTML'de CSS Nasıl Kullanılır? Örnekleriyle (Ders-8)

HTML

Günümüzde web siteleri, birçok kişi için önemli bir gelir kaynağı olmaktadır. Web siteleri, kullanıcıların ihtiyaçlarına göre tasarlanır ve bu tasarımın..

Devamını Oku