1. HTML Nedir?

HTML, web sayfalarının içeriğini tanımlamak için kullanılan bir işaretleme dilidir.
Programlama dili değildir; mantıksal akış, koşullar, fonksiyonlar içermez.
Görevi; bir web sayfasındaki:

Başlıklar
Paragraflar
Resimler
Bağlantılar
Listeler
Tablolar
Formlar
Bölümler

gibi yapıları tanımlamak ve tarayıcının bu içeriği anlamasını sağlamaktır.

Tarayıcı, HTML etiketlerini yorumlayarak kullanıcıya görsel bir web sayfası sunar.

2. HTML ile Web Geliştirmenin Temel Mantığı

Bir web sitesi en basit hâliyle üç yapıdan oluşur:

Teknoloji	Görevi
HTML	Sayfanın iskeleti (yapı)
CSS	Görsel tasarım (renk, tipografi, konumlandırma)
JavaScript	Dinamizm ve etkileşim (form kontrolü, animasyonlar, event yönetimi)

Dolayısıyla HTML öğrenmek, tüm web geliştirme sürecinin ilk temel adımıdır.

3. HTML Doküman Yapısı

Her HTML dosyası benzer bir temel iskelete sahiptir:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Örnek Sayfa</title>
</head>
<body>
    <h1>Merhaba Dünya</h1>
    <p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

Bu yapının anlamı:

<!DOCTYPE html>: HTML5 kullanıldığını belirtir.
<html>: Tüm sayfanın kapsayıcı kök etiketidir.
<head>: Sayfanın başlık, karakter seti, SEO bilgileri gibi meta verilerini içerir.
<body>/: Kullanıcıya gösterilen tüm içerik burada bulunur.

4. HTML Etiketleri (Tags)

HTML, yüzlerce etiketten oluşur ancak en çok kullanılanları bilmek başlangıç için yeterlidir.

4.1 Metin Etiketleri

<h1> – <h6>: Başlıklar
<p>: Paragraflar
<span>: Inline metin
<strong> / <b>: Kalın metin
<em> / <i>: İtalik metin

4.2 Bağlantılar


<a href="https://google.com">Google'a git</a>

4.3 Görseller


<img src="resim.jpg" alt="Açıklama">

4.4 Listeler


<ul>
  <li>Madde 1</li>
  <li>Madde 2</li>
</ul>

4.5 Tablolar


<table>
  <tr><th>Ad</th><th>Yaş</th></tr>
  <tr><td>Utku</td><td>25</td></tr>
</table>

4.6 Formlar


<form>
  <input type="text" placeholder="Adınız">
  <button>Gönder</button>
</form>

5. HTML Semantik Etiketler

HTML5 ile birlikte semantik (anlam odaklı) etiketler geldi.
Bu etiketler hem SEO hem de erişilebilirlik açısından kritik öneme sahiptir.

En Önemli Semantik Etiketler

<header> – Üst alan
<nav> – Menü/ navigasyon
<section> – Bölüm
<article> – İçerik parçası
<aside> – Kenar içerik
<footer> – Alt bilgi

Örnek:


<header>
  <h1>Blog Sitesi</h1>
</header>

<section>
  <article>
    <h2>Başlık</h2>
    <p>Makale içerigi...</p>
  </article>
</section>

6. HTML ile Web Geliştirme Süreci Nasıl İlerler?

HTML ile bir web sayfası geliştirme adımları şöyledir:

1) Yapının oluşturulması

Sayfa iskeleti (başlıklar, paragraflar, listeler, bölümler)

2) Tasarım ekleme (CSS)

Renkler, fontlar, margin/padding, layout

3) Etkileşim ekleme (JavaScript)

Sliderlar, popup, animasyon, API bağlantıları

4) Test & Optimize

Tarayıcı testleri, mobil uyumluluk, SEO optimize

5) Yayına alma

Hosting + domain, dosyaların yüklenmesi, CDN kullanımı

7. HTML'de En Önemli Kavramlar

7.1 Block ve Inline Elementler

Block: Yeni satırda başlar (div, p, h1, section…)
Inline: Satır içinde devam eder (span, a, img…)

7.2 DOM Yapısı

Tarayıcı HTML’i okuduktan sonra bir DOM (Document Object Model) ağacı oluşturur.
JavaScript bu DOM üzerinden elementleri manipüle eder.

7.3 HTML Öznitelikleri (Attributes)

Her HTML etiketi belirli özellikler taşıyabilir:

id
class
style
src, alt
href
type
vb.

Örnek:


<p id="paragraf1" class="kirmizi">Merhaba</p>

8. HTML ve SEO

Arama motorlarının sayfayı doğru anlaması için semantik HTML kritik öneme sahiptir.

SEO için önemli HTML öğeleri:

<title>
<meta description>
<h1>
alt etiketi (görseller için)
semantik etiketler

9. HTML Öğrenirken En Sık Yapılan Hatalar

Her şeyi <div> içinde yapmak
Semantik etiketleri kullanmamak
Alt açıklaması olmayan görüntüler
<h1> etiketini sayfada birden fazla kullanmak
Kapanış etiketi unutmak
İç içe yanlış etiket koymak (ör. <p> içinde <div>)

10. HTML ile Web Geliştirmeye Başlamak İçin İpuçları

✔ Küçük projelerle başla

Kişisel blog, kartvizit sayfası, portföy gibi.

✔ Kod editörü kullan

VS Code, Sublime, WebStorm...

✔ Öğrendikçe CSS ve JavaScript ekle

HTML tek başına yeterli değildir, web geliştirmenin temel üçlüsünü öğrenmelisin.

✔ Tasarımları incele

Behance, Dribbble gibi sitelerde tasarımları inceleyerek HTML yapılarını zihinde canlandır.

✔ Responsive tasarım öğren

Mobil uyumluluk artık zorunlu bir standarttır.

Sonuç

HTML, web geliştirme dünyasının temel taşıdır. İster bir blog sitesi, ister e-ticaret platformu, ister kurumsal web sitesi geliştirin; bütün projeler HTML iskeleti üzerine inşa edilir. Bu yüzden HTML’i güçlü bir şekilde öğrenmek, CSS ve JavaScript gibi dillerde gelişmenizi kolaylaştırır.

Bu makale; HTML’in yapısını, temel etiketlerini, semantik yaklaşımı, SEO etkisini ve modern web geliştirme sürecindeki yerini geniş bir çerçevede ele aldı. Başlangıç seviyesinden profesyonelliğe kadar her adım HTML ile başlar.

Yazar: Admin

Kategori: Kodlama

Tarih: 29.11.2025 20:44

Görüntülenme: 38 kez okundu

Etiketler:

bootstrap css css3 html kodlama xhtml

Yorumlar

Henüz yorum yapılmamış. İlk yorumu siz yapın!

Yorum Yap

İlgili Yazılar

Bootstrap 5’in Çıkmasıyla Kütüphanenin Yönü Nasıl Değişti?

Modern Web Geliştirme Açısından Kapsamlı Bir Analiz** Bootstrap, yayımlandığı...

HTML ile Web Geliştirme Nasıl Yapılır?