HTML Nedir? En Çok Kullanılan HTML Kodları

HTML nedir?

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. Bir web sayfasında gördüğün başlık, paragraf, görsel, link, liste, tablo ve form gibi yapıların büyük bölümü HTML etiketleriyle tanımlanır. HTML tek başına “programlama dili” değildir; daha çok tarayıcıya “bu içerik başlık”, “bu bir link”, “bu bir görsel” gibi anlam ve yapı veren bir dildir.

HTML, tarayıcıların okuyup ekranda gösterdiği bir belge formatı gibi düşünülebilir. Görsel tasarım için genellikle CSS, etkileşim ve dinamik davranışlar için JavaScript devreye girer. Ama temel yapı çoğu zaman HTML ile başlar; bu nedenle HTML bilmek, web geliştirmeye girişin en kritik adımıdır.

HTML ne işe yarar?

HTML’in temel amacı, web içeriğini anlamlı ve düzenli şekilde tanımlamaktır. Bu sayede:

Sayfanın yapısı (header, main, footer gibi) netleşir.
SEO açısından arama motorları sayfayı daha iyi anlar.
Erişilebilirlik (accessibility) güçlenir.
Tarayıcılar içerikleri doğru şekilde render eder.
İçerik yönetimi ve düzenlemeler daha kolay olur.

HTML yapısı nasıldır?

Bir HTML belgesi genellikle şu temel yapıda olur:

<!doctype html>: Belgenin HTML5 olduğunu belirtir.
<html>: Tüm sayfayı saran kök etikettir.
<head>: SEO, başlık, meta etiketler, CSS bağlantıları vb.
<body>: Kullanıcının gördüğü içerik alanı.

HTML etiketleri (tag) mantığı

HTML’de çoğu etiket açılış-kapanış şeklindedir:

Açılış: <p>
Kapanış: </p>

Bazı etiketler ise “boş (void)” yapıdadır, kapanış etiketi yoktur:

<img>
<br>
<hr>
<meta>
<link>

Etiketlerin içine özellik (attribute) yazılır:

href, src, alt, title, id, class vb.

Örnek:

<a href="https://ornek.com" title="Siteye git">Tıkla</a>

HTML’de en çok kullanılan temel etiketler

Bu bölümde günlük kullanımda en sık karşılaşılan HTML etiketlerini anlamlarıyla birlikte bulacaksın.

Başlık etiketleri (h1–h6)

Başlıklar sayfanın hiyerarşisini kurar:

<h1>: Sayfanın ana başlığı (genellikle 1 adet)
<h2>: Ana başlık altı bölüm başlıkları
<h3>: Bölümün alt kırılımları

SEO için başlık hiyerarşisi çok önemlidir. h1 tek olmalı, h2’ler ana bölümleri, h3’ler alt detayları taşır.

Paragraf etiketi (p)

Metin blokları için kullanılır:

<p>Bu bir paragraftır.</p>

Kalın, italik, vurgu etiketleri

<strong>: Önemli vurguyu belirtir (SEO/semantik açıdan güçlü)
<b>: Sadece görsel kalın (semantik anlamı yok)
<em>: Vurgu/italik (semantik)
<i>: Sadece görsel italik

Öneri: Mümkün olduğunca <strong> ve <em> kullan.

Satır sonu ve ayraç etiketleri

<br>: Satır atlatır
<hr>: Yatay çizgi/ayraç ekler

Link (a) etiketi ile bağlantı verme

Web’in temel taşı linktir:

Dış link örneği

<a href="https://site.com">Siteye git</a>

Aynı sayfada bir bölüme gitme (anchor)

Önce hedefe id ver:
<h2 id="formlar">Formlar</h2>

Sonra linkle:
<a href="#formlar">Formlar bölümüne git</a>

Yeni sekmede açma (target=”_blank”)

<a href="https://site.com" target="_blank" rel="noopener">Yeni sekmede aç</a>

Not: rel="noopener" güvenlik için önerilir.

Görsel (img) etiketi ve SEO

Görsel eklemek için:
<img src="resim.jpg" alt="Açıklayıcı alternatif metin">

alt metni neden önemli?

SEO: Google görseli ve bağlamı daha iyi anlar.
Erişilebilirlik: Ekran okuyucular alt metni okur.
Görsel yüklenmezse kullanıcı alt metni görür.

title ve boyut kullanımı

