Web teknolojileri dünyasına adım atarken, HTML’i bir binanın iskeleti olarak düşünebiliriz. CSS bu iskeletin görsel tasarımını oluştururken, JavaScript ise etkileşimi ve dinamik özellikleri sağlar. Ancak sağlam bir web sitesi inşa etmek için önce HTML’i iyi anlamalıyız.

HTML Nedir?

HTML (Hypertext Markup Language), web sayfalarının yapısını tanımlayan bir işaretleme dilidir. 1993’te Tim Berners-Lee tarafından geliştirilen HTML, günümüzde HTML5 versiyonuyla modern web uygulamalarının temelini oluşturur. Daha detaylı bilgi için https://doancan.com/html-giris/ yazısına göz atabilirsiniz.

HTML etiketlerden (tags) oluşur. Her etiket, içeriğin nasıl yapılandırılacağını tarayıcıya bildirir. Örneğin:

<etiket>İçerik</etiket>

Temel HTML Yapısı

Modern bir HTML dökümanı şu temel yapıya sahiptir:

<!DOCTYPE html> <html lang="tr"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Sayfa Başlığı</title> </head> <body>     <!-- Sayfa içeriği buraya gelir --> </body> </html>

DOCTYPE Deklarasyonu

<!DOCTYPE html>

Bu satır, dökümanın HTML5 standardında yazıldığını tarayıcıya bildirir. Bu deklarasyon olmadan bazı tarayıcılar “quirks mode” denilen eski bir uyumluluk modunda çalışabilir.

HTML Etiketi ve Dil Tanımı

<html lang="tr">

Tüm HTML içeriğini kapsayan kök elementtir. lang özelliği sayfanın dilini belirtir ve:

  • Ekran okuyucuların doğru telaffuz kullanmasını sağlar
  • Arama motorlarının sayfayı doğru indekslemesine yardımcı olur
  • Tarayıcının çeviri önerilerini düzenler

Head Bölümü

<head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Sayfa Başlığı</title> </head>

<head> bölümü sayfanın meta verilerini içerir:

  • charset: Karakter kodlamasını belirtir. UTF-8, tüm dillerdeki karakterleri destekler
  • viewport: Mobil cihazlarda sayfa görünümünü optimize eder
  • title: Tarayıcı sekmesinde görünen başlık

Body Bölümü ve İçerik Yapılandırma

<body> etiketi içinde kullanabileceğimiz temel içerik etiketleri:

Başlıklar

HTML 6 seviye başlık sunar:

<h1>Ana Başlık - Sayfada Bir Kez Kullanılmalı</h1>
<h2>Bölüm Başlığı</h2>
<h3>Alt Bölüm Başlığı</h3>
<h4>Daha Küçük Başlık</h4>
<h5>Mini Başlık</h5>
<h6>En Küçük Başlık</h6>

Başlık hiyerarşisi SEO için önemlidir. <h1> her sayfada bir kez kullanılmalı ve sayfanın ana konusunu belirtmelidir.

Paragraflar ve Metin Biçimlendirme

<p>     Bu bir paragraftır. İçinde <strong>önemli metin</strong> ve      <em>vurgulu içerik</em> kullanabiliriz. </p> <p>     Metinleri biçimlendirmek için çeşitli etiketler kullanabiliriz:     <mark>vurgulanmış metin</mark>     <small>küçük notlar</small>     <del>silinmiş metin</del>     <ins>eklenmiş metin</ins>     <sub>alt simge</sub>     <sup>üst simge</sup> </p>

HTML Yorumları

<!-- Bu bir HTML yorumudur. Tarayıcıda görünmez -->

Yorumlar kodunuzu belgelemek için önemlidir.

HTML Semantik Yapısı

Semantik HTML, içeriğin anlamını belirten etiketler kullanmayı ifade eder. Örneğin:

<article>
    <header>
        <h1>Makale Başlığı</h1>
        <p>Yazar: İsim Soyisim</p>
    </header>
    
    <section>
        <h2>Bölüm Başlığı</h2>
        <p>Bölüm içeriği...</p>
    </section>
    
    <footer>
        <p>Yayın tarihi: 27 Kasım 2024</p>
    </footer>
</article>

Semantik yapı:

  • SEO’yu iyileştirir
  • Erişilebilirliği artırır
  • Kodun bakımını kolaylaştırır

Pratik Uygulama: İlk Web Sayfamız

Şimdi öğrendiklerimizi kullanarak örnek bir sayfa oluşturalım:

<!DOCTYPE html> <html lang="tr"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Web Geliştirme Blogu</title> </head> <body>     <header>         <h1>Web Geliştirme Yolculuğum</h1>         <p>Deneyimlerimi ve öğrendiklerimi paylaşıyorum</p>     </header>     <main>         <article>             <h2>HTML Öğrenirken Dikkat Edilmesi Gerekenler</h2>                          <section>                 <h3>Semantik Yapının Önemi</h3>                 <p>Semantik HTML kullanmak, <strong>kodunuzun kalitesini</strong> ve                  <em>erişilebilirliğini</em> artırır.</p>             </section>             <section>                 <h3>En Sık Yapılan Hatalar</h3>                 <p>HTML yazarken dikkat edilmesi gereken önemli noktalar:</p>                 <p><mark>DOCTYPE tanımını unutmayın!</mark></p>                 <p><small>Son güncelleme: Kasım 2024</small></p>             </section>         </article>     </main>     <footer>         <p>İletişim: <ins>email@domain.com</ins></p>     </footer> </body> </html>

Tarayıcı Araçları ve Kod İnceleme

Modern tarayıcılar, HTML kodunuzu incelemeniz için güçlü araçlar sunar:

  1. Sayfa üzerinde sağ tıklayıp “İncele” seçeneğini seçin
  2. DevTools penceresinde Elements sekmesini kullanın
  3. HTML yapısını ve etiketlerin hiyerarşisini görüntüleyin

Bu araçlar, kendi kodunuzu ve diğer web sitelerinin yapısını anlamanıza yardımcı olur.

Yaygın Hatalar ve Çözümleri

  1. DOCTYPE eksikliği
  2. Karakter kodlaması tanımlanmaması
  3. Viewport meta etiketinin unutulması
  4. Semantik olmayan etiket kullanımı
  5. Yanlış başlık hiyerarşisi

Bu hataları önlemek için HTML doğrulayıcılar (validators) kullanabilirsiniz.

Bu yazıda HTML’in temel yapısını ve metin biçimlendirme özelliklerini öğrendik. Bir sonraki yazımızda görsel elementler ve bağlantılarla sayfalarımızı nasıl zenginleştirebileceğimizi inceleyeceğiz.

Kategoriler:

HTML,