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 Elementleri Nelerdir? Nasıl Kullanılır? (Ders-2)

HTML

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..

Devamını Oku
Blog Resim
HTML Stilleri Nelerdir? Nasıl Kullanılır? (Ders-4)

HTML

Bu bölümde HTML Stillerini inceleyeceğiz. Günümüzde internetin hayatımızdaki yeri her geçen gün artmakta ve web sayfalarının tasarımı da aynı şekilde..

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
Blog Resim
Web Sitelesine Sosyal İkonlar Ekleme Kodu

HTML

Sosyal medya, modern çevrimiçi varlığın ayrılmaz bir parçasıdır ve web sitelerine sosyal medya ikonları eklemek, ziyaretçilerin markanızla sosyal platformlarda etkileşime girmesini teşvik eder.

Devamını Oku