Temel HTML yapısı, dijital dünyadaki her bir web sayfasının üzerine inşa edildiği, tarayıcıların içeriği anlamlandırmasını sağlayan evrensel bir iskelettir. İnternet üzerinde gördüğünüz en karmaşık sosyal medya platformlarından en basit kişisel bloglara kadar her yapı, HTML (HyperText Markup Language) adı verilen bu işaretleme dilinin sunduğu temel hiyerarşi ve standartlar sayesinde ayakta durur. Bir binanın kolonları ve kirişleri ne kadar önemliyse, bir web sayfasının kodlanmasında da HTML yapısı o kadar hayati bir öneme sahiptir.
- HTML Bileşenleri: Web sayfasının temel yapı taşlarını ve bu taşların görevlerini tanımlayabileceksiniz.
- Hiyerarşik Düzen: Doctype, head ve body bölümleri arasındaki ilişkiyi kavrayacaksınız.
- Standart Yazım Kuralları: HTML5 standartlarına uygun, temiz ve hatasız kod yazma disiplini edineceksiniz.
- İçerik Yerleşimi: Başlıklar, paragraflar ve listeler gibi temel öğeleri sayfa iskeletine doğru şekilde yerleştirebileceksiniz.
- HTML bir programlama dili değil, bir işaretleme dilidir.
- Her HTML dosyası mutlaka
.htmlveya.htmuzantısıyla kaydedilmelidir. - Tarayıcılar (Chrome, Firefox, Safari) HTML kodlarını okuyarak bize görsel bir sayfa sunar.
- İskelet ne kadar sağlam olursa, CSS (tasarım) ve JavaScript (işlevsellik) o kadar kolay uygulanır.
Web Sayfasının Temel İskeleti: HTML Nedir?
HTML, “Zengin Metin İşaretleme Dili” anlamına gelir ve web sayfalarının içeriğini organize etmek için kullanılır. Bir web sitesini bir insan vücuduna benzetecek olursak; HTML kemik yapısını (iskeleti), CSS dış görünüşü (kıyafet, saç rengi) ve JavaScript ise hareketleri (yürümek, konuşmak) temsil eder. İskelet olmadan vücudun diğer parçalarının bir arada durması imkansızdır. Bu nedenle, web geliştirmeye başlayan herkesin ilk durağı HTML yapısını eksiksiz öğrenmektir.
HTML etiketlerden (tags) oluşur. Etiketler genellikle bir açılış <etiket> ve bir kapanış </etiket> çiftinden meydana gelir. Bu etiketlerin arasına yazılan içerik, tarayıcı tarafından o etiketin özelliğine göre işlenir. Örneğin, bir metni paragraf olarak tanımlamak istiyorsanız onu <p> etiketleri arasına almalısınız. Bu basit ama güçlü mantık, internetin devasa bilgi ağını düzenli bir şekilde sunmamıza olanak tanır.
Standart Bir HTML Dosyasının Anatomisi
Modern bir web sayfası oluştururken uyulması gereken belirli bir yapısal düzen vardır. Bu düzen, tarayıcıların sayfayı hızlı ve hatasız yüklemesini sağlar. HTML5 ile birlikte standartlaşan bu iskelet, birkaç ana bölümden oluşur. Her bölümün kendine has bir görevi ve barındırdığı özel alt etiketler bulunur.
| Bölüm / Etiket | Görevi | Örnek Kullanım |
|---|---|---|
| !DOCTYPE html | Belge tipini tanımlar. | <!DOCTYPE html> |
| html | Tüm içeriğin ana kapsayıcısıdır. | <html lang=’tr’> |
| head | Sayfa hakkındaki teknik bilgileri (metadata) tutar. | <head>…</head> |
| body | Kullanıcının gördüğü tüm içerikleri barındırır. | <body>…</body> |
1. DOCTYPE Deklarasyonu
Her HTML belgesinin en üstünde yer alan <!DOCTYPE html> ifadesi, aslında teknik olarak bir HTML etiketi değildir. Bu, tarayıcıya “Dikkat! Bu belge modern HTML5 standartlarına göre yazılmıştır” diyen bir bildirimdir. Bu bildirim sayesinde tarayıcılar sayfayı “quirks mode” (eski uyumluluk modu) yerine “standart mod” ile açar, bu da tasarım hatalarının önüne geçer.
2. HTML Kök Etiketi
Tüm web sayfası içeriği <html> ve </html> etiketleri arasına yazılır. Bu etiket, sayfanın başlangıcını ve bitişini belirler. Genellikle bu etikete lang="tr" gibi bir öznitelik (attribute) eklenerek sayfanın ana dili belirtilir. Bu, arama motorlarının (SEO) ve ekran okuyucu cihazların sayfayı daha iyi anlamasına yardımcı olur.
<html lang="tr"> kullanarak dil belirtmeyi alışkanlık haline getirin. Bu, erişilebilirlik ve arama motoru optimizasyonu için çok kritiktir.Head Bölümü: Sayfanın Görünmez Beyni
<head> bölümü, web sayfasının tarayıcı penceresinde doğrudan görünmeyen ancak sayfanın çalışması için gerekli olan tüm bilgileri içeren kısımdır. Burası sayfanın “ayarlar menüsü” gibidir. Kullanıcılar buradaki kodları görmez ama buradaki ayarlar kullanıcı deneyimini doğrudan etkiler.
Bu bölümde en sık kullanılan etiketler arasında <title> (sayfa başlığı), <meta> (karakter seti, açıklama, anahtar kelimeler) ve <link> (CSS dosyalarını bağlama) bulunur. Özellikle <meta charset="UTF-8"> etiketi, Türkçe karakterlerin (ğ, ü, ş, ı, ö, ç) doğru görüntülenmesi için mutlaka eklenmelidir.
<head> bölümüne eklediğiniz bir metin, web sayfasının içinde görüntülenmez. Eğer yazdığınız metnin sayfada görünmesini istiyorsanız, onu mutlaka <body> bölümüne yazmalısınız.Başlık ve Meta Etiketlerinin Önemi
Sayfanızın Google gibi arama motorlarında nasıl görüneceğini <head> içindeki bilgiler belirler. <title> etiketi, tarayıcı sekmesinde yazan metindir. Aynı zamanda Google arama sonuçlarında mavi link olarak karşımıza çıkan başlık da budur. Meta açıklamaları ise kullanıcıların sitenize tıklamadan önce okuduğu kısa özetlerdir. Doğru bir iskelet kurulumunda bu alanların boş bırakılmaması gerekir.
Body Bölümü: İçeriğin Sergilendiği Alan
Kullanıcıların bir web sitesine girdiğinde etkileşime girdiği her şey <body> etiketleri arasındadır. Metinler, görseller, videolar, butonlar ve formlar bu bölüme yerleştirilir. Body bölümü, sayfanın görsel dünyasını oluşturur ve içerik hiyerarşisi burada başlar.
İyi bir iskelet yapısında body içindeki içerikler rastgele değil, belirli bir mantıkla sıralanmalıdır. Örneğin, bir sayfanın en önemli başlığı için <h1>, alt başlıklar için <h2> ve <h3> etiketleri kullanılır. Paragraflar <p> etiketleri ile ayrılır. Bu hiyerarşi, hem okuyucunun konuyu anlamasını kolaylaştırır hem de arama motoru botlarının sayfayı taramasını sağlar.
<!DOCTYPE html>
<html lang=’tr’>
<head>
<meta charset=’UTF-8′>
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Ders Merkezi’ne Hoş Geldiniz!</h1>
<p>Bu benim ilk HTML iskeletim.</p>
</body>
</html>
Etiketlerin Doğru Kullanımı ve Yuvalama (Nesting)
HTML yapısında etiketlerin birbirinin içine nasıl yerleştirildiği çok önemlidir. Buna “yuvalama” veya “nesting” denir. Kural basittir: En son açılan etiket, en önce kapatılmalıdır. Eğer bir kalın metni (<strong>) bir paragrafın (<p>) içine yazıyorsanız, önce kalın metin etiketini kapatmalı, sonra paragraf etiketini kapatmalısınız.
Yanlış yuvalama, tarayıcıların sayfayı hatalı yorumlamasına ve tasarımın bozulmasına neden olabilir. Modern kod editörleri bu konuda geliştiricilere yardımcı olsa da, mantığı kavramak temiz kod yazmanın anahtarıdır. Kodlarınızı yazarken her zaman girintileme (indentation) kullanmak, hangi etiketin nerede başlayıp nerede bittiğini görmenizi sağlar.
Semantik HTML: Anlamlı İskelet Kurma
Sadece <div> etiketlerini kullanarak da bir web sayfası yapabilirsiniz, ancak bu modern web standartlarına uygun değildir. HTML5 ile hayatımıza giren “Semantik Etiketler”, sayfanın bölümlerine isim vererek anlam kazandırır. Örneğin, sayfanın üst kısmı için <header>, ana içerik için <main>, yan menü için <aside> ve alt kısım için <footer> kullanılır.
Semantik HTML kullanmak, bir kitabın içindekiler kısmını oluşturmak gibidir. Hem arama motorları hem de ekran okuyucu kullanan görme engelli bireyler, bu etiketler sayesinde sayfanın hangi kısmının ne işe yaradığını kolayca anlar. Bu yüzden iskeletinizi kurarken sadece görselliğe değil, anlamlı yapıya da odaklanmalısınız.
Öğrendiklerinizi Pekiştirin
Temel HTML yapısını öğrenmek, web geliştirme yolculuğunuzun en sağlam adımıdır. Bu iskeletin nasıl çalıştığını anladıktan sonra, CSS ile bu iskelete renk katabilir ve JavaScript ile ona can verebilirsiniz. Pratik yapmak için kendi bilgisayarınızda bir not defteri açıp yukarıdaki örnek kodu yazmayı ve index.html olarak kaydedip tarayıcınızda açmayı deneyin.
- HTML belgesinin en başında kullanılan
<!DOCTYPE html>ifadesinin temel amacı nedir? - Bir web sayfasında kullanıcının gördüğü içerikler hangi iki ana etiket arasına yazılır?
- Türkçe karakterlerin doğru görünmesi için
<head>bölümüne hangi meta etiketi eklenmelidir? <title>etiketi ile<h1>etiketi arasındaki fark nedir?
- HTML: Web sayfalarının iskeletini oluşturan işaretleme dilidir.
- Temel Yapı: Doctype, html, head ve body bölümlerinden oluşur.
- Head: Sayfanın metadata ve teknik ayarlarını barındırır.
- Body: Görsel tüm içeriklerin (metin, resim vb.) bulunduğu alandır.
- Standartlar: HTML5 kurallarına ve semantik yapıya uygun kod yazmak SEO ve erişilebilirlik için şarttır.