<img src="resim.jpg" alt="Ürün fotoğrafı" width="800" height="600">

Liste etiketleri: ul, ol, li

Listeler hem okunabilirlik hem SEO için mükemmel yapılardır.

Sırasız liste (ul)

<ul>
  <li>Hizmet 1</li>
  <li>Hizmet 2</li>
  <li>Hizmet 3</li>
</ul>

Sıralı liste (ol)

<ol>
  <li>Adım 1</li>
  <li>Adım 2</li>
  <li>Adım 3</li>
</ol>

Div ve span: düzen kurmanın iki temel taşı

HTML Nedir? En Çok Kullanılan HTML Kodları

div nedir?

div blok seviyede bir konteynerdır. Bölümleri sarmalar, gruplar:
<div class="kapsayici">...</div>

span nedir?

span satır içi bir konteynerdır. Metin içinde küçük parçaları işaretler:
<span class="vurgulu">Önemli</span>

HTML semantik etiketler (SEO ve erişilebilirlik için kritik)

Semantik etiketler sayfanın anlamını güçlendirir:

<header>: Üst alan (logo, menü)
<nav>: Menü alanı
<main>: Ana içerik
<section>: Bölüm
<article>: Makale/bağımsız içerik
<aside>: Yan içerik (sidebar)
<footer>: Alt bilgi

Örnek yapı:

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Tablo etiketleri (table) doğru kullanım

Tablo kullanımı SEO’dan çok okunabilirlik içindir ama doğru yapı önemlidir.

Basit tablo örneği

<table>
  <thead>
    <tr>
      <th>Paket</th>
      <th>Fiyat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Başlangıç</td>
      <td>₺999</td>
    </tr>
  </tbody>
</table>

th ve caption kullanımı

<th> başlık hücresi
<caption> tablonun açıklaması

Formlar: kullanıcıdan veri alma (en çok kullanılan HTML kodları)

Formlar; iletişim formu, üyelik, giriş, teklif isteme gibi birçok noktada kullanılır.

Form etiketi (form)

<form action="/gonder" method="post">
  ...
</form>

input türleri (en yaygın)

text
email
password
tel
number
date
checkbox
radio
file
hidden
submit

Örnek:

<input type="email" name="email" placeholder="E-posta">

label kullanımı (erişilebilirlik)

<label for="email">E-posta</label>
<input id="email" type="email" name="email">

textarea

<textarea name="mesaj" rows="5" placeholder="Mesajınız"></textarea>

select (açılır liste)

<select name="konu">
  <option value="teklif">Teklif</option>
  <option value="destek">Destek</option>
</select>

button

<button type="submit">Gönder</button>

HTML’de id ve class farkı

id nedir?

Sayfada benzersiz olmalı.
Tek bir elemanı hedeflemek için idealdir.

Örnek:
<div id="hero">...</div>

class nedir?

Aynı sınıf birden fazla elemanda kullanılabilir.
CSS ve JS ile toplu hedefleme için idealdir.

Örnek:
<div class="kart">...</div>

HTML meta etiketleri (SEO için olmazsa olmaz)

Meta etiketler head bölümünde yer alır.

title etiketi

Sayfa başlığı:

<title>HTML Nedir? En Çok Kullanılan HTML Kodları</title>

meta description

Google sonuçlarında görünen açıklama:

<meta name="description" content="HTML nedir, ne işe yarar? En çok kullanılan HTML etiketleri ve örnek kodlar. SEO uyumlu kapsamlı rehber.">

viewport (mobil uyumluluk)

<meta name="viewport" content="width=device-width, initial-scale=1">

canonical (kopya içerik önleme)

<link rel="canonical" href="https://site.com/html-nedir">

HTML’de yorum satırı nasıl yazılır?

<!-- Bu bir yorum satırıdır -->

HTML karakter kaçışları (entity) – sık kullanılanlar

Bazı karakterleri HTML’de güvenli yazmak için entity kullanılır:

< → <
> → >
& → &
  → boşluk

HTML5 ile gelen önemli özellikler

HTML5, özellikle semantik yapı ve medya desteğini güçlendirdi.

video etiketi

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
</video>

audio etiketi

<audio controls>
  <source src="ses.mp3" type="audio/mpeg">
</audio>

En çok kullanılan HTML kodları: pratik hazır bloklar

Bu bölüm “kopyala-yapıştır” kullanım için idealdir.

