Temel HTML etiketleri özeti

HTML etiketleri, web sayfalarının yapı taşlarıdır. Çalışan bir site oluşturmak için yaklaşık 20-30 temel elementi bilmek yeterlidir. Bu makalede, geliştiricilerin günlük görevlerinin %90'ını kapsayan en çok talep edilen etiketler kod örnekleriyle birlikte sunulmuştur: belge yapısının oluşturulmasından iletişim formlarına kadar.

Belgenin temel yapısı

Her HTML sayfası, tarayıcıya kod işleme kurallarını bildiren bir şablonla başlar. Bu etiketler olmadan sayfa yanlış görüntülenebilir veya doğrulamadan geçemeyebilir.

Sayfa iskeleti

• <!DOCTYPE html> — belge türü bildirimi (HTML5). İlk satırda olmalıdır.
• <html> — tüm içeriğin içinde bulunduğu kök element. lang="ru" özelliği, tarayıcıların ve ekran okuyucuların dili belirlemesine yardımcı olur.
• <head> — teknik blok. Burada meta veriler, stil dosyaları ve komut dosyaları bulunur. Kullanıcı bu içeriği doğrudan görmez.
• <body> — sayfanın görünür kısmı. Tüm metinler, resimler ve düğmeler burada yer alır.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sekme başlığı</title>
</head>
<body>
    <!-- Görünür içerik -->
</body>
</html>

Meta etiketler

<meta> etiketi SEO ve duyarlılık için son derece önemlidir.

• charset="UTF-8" — Kiril alfabesi ve özel karakterlerin doğru görüntülenmesi.
• viewport — mobil cihazlara uyum sağlama (bu etiket olmadan telefonda site, küçültülmüş masaüstü sürümü gibi görünür).

Metin ve başlıklarla çalışma

HTML'de doğru tipografi hiyerarşi üzerine kuruludur. Arama motorları, içerik yapısını anlamak için başlıkları kullanır.

Başlıklar <h1>–<h6>

Sayfa başına bir adet <h1> kullanın (ana konu). Diğer seviyeleri (<h2>, <h3>) mantıksal olarak iç içe geçirin, tıpkı matruşka gibi. Seviyeleri atlamayın (<h2>den hemen sonra <h4> koymayın).

<h1>Bisiklet nasıl seçilir</h1>
<h2>Kadro türleri</h2>
<h3>Alüminyum kadrolar</h3>
<p>Açıklama metni...</p>

Paragraflar ve biçimlendirme

• <p> — standart paragraf. Tarayıcı otomatik olarak üstten ve alttan boşluk ekler.
• <br> — paragraf içinde zorunlu satır sonu (nadiren kullanın, sadece adresler veya şiirler için).
• <strong> — önemli metin (genellikle kalın). SEO için semantik ağırlığı vardır.
• <em> — vurgulanmış metin (genellikle italik). Ekran okuyucuyla okunurken tonlamayı değiştirir.

Bağlantılar ve medya içeriği

Hiper bağlantılar ve görseller, navigasyon ve görsel sunumun temelidir.

Bağlantılar <a>

Ana özellik href'dir (hedef adres).

• Yeni sekmede açmak için target="_blank" ekleyin.
• Harici bağlantıları açarken güvenlik için rel="noopener noreferrer" ekleyin.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Örneğe git
</a>

Görseller <img>

Tekli etiket (kapatma etiketi gerektirmez).

• src — dosya yolu.
• alt — alternatif metin. Zorunludur! Resim yüklenmezse kullanıcı bu metni görür. Ayrıca ekran okuyucular tarafından okunur.

<img src="cat.jpg" alt="Kızıl kedi pencere pervazında uyuyor" width="600" height="400">

Medya gruplama <figure>

Bir resmin veya videonun alt yazısı varsa, bunları <figure> içine alın ve alt yazıyı <figcaption> içine yerleştirin.

<figure>
    <img src="graph.png" alt="Satış artış grafiği">
    <figcaption>Şekil 1. 2025 yılı gelir dinamiği</figcaption>
</figure>

Listeler ve navigasyon

Listeler sadece sıralamalar için değil, menüler, ekmek kırıntıları ve ürün özellikleri için de kullanılır.

