Her gün ziyaret ettiğiniz web sitelerini bir insan vücudu olarak düşünün. O vücudun görünümünü (renkler, fontlar) ve stilini CSS, hareketlerini ve fonksiyonlarını ise JavaScript sağlar. Peki ya o vücudu ayakta tutan, kemikleri ve organları taşıyan temel yapı, yani iskelet? İşte o iskelet, internetteki her bir sayfanın temelini oluşturan HTML'dir.
HTML bilmek, web'in dilini konuşmaya başlamanın ilk ve en temel adımıdır. Yeni başlayanlar için rehber niteliği taşıyan makalemiz, size HTML'in ne olduğunu, bir programlama dili olup olmadığını, nasıl çalıştığını ve modern SEO için neden hala hayati önem taşıdığını en basit ve en anlaşılır şekilde anlatmak için hazırlandı.
HTML (HyperText Markup Language): Web'in Temel Dili Hakkında Her Şey
Web geliştirmenin temel taşı olan HTML'i A'dan Z'ye keşfedin. Bir web sayfasının iskeletinin nasıl kurulduğunu, temel etiketlerin ne işe yaradığını ve nasıl öğrenileceğini bu kılavuzda bulun.
HTML Nedir? (HyperText Markup Language)
HTML, HyperText Markup Language (Hiper Metin İşaretleme Dili) kelimelerinin kısaltmasıdır. En önemli ve en sık karıştırılan nokta şudur: HTML, bir programlama dili değildir. Bir işaretleme dilidir.
- Programlama Dili: Mantıksal işlemler yapar, "eğer-ise" gibi koşullar çalıştırır, fonksiyonlar oluşturur. (Örn: JavaScript, PHP, Python).
- İşaretleme Dili (HTML): Bir içeriğin yapısını ve ne anlama geldiğini tarayıcıya "işaretler" veya "etiketler". Yani, "Bu bir ana başlıktır", "Bu bir paragraftır", "Bu bir resimdir" gibi komutlar vererek sayfanın iskeletini oluşturur.
Kısacası HTML, web sayfasının içeriğini yapılandırmak için kullandığımız standart dildir.
HTML Nasıl Çalışır? (Etiketler, Elementler ve Nitelikler)
HTML, etiket (tag) adı verilen komutlarla çalışır. İlgili etiketler, genellikle bir açılış (`<p>`) ve bir kapanış (`</p>`) etiketinden oluşur. İkisi arasındaki her şey, o etiketin tanımladığı elementtir.
İşte web tasarımının temelini oluşturan HTML sayfasının anatomisi:
!DOCTYPE html
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sayfa Başlığı Burada Görünür</title>
</head>
<body>
<h1>Bu Benim Ana Başlığım</h1>
<p>Bu bir paragraftır. <strong>Bu metin kalın.</strong></p>
<a rel="external noopener nofollow" target="_blank" href="https://www.ogocer.com/">Bu bir linktir.</a>
<img src="resim.jpg" title='HTML Nedir? Yeni Başlayanlar İçin Kapsamlı Temel Kodlama Rehberi' alt="Açıklayıcı Resim Metni">
</body>
</html>
- <!DOCTYPE html>: Tarayıcıya, bu belgenin bir HTML5 belgesi olduğunu söyler.
- <html>: Tüm sayfanın kök elementidir.
- <head>: Sayfa hakkında, kullanıcıların görmediği meta bilgileri (sayfa başlığı, karakter seti, CSS dosyaları vb.) içerir.
- <body>: Kullanıcının tarayıcıda gördüğü tüm içeriğin (başlıklar, paragraflar, resimler) bulunduğu yerdir.
- Nitelikler (Attributes): `href` veya `src` gibi, bir elemente ek bilgi veren komutlardır. `<a>` etiketine nereye gideceğini, `<img>` etiketine hangi resmi göstereceğini söylerler.
HTML ve SEO: Google'ın Gözünden İskeletin Önemi
İyi yapılandırılmış bir HTML, SEO'nun temelidir. Googlebot, sitenizi tararken içeriğinizin ne hakkında olduğunu anlamak için HTML etiketlerinize bakar.
- Title Etiketi (`<title>`): Sayfanızın arama sonuçlarında görünen mavi başlığıdır. En önemli SEO etiketlerinden biridir.
- Meta Açıklama (`<meta name="description">`): Arama sonucunda başlığın altında görünen açıklamadır. Tıklama oranını (CTR) doğrudan etkiler.
- Başlık Etiketleri (`<h1>, <h2>` vb.): İçeriğinizin hiyerarşisini ve alt başlıklarını belirtir. `<h1>`, sayfanın ana başlığıdır ve her sayfada sadece bir tane olmalıdır.
- Resim Alt Metni (`<img title='HTML Nedir? Yeni Başlayanlar İçin Kapsamlı Temel Kodlama Rehberi' alt="...">`): Resmin ne hakkında olduğunu Google'a anlatır ve görsel aramalarda çıkmanızı sağlar.
- Semantik HTML5 Etiketleri: `<header>`, `<nav>`, `<main>`, `<article>`, `<footer>` gibi etiketler, sayfanızın farklı bölümlerinin ne işe yaradığını Google'a anlamsal olarak bildirir. Bu, sitenizin daha iyi anlaşılmasını ve sıralama almasını sağlar.
HTML Hakkında Sıkça Sorulan Sorular
HTML bir programlama dili midir?
Hayır. HTML, bir içeriğin yapısını ve anlamını tanımlayan bir "işaretleme dilidir". Programlama dilleri gibi mantıksal kararlar veremez veya dinamik işlemler yapamaz. İlgili işlevler için JavaScript gibi diller kullanılır.
2025'te hala HTML öğrenmek gerekli mi? WordPress gibi araçlar varken?
Evet, her zamankinden daha gerekli. WordPress gibi platformlar işi kolaylaştırsa da, eninde sonunda onlar da HTML kodları üretir. Sitenizde bir özelleştirme yapmak, bir sorunu çözmek veya SEO'nuzu bir üst seviyeye taşımak istediğinizde, temel HTML bilgisi size muazzam bir güç ve kontrol sağlar.
HTML ile HTML5 arasındaki fark nedir?
HTML5, HTML'in en son ve en güncel ana versiyonudur. Video ve ses oynatmak için standart etiketler (<video>, <audio>), daha iyi form kontrolleri ve <article>, <nav> gibi anlamsal etiketler gibi birçok modern özellik getirmiştir. Günümüzde "HTML" dendiğinde, genellikle HTML5 kastedilir.
Sadece HTML ile bir web sitesi yapabilir miyim?
Evet, yapabilirsiniz. Ancak bu site, 1990'lardaki gibi, stil ve interaktiviteden yoksun, sadece metin ve resimlerden oluşan statik bir sayfa olur. Modern ve işlevsel bir web sitesi tasarlamak için HTML (iskelet), CSS (görünüm) ve JavaScript (işlevsellik) üçlüsüne ihtiyacınız vardır.
HTML öğrenmek ne kadar sürer?
Temel etiketleri ve bir sayfanın yapısını öğrenmek, odaklanmış bir çalışma ile birkaç gün veya bir hafta sürebilir. HTML, öğrenme eğrisi en düşük ve en hızlı başlangıç yapılabilen web teknolojisidir.
HTML yazmak için özel bir programa ihtiyacım var mı?
Hayır. Teknik olarak, bilgisayarınızdaki basit Not Defteri (Notepad) ile bile HTML yazabilirsiniz. Ancak, Visual Studio Code, Sublime Text veya Atom gibi modern kod editörleri, kod renklendirme ve otomatik tamamlama gibi özellikleriyle işinizi çok daha kolaylaştırır.
Semantik HTML etiketleri neden SEO için önemlidir?
Çünkü Google'a sayfanızın yapısı hakkında net anlamsal ipuçları verirler. Her şeyi <div> etiketiyle yapmak yerine, sitenizin logosunun ve menüsünün olduğu yere <header>, ana içeriğe <main>, en alt kısma ise <footer> etiketi koymak, Google'ın sayfanızı bir insan gibi anlamasına yardımcı olur.
"Meta etiketi" (meta tag) nedir?
Meta etiketleri, <head> bölümünde yer alan ve sayfa hakkında ek bilgi (meta-data) sağlayan etiketlerdir. En bilinenleri, sayfa açıklamasını içeren `description` meta etiketi ve anahtar kelimeleri içeren (artık SEO için pek bir önemi kalmayan) `keywords` meta etiketidir.
<!DOCTYPE html> ne anlama geliyor ve neden gerekli?
Bu bir etiket değildir, bir "bildirimdir". Tarayıcıya, açmak üzere olduğu belgenin standart bir HTML5 belgesi olduğunu söyler. İlgili satır, her HTML dosyasının en başında yer almalıdır ve tarayıcının sayfayı doğru bir şekilde yorumlamasını sağlar.
HTML becerilerimi online olarak nerede pratik yapabilirim?
CodePen, JSFiddle gibi online kod editörleri, yazdığınız HTML, CSS ve JavaScript kodlarının sonucunu anında görmenizi sağlayan harika platformlardır. Ayrıca freeCodeCamp gibi siteler, interaktif derslerle pratik yapmanıza olanak tanır.