Basit sayfa şablonu

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sayfa Başlığı</title>
  <meta name="description" content="Sayfa açıklaması">
</head>
<body>

  <header>
    <h1>Site Başlığı</h1>
    <nav>
      <a href="/">Anasayfa</a>
      <a href="/hakkimizda">Hakkımızda</a>
      <a href="/iletisim">İletişim</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Bölüm başlığı</h2>
      <p>Paragraf metni burada.</p>
    </section>
  </main>

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

</body>
</html>

İletişim formu şablonu

<form action="/iletisim" method="post">
  <label for="ad">Ad Soyad</label>
  <input id="ad" type="text" name="ad" required>

  <label for="email">E-posta</label>
  <input id="email" type="email" name="email" required>

  <label for="mesaj">Mesaj</label>
  <textarea id="mesaj" name="mesaj" rows="5" required></textarea>

  <button type="submit">Gönder</button>
</form>

SEO uyumlu görsel + açıklama bloğu

<figure>
  <img src="html-etiketleri.png" alt="HTML etiketleri örnekleri">
  <figcaption>HTML etiketleri ile sayfa yapısı oluşturma örneği.</figcaption>
</figure>

HTML ile SEO uyumu nasıl güçlendirilir?

HTML’in SEO’ya etkisi “doğru yapı” ve “anlam” üzerinden olur.

Başlık hiyerarşisi doğru kurulur

1 adet h1
Bölümler h2
Alt kırılımlar h3

Semantik etiketler kullanılır

div her yerde çalışır ama header/nav/main/article/footer gibi etiketler, arama motorlarına sayfanın bölümlerini daha iyi anlatır.

Link yapısı temiz olur

Anlamlı anchor text kullan: “tıkla” yerine “HTML etiketleri listesi” gibi.
Gereksiz nofollow kullanma (sadece gerektiğinde).

Görsel optimizasyonu yapılır

Her görsele açıklayıcı alt yaz.
Aşırı anahtar kelime doldurma yapma; doğal yaz.

Meta title ve description özenli yazılır

Title: 50–60 karakter bandında, ana kelime başta.
Description: 140–160 karakter bandında, tıklamaya teşvik eden net açıklama.

HTML öğrenmeye yeni başlayanlar için sık yapılan hatalar

Etiketleri kapatmamak

Özellikle p, div, a gibi etiketlerde kapanış unutulunca sayfa düzeni bozulur.

Aynı id’yi birden fazla kez kullanmak

id tek olmalı. Çoklu kullanım hem CSS/JS hem SEO/erişilebilirlik tarafında sorun çıkarır.

Görsellerde alt metnini boş bırakmak

Erişilebilirlik ve SEO açısından kayıptır.

Sayfada birden fazla h1 kullanmak

Teknik olarak mümkün ama pratikte çoğu senaryoda SEO hiyerarşisini bozabilir. Kurumsal/WordPress temalarında bazen otomatik h1 dağılımı olur; kontrol etmek gerekir.

HTML örnekleriyle mini “etiket rehberi”

Bu mini rehber, içerikte geçen etiketleri hızlı hatırlamak için:

Metin etiketleri

h1–h6: başlık
p: paragraf
strong: güçlü vurgu
em: vurgu/italik
br: satır sonu

Medya etiketleri

img: görsel
video: video
audio: ses

Düzen etiketleri

div: blok kapsayıcı
span: satır içi kapsayıcı
section, article, main, header, footer, nav: semantik düzen

Form etiketleri

form, input, textarea, select, option, button, label

HTML neden hâlâ en önemli temellerden biri?

Web teknolojileri sürekli değişse de HTML, web sayfalarının “dili” olduğu için yerini hiçbir şey tam olarak alamaz. İster WordPress kullan, ister özel yazılım geliştir, ister e-ticaret paneli kur; eninde sonunda HTML ile karşılaşırsın. Ayrıca SEO tarafında da HTML’nin doğru kullanımı, sayfanın anlaşılmasını ve indeks performansını doğrudan etkiler.

