Web geliştirmenin temeli olan HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. Bir web sitesinin tarayıcıda düzgün görüntülenebilmesi için belirli bir temel yapıya sahip olması gerekir. Bu yapı genellikle bir index.html dosyası ile başlar.
Bu yazıda, basit bir HTML sayfasının yapısını inceleyecek ve ardından daha profesyonel bir sürümünü oluşturacağız.
1️⃣ Temel index.html Örneği
Görselde yer alan örnek HTML kodu aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
2️⃣ Kodun Detaylı Açıklaması
<!DOCTYPE html>
Bu ifade, belgenin HTML5 standardında olduğunu belirtir. Tarayıcıya, sayfanın modern HTML kurallarına göre işlenmesi gerektiğini söyler.
<html lang="en">
HTML belgesinin başlangıç etiketidir.lang="en" özelliği, sayfanın dilinin İngilizce olduğunu belirtir. SEO ve erişilebilirlik açısından önemlidir.
<head> Bölümü
Bu bölüm kullanıcıya görünmeyen ama tarayıcı ve arama motorları için önemli olan bilgileri içerir.
<meta charset="UTF-8">
Karakter kodlamasını belirtir.
UTF-8 kullanımı sayesinde Türkçe karakterler (ç, ğ, ş, ü vb.) sorunsuz görüntülenir.
<title>Page Title</title>
Tarayıcı sekmesinde görünen başlıktır.
SEO açısından en kritik etiketlerden biridir.
<body> Bölümü
Kullanıcının ekranda gördüğü tüm içerikler bu bölümde yer alır.
<h1>
Ana başlık etiketidir. SEO açısından sayfada bir adet bulunması önerilir.
<p>
Paragraf etiketidir. Metin içeriklerini düzenlemek için kullanılır.
3️⃣ Profesyonel ve Geliştirilmiş index.html Örneği
Şimdi bu basit yapıyı daha profesyonel bir hale getirelim. SEO uyumlu, mobil destekli ve temel stil içeren bir örnek hazırlayalım:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Modern ve SEO uyumlu örnek index.html sayfası">
<meta name="keywords" content="HTML, index.html, web geliştirme, örnek HTML sayfası">
<meta name="author" content="Adınız Soyadınız">
<title>Modern HTML Örnek Sayfa</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
}
header {
background-color: #222;
color: #fff;
padding: 20px;
}
main {
padding: 40px;
}
footer {
background-color: #222;
color: #fff;
padding: 15px;
margin-top: 40px;
}
</style>
</head>
<body>
<header>
<h1>Web Siteme Hoş Geldiniz</h1>
</header>
<main>
<h2>Modern HTML5 Yapısı</h2>
<p>
Bu sayfa, SEO uyumlu ve mobil destekli modern bir index.html örneğidir.
HTML5 semantik etiketleri kullanılarak hazırlanmıştır.
</p>
</main>
<footer>
<p>© 2026 Tüm Hakları Saklıdır</p>
</footer>
</body>
</html>
4️⃣ Profesyonel HTML Sayfasında Eklenen Yenilikler
✅ meta viewport
Mobil cihazlarda düzgün ölçekleme sağlar.
✅ meta description
Google arama sonuçlarında görünen açıklamadır.
✅ meta keywords
SEO açısından destekleyici anahtar kelimeler içerir.
✅ Semantik Etiketler
<header><main><footer>
Bu etiketler hem SEO hem de erişilebilirlik açısından önemlidir.
5️⃣ index.html Neden Önemlidir?
- Web sitesinin giriş sayfasıdır.
- Sunucular varsayılan olarak
index.htmldosyasını çalıştırır. - SEO ve kullanıcı deneyimi açısından kritik rol oynar.
- Web geliştirme öğrenirken ilk adımdır.
6️⃣ Sonuç
Basit bir “Hello World” HTML sayfası, web geliştirmenin temelidir. Ancak profesyonel bir web sitesi oluşturmak için:
- SEO meta etiketleri eklenmeli
- Mobil uyumluluk sağlanmalı
- Semantik HTML5 etiketleri kullanılmalı
- Temel stil düzenlemeleri yapılmalı
Doğru yapılandırılmış bir index.html dosyası, hem arama motorları hem de kullanıcı deneyimi açısından büyük fark yaratır.
