Altın Konu Web Geliştirme : HTML5 Kapsamlı Başlangıç Rehberi

Reaxiyon · 7 Eki 2025

Merhaba TurkMMO Ailesi

Web'in Temeli: HTML 5 Kapsamlı Başlangıç Rehberi

HTML, bir web sayfasının iskeletini, yani yapısını ve içeriğini belirleyen işaretleme dilidir. HTML, tarayıcınıza hangi metnin başlık, hangisinin paragraf, hangisinin bir görsel olduğunu söyler. HTML olmadan web sitesi olmaz.

I. HTML'in Temel Yapısı ve Söz Dizimi

1. Belge Türü Tanımı (DOCTYPE)

Her HTML dosyasının en üstünde bulunmalıdır ve tarayıcıya hangi HTML sürümünü kullandığını belirtir. Modern standart, HTML5'tir:

<!DOCTYPE html>

2. Kök Etiket (<html>)

Tüm HTML içeriğini kapsayan temel etikettir. Genellikle dil bilgisini belirtmek için lang özniteliği kullanılır:

<html lang="tr">
</html>

3. Başlık Kısmı (<head>)

Kullanıcıya gösterilmeyen, ancak tarayıcı ve arama motorları için hayati bilgiler içeren kısımdır.

<meta> Etiketleri: Karakter setini (charset="UTF-8") ve duyarlı tasarım için viewport ayarlarını (name="viewport") tanımlar.
<title> Etiketi: Tarayıcı sekmesinde görünen başlığı belirler.
<link> Etiketi: CSS dosyalarını veya fontları sayfaya bağlamak için kullanılır.

4. Gövde Kısmı (<body>)

Kullanıcıların tarayıcıda doğrudan gördüğü tüm içerik (metinler, resimler, bağlantılar vb.) bu etiket içinde yer alır.

II. İçerik ve Yapı Etiketleri (Semantik HTML)

Modern HTML yazarken, sadece içeriği göstermek değil, içeriğin anlamını (semantiğini) da doğru bir şekilde iletmek önemlidir.

1. Başlıklar ve Paragraflar

Başlıklar: <h1> (en önemli) ile <h6> (en az önemli) arasında değişir. Sayfa başına sadece bir adet <h1> kullanılması SEO açısından önemlidir.
Paragraflar: Metin blokları için standart etikettir (<p>).

2. Semantik Yapı Etiketleri (HTML5)

Geleneksel olarak kullanılan <div> yerine, sayfanın bölümlerini anlamlı kılan etiketlerdir:

<header>: Sayfanın veya bir bölümün üst kısmını (logo, navigasyon vb.) içerir.
<nav>: Ana navigasyon bağlantılarını içerir.
<main>: Sayfanın birincil ve benzersiz içeriğini barındırır.
<article>: Bağımsız ve kendi başına anlamlı bir içerik (blog yazısı, haber) bölümüdür.
<section>: Birbirine benzer içeriklerin gruplandığı genel bölümdür.
<footer>: Sayfanın veya bir bölümün alt kısmını (telif hakkı, iletişim bilgileri vb.) içerir.

III. Medya ve Etkileşim Etiketleri

1. Görsel Ekleme (<img>)

Web sayfasına resim eklemek için kullanılır. Erişilebilirlik (Accessibility) için alt özniteliği zorunludur.

<img src="resim.jpg" alt="Deniz Manzarası">

2. Bağlantılar (<a>)

Kullanıcıyı başka bir sayfaya veya aynı sayfanın başka bir kısmına yönlendirir.

href Özniteliği: Bağlanılacak hedef URL'yi belirtir.
target="_blank": Bağlantının yeni bir sekmede açılmasını sağlar.

3. Listeler (<ul>, <ol>, <li>)

Sırasız Listeler (<ul>): Madde işaretli listeler için.
Sıralı Listeler (<ol>): Numaralı listeler için.
Liste Öğesi (<li>): Her bir liste elemanını tanımlar.

IV. Formlar ve Kullanıcı Girişi

Formlar, kullanıcıdan bilgi almak için kritik öneme sahiptir.

1. Form Etiketi (<form>)

Tüm giriş öğelerini kapsar. action (bilginin gönderileceği adres) ve method (GET/POST) öznitelikleri önemlidir.

2. Giriş Alanları (<input>)

Farklı türlerde veri girişi sağlar:

type="text", type="password", type="email", type="submit" (gönderme butonu).
placeholder: Alan boşken görünen ipucu metni.
required: Alanın doldurulmasının zorunlu olduğunu belirtir.

3. Etiketleme (<label>)

Giriş alanlarının amacını belirtir ve erişilebilirliği artırır. for ve id öznitelikleri eşleştirilmelidir.

<label for="kullanici_adi">Kullanıcı Adı:</label>
<input type="text" id="kullanici_adi" name="kullanici_adi">

V. HTML'in Geleceği: Erişilebilirlik ve Semantik

HTML öğrenirken en çok dikkat etmeniz gereken iki konu:

Erişilebilirlik (Accessibility - A11y): Web sitenizin görme engelliler, fiziksel engelliler veya ekran okuyucu kullananlar tarafından da kolayca kullanılabilir olmasını sağlar. Doğru semantik etiket kullanımı (<main>, <nav>, <button>) ve alt özniteliği kullanımı bu işin temelidir.
Validasyon (Doğrulama): Yazdığınız HTML kodunun standartlara uygun olup olmadığını kontrol etmek, olası tarayıcı sorunlarını önler.

Bu temel bilgileri pratik yaparak pekiştirdiğinizde, CSS ve JavaScript ile birleşerek dinamik ve işlevsel web siteleri oluşturmaya hazır olursunuz!