HTML Nitelikleri Nelerdir? Nasıl Kullanılır? (HTML Dersleri 3)

Blog Gönderisi Resmi

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

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 temel programlama dilidir. Bizler de bu dilin niteliklerine bakarak kod örnekleriyle inceliyoruz.

HTML, web sayfalarının tasarlandığı temel yapı bloğudur. HTML, görsel ve işlevsel özelliklerin tanımlandığı kodlama dilidir. Bir web sitesinde görülen her şey HTML kodlarınca oluşturulur. HTML kodlaması yapılırken, sayfanın SEO (Arama Motoru Optimizasyonu) standartlarına uygun olması da oldukça önemlidir. Bu makalede HTML nitelikleri üzerine bilgi verilecek ve SEO için optimize edilmiş bir HTML kod örneği sunulacaktır.

HTML'de en sık kullanılan nitelikler şunlardır:

id Niteliği

id niteliği, sayfanın belirli bir kısmına benzersiz bir kimlik veren bir kodlama sistemidir. id niteliği, sayfa içinde tek bir parçanın özelleştirilmesine izin verir. Örneğin, bir sayfada bir başlık etiketi için bir id niteliği oluşturabilirsiniz ve bu nitelik altındaki özellikleri yalnızca bu başlık etiketi için özelleştirebilirsiniz.

Örnek:


<h1 id="baslik-etiketi">Bu sayfanın başlığı</h1>

class Niteliği

class niteliği, HTML kodlarının belirli gruplara ayrılmasını sağlar. Belirli stil özellikleri veya işlevler için bir grup tanımlamak gerektiğinde, class niteliği kullanılır. class niteliği, birden fazla öğeye aynı özellikleri uygulamak için idealdir.

Örnek:


<p class="mavi-yazi"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

alt Niteliği

alt niteliği genellikle resim etiketleri için kullanılır. Bu nitelik, resim yüklenmediğinde veya hatalı yüklendiğinde alternatif bir metin gösterir. Google botları da resimleri okuyamadığı için, alt niteliği sayesinde botların resim hakkında bilgi oluşturmasına yardımcı olur.

Örnek:


<img src="resim.jpg" alt="Manzara resmi">

Bu özelliklerin belirtildiği HTML kodlarının SEO için optimize edilmesi de oldukça önemlidir. Örneğin, sayfa başlığı (h1 etiketi) doğrudan sayfanın konusuyla ilgili olmalı ve içerikle birleşmelidir. Yine, sesli okuyucular veya botlar için çoklu başlıklar yapmak önemlidir. Kod örneğimiz aşağıdaki gibi olabilir:


 <!DOCTYPE html>
 <html>
 <head>
 <title> Örnek Sayfa Başlığı </title>
 </head>
 <body>
 <header>
 <h1> Örnek Sayfa Başlığı </h1>
 <nav>
 <ul>
        <li><a href="#"> Anasayfa </a></li>
        <li><a href="#"> Hakkımızda </a></li>
        <li><a href="#"> İletişim </a></li>
 </ul>
 </nav>
 </header>
 <main>
   <section>
       <h2> Bölüm 1 </h2>
          <p> Bu bölümdeki içerik. </p>
    </section>
 <section>
        <h2> Bölüm 2 </h2>
          <p> Bu bölümdeki içerik. </p>
 </section>
 <section>
        <h2> Bölüm 3 </h2>
        <p> Bu bölümdeki içerik. </p>
 </section>
 </main>
 <footer>
 <p> © 2021 Örnek Web Sitesi </p>
 </footer>
 </body>
 </html>
 

Bu kod örneğinde, h1 etiketi sayfa başlığını, h2 etiketleri ise bölümleri belirtmek için kullanılmıştır. Etiketlerin yanı sıra, class ve id nitelikleri de bazı yerlerde kullanılmıştır. Bu sayede, sayfanın SEO standartlarına uygun olduğu ve arama motorları tarafından daha iyi indekslenebileceği sağlanmıştır.

a href Niteliği:

Bu nitelik, bir sayfa veya dosyaya bağlantı oluşturmanızı sağlar. href niteliği için kullanılan örnek kod:

Örnek:


<a href="www.google.com">Google'a Git</a>

lang Niteliği

Bu nitelik, elementin hangi dilde olduğunu tanımlamanıza olanak tanır. lang niteliği için kullanılan örnek kod:

Örnek:


<div lang="tr">Türkçe içerik burada</div>

style Niteliği

Bu nitelik, belirli bir elementin görünümünü düzenlemenize olanak sağlar. style niteliği için kullanılan örnek kod:

Örnek:


<p style="color:red; font-size:20px;">Bu paragraf örnektir.</p>

src Niteliği

Bu nitelik, bir resim ya da video gibi multimedyal dosya için kaynak adresini belirtmenizi sağlar. src niteliği için kullanılan örnek kod:

Örnek:


<img src="resim.jpg" alt="Örnek Resim">

width ve height Nitelikleri:

Bu nitelikler, resim veya video gibi multimedyal dosyaların boyutlarını belirlemenizi sağlar. width ve height nitelikleri için kullanılan örnek kod:

Örnek:


<img src="resim.jpg" alt="Örnek Resim" width="500px" height="300px">

Bu nitelikler, HTML kodlarınızda doğru ve düzgün bir şekilde kullanıldığında, arama motorlarının sayfalarınızı daha iyi anlamasına ve sıralamasına yardımcı olabilir.

title Niteliği

title niteliği, bir öğe hakkında bazı ekstra bilgileri tanımlar. title özniteliğinin değeri, öğenin üzerine fareyi getirdiğinizde bir araç ipucu olarak görüntülenecektir:

Örnek:


<p title="Ben Enes Alp">Bu bir paragraftır.</p> 

Bu derste neler öğrendik?

<a> öğesinin href özelliği, bağlantının gideceği sayfanın URL'sini belirtir.
<img> öğesinin src özelliği, görüntülenecek görüntünün yolunu belirtir.
<img> öğesinin width ve height nitelikleri, görüntüler için boyut bilgisi sağlar
<img> öğesinin alt özelliği, bir resim için alternatif bir metin sağlar
style niteliği, bir öğeye renk, yazı tipi, boyut ve daha fazlası gibi stiller eklemek için kullanılır.
<html> etiketinin lang özelliği, web sayfasının dilini bildirir.
title özniteliği, bir öğe hakkında bazı ekstra bilgileri tanımlar.
class niteliği, HTML kodlarının bölümlere ayrılmasını sağlar.
id niteliği, belirli bir bölüme benzersiz kimlik oluşturmayı sağlar.

4. Bölümde Görüşmek Dileğiyle!

Sizin İçin Önerdiklerimiz

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