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 ve CSS Kullanarak Kullanıcı Giriş Sayfası Oluşturma

HTML

Merhabalar! Bu bölümde HTML ve CSS kullanarak bir kullanıcı giriş sayfası oluşturacağız.

Devamını Oku
Blog Resim
HTML (Hypertext Markup Language) Nedir?

HTML

HTML, web sayfalarının tasarlanması ve tanımlanması için kullanılan bir etiket dili olarak tanımlanabilir. HTML, web sayfalarındaki metinleri, ..

Devamını Oku
Blog Resim
HTML Sitene Video Nasıl Eklenir? Nasıl Düzenlenir?

HTML

Merhabalar, bugünkü konumuzda sizlere web sitenize nasıl video ekleyebileceğinizi, nasıl ayarlamalar yapabileceğinizi, JavaScript ve CSS'de kullanarak video oynatıcınızı nasıl özelleştirebileceğinizi göstereceğiz..

Devamını Oku
Blog Resim
HTML ve CSS Kullanarak Kullanıcı Kayıt Ol Sayfası Oluşturma

HTML

Merhabalar! Bu bölümde HTML ve CSS kullanarak bir kullanıcı kayıt olma sayfası oluşturacağız.

Devamını Oku