Etiket / Konu	Ne işe yarar?	Örnek Kod
`<h1>...</h1>`	Ana başlık (sayfa başlığı)	`<h1>HTML Nedir?</h1>`
`<p>...</p>`	Paragraf metni	`<p>Bu bir paragraftır.</p>`
`<a>...</a>`	Link (bağlantı)	`<a href="https://ornek.com" target="_blank" rel="noopener">Siteye Git</a>`
`<img>`	Görsel ekler (alt metin SEO/erişilebilirlik için önemli)	`<img src="resim.jpg" alt="HTML kod örneği" width="600">`
`<ul> / <ol> / <li>`	Liste oluşturur (madde / sıralı)	`<ul> <li>Madde 1</li> <li>Madde 2</li> </ul>`
`<strong>`	Vurgu / güçlü önem (semantik)	`<p><strong>Önemli:</strong> Semantik etiketler SEO'yu destekler.</p>`
`<em>`	Vurgu / italik (semantik)	`<p>Bu kelime <em>vurgulanmıştır</em>.</p>`
`<div>`	Blok düzey kapsayıcı (düzen/yerleşim)	`<div class="kutu"> <h2>Başlık</h2> <p>İçerik</p> </div>`
`<span>`	Satır içi kapsayıcı (metin içinde parça)	`<p>Bu bir <span style="color:#e67e22;">vurgulu</span> kelime.</p>`
`<header>`	Sayfa/section üst kısmı (semantik)	`<header> <h1>Site Başlığı</h1> </header>`
`<nav>`	Navigasyon menüsü (semantik)	`<nav> <a href="/">Anasayfa</a> <a href="/blog">Blog</a> </nav>`
`<main>`	Ana içerı içerik alanı (semantik)	`<main> <article>...</article> </main>`
`<article>`	Bağımsız içerik (blog yazısı gibi)	`<article> <h2>HTML Semantik Etiketler</h2> <p>...</p> </article>`
`<section>`	Bölüm/konu blokları (semantik)	`<section> <h2>En Çok Kullanılan Etiketler</h2> <p>...</p> </section>`
`<footer>`	Alt bilgi alanı (semantik)	`<footer> <p>© 2026 Site Adı</p> </footer>`
`<button>`	Buton	`<button type="button">Tıkla</button>`
`<form>`	Form alanı	`<form action="/gonder" method="post"> <input type="text" name="ad" placeholder="Adınız"> <button type="submit">Gönder</button> </form>`
`<label>`	Form etiketi (erişilebilirlik için önemli)	`<label for="email">E-posta</label> <input id="email" type="email" name="email">`

Sık Sorulan Sorular (SSS)

HTML nedir ve ne işe yarar

HTML, web sayfalarının yapısını oluşturmak için kullanılan bir işaretleme dilidir. Metin, resim, video gibi içeriklerin düzenlenmesini ve tarayıcıda görüntülenmesini sağlar.

HTML5 ile gelen yenilikler nelerdir

HTML5, semantik etiketler, yerleşik multimedya oynatıcılar ve gelişmiş form doğrulama özellikleri gibi birçok yenilik sunar. Bu, web geliştirmeyi daha esnek ve kullanıcı dostu hale getirir.

HTML'de form doğrulama nasıl yapılır

HTML5, yerleşik form doğrulama özellikleri sunar. `required`, `pattern` gibi özellikler kullanılarak form alanlarının doğruluğu kontrol edilebilir.

HTML ve SEO arasındaki ilişki nedir

HTML, SEO için kritik bir rol oynar. Doğru etiketlerin kullanımı, arama motorlarının sayfa içeriğini daha iyi anlamasına yardımcı olur ve sayfanın arama sonuçlarındaki sıralamasını iyileştirir.

HTML'de erişilebilirlik nasıl sağlanır

HTML, `alt` metinler ve semantik etiketler gibi özelliklerle erişilebilirliği destekler. Bu, engelli kullanıcıların web içeriğine daha kolay erişmesini sağlar.

HTML ve CSS arasındaki fark nedir

HTML, web sayfalarının yapısını oluştururken, CSS bu yapının stilini ve görünümünü belirler. CSS, HTML ile birlikte kullanılarak daha estetik ve kullanıcı dostu web sayfaları oluşturulmasını sağlar.

HTML öğrenmek zor mu?

HTML öğrenmesi en kolay web teknolojilerinden biridir. Temel etiketler kısa sürede öğrenilebilir ve pratik yapıldıkça hızla ilerleme sağlanır.

HTML öğrenmek SEO uzmanları için gerekli mi?

Evet, HTML bilgisi SEO uzmanları için büyük avantaj sağlar. Sayfa yapısını, başlıkları, linkleri ve teknik hataları daha kolay analiz etmeye yardımcı olur.