Liste türleri

• <ul> — madde işaretli liste (noktalar). Sıkı bir sırası olmayan öğe kümeleri için.
• <ol> — numaralı liste (rakamlar). Talimatlar, derecelendirmeler, adımlar için.
• <li> — liste öğesi (ul veya ol içine yerleştirilir).

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Navigasyon <nav>

Sitenin ana menülerini <nav> etiketi içine alın. Bu, arama botlarının site yapısını hızlıca bulmasına yardımcı olur.

<nav>
    <ul>
        <li><a href="/">Ana Sayfa</a></li>
        <li><a href="/about">Hakkımızda</a></li>
    </ul>
</nav>

Semantik işaretleme

Semantik, anlamsız <div>leri bloğun rolünü açıklayan etiketlerle değiştirir. Bu, erişilebilirliği ve SEO'yu iyileştirir.

Açılış sayfası yapısı örneği:

<header>
    <nav>...</nav>
</header>

<main>
    <section>
        <h2>Hizmetlerimiz</h2>
        <article>Hizmet 1</article>
        <article>Hizmet 2</article>
    </section>
    
    <aside>
        <p>Ayın kampanyası!</p>
    </aside>
</main>

<footer>
    <p>© 2026 Tüm hakları saklıdır</p>
</footer>

Formlar ve veri girişi

Formlar, kullanıcının siteyle etkileşime girmesini sağlar: kayıt olmak, ürün aramak, mesaj göndermek.

Temel elementler

• <form> — form konteyneri. action özelliği verilerin nereye gönderileceğini belirtir.
• <label> — alan etiketi. Mutlaka for ve id ile alana bağlayın. Bu, tıklama alanını genişletir ve ekran okuyuculara yardımcı olur.
• <input> — giriş alanı. Türü type özelliği ile belirlenir (text, email, password, checkbox).
• <button> — gönderme veya işlem düğmesi.

<form action="/submit" method="POST">
    <label for="email">E-posta Adresiniz:</label>
    <input type="email" id="email" name="email" required placeholder="[email protected]">
    
    <button type="submit">Abone Ol</button>
</form>

Açılır listeler

Çok seçenek arasından tek bir seçim yapmak için <select> kullanın.

<label for="city">Şehir:</label>
<select id="city" name="city">
    <option value="msk">Moskova</option>
    <option value="spb">Saint Petersburg</option>
</select>

Sık yapılan hatalar

1. Görsellerde alt eksikliği. Bu, erişilebilirlik standartlarının ihlalidir ve SEO'yu kötüleştirir.
2. Sayfada birden fazla <h1> olması. Arama motorlarını kafa karıştırır. Ana başlık sadece bir tane olmalıdır.
3. Semantik etiketler yerine <div> kullanılması. <div class="header">, basitçe <header> kullanmaktan daha kötüdür.
4. Blok elementlerin satır içi elementlere iç içe geçirilmesi. Örneğin, <div> veya <p>yi <a> veya <span> içine yerleştiremezsiniz (HTML5 bazı kuralları yumuşatmış olsa da, mantığa uymak daha iyidir: blok içine blok, satır içi içine satır içi).
5. Unutulan viewport. Site akıllı telefonlarda okunamaz hale gelir.

SSS

Tüm HTML etiketlerini ezberlemek gerekir mi? Hayır. Temel olanları (~30 adet) hatırlamak yeterlidir. Gerisini ihtiyaç duydukça referans kaynaklarında (örneğin MDN) hızlıca bulabilirsiniz.

<section> ile <div> arasındaki fark nedir? <section> semantik bir anlam taşır; genellikle bir başlığı olan tematik bir içerik grubudur. <div> ise uygun semantik etiket olmadığında yalnızca stil verme veya komut dosyası gruplama amacıyla kullanılan nötr bir konteynerdir.

Giriş alanları için neden <label> kullanmak önemlidir? Etiket metnine tıklandığında odak otomatik olarak ilişkili giriş alanına geçer. Bu, fare kullanan kullanıcılar için kullanışlıdır ve ekran erişim programları kullanan kişiler için kritik öneme sahiptir.