- Konu sahibi
- #1
HTML
Head bir sayfa üst şeridi değildir. Adı benzeyen
Bir HTML belgesinde tek head bölümü bulunur. Metadata öğeleri tarayıcıya belgenin nasıl yorumlanacağını ve hangi kaynaklarla ilişkili olduğunu bildirir. Örneğin UTF-8 karakter kodlaması Türkçe metnin doğru yorumlanmasına yardımcı olur; viewport ayarı mobil tarayıcıya görünüm alanını bildirir. Viewport tek başına sayfanın bütün yerleşimini duyarlı hâle getirmez; CSS düzeni de buna uygun olmalıdır.
Stylesheet bağlantısı, sayfaya uygulanacak CSS dosyasını işaret eder. Script öğesi ise JavaScript kaynağını bağlayabilir. Bir öğenin head içinde bulunması, onun etkisinin görünmeyeceği anlamına gelmez: CSS body görünümünü değiştirebilir, title sekmede görünür ve betikler belgeyi değiştirebilir.
Aşağıdaki dosya, head ile body sınırını birlikte gösterir:
Örnekteki CSS ve JavaScript dosyaları ayrıca oluşturulmuş olmalıdır. Dosyalarınız henüz yoksa bu iki bağlantıyı çıkarabilirsiniz; HTML içeriğini görmek için zorunlu değillerdir. Klasör yolları HTML dosyasının konumuna göre çözümlenir.
Harici klasik betikteki
Tablo, yalnız başlık ve açıklama eklemekten daha geniş olan belge düzenini gösterir. Head içindeki her öğenin farklı görevi vardır; görünür metni buraya doldurmak veya aynı ayarı çelişen biçimde tekrar etmek yerine amaçlanan öğeyi seçin.
Head ile header'ı karıştırmak, görünür paragrafları head içine yazmak ve kopyalanan şablonlardan birden fazla head üretmek belgeyi sorunlu hâle getirir. Tarayıcı hatalı yapıyı düzeltmeye çalışabilir; sayfanın açılması kaynağın geçerli olduğunu kanıtlamaz. Kaynak metin ile geliştirici araçlarındaki güncel DOM'u karşılaştırın ve gerektiğinde bir HTML doğrulayıcısı kullanın.
Hayır. Head içeriği sayfa kaynağından görülebilir. API sırları, parolalar veya kullanıcıya özel gizli veriler burada tutulmamalıdır. Normal sayfa içinde görünmemek, verinin ziyaretçiden saklandığı anlamına gelmez.
Tek başına yetmeyebilir. Dosyanın gerçek kodlaması, sunucunun içerik türü/kodlama başlığı ve veritabanından gelen metin de uyumlu olmalıdır. Bozulmuş metni yalnız bu etiketi ekleyerek eski hâline getiremezsiniz; sorunun üretildiği katmanı belirleyin.
<head> etiketi, belgenin tarayıcı ve diğer yazılımlar tarafından işlenen metadata bölümünü kapsar. Sayfa başlığı, karakter kodlaması, görünüm alanı ayarı, stil dosyası bağlantıları ve bazı betikler burada tanımlanabilir. Kullanıcının sayfanın içinde okuduğu başlık, paragraf ve menü gibi içerikler ise normalde <body> bölümüne yazılır.Head bir sayfa üst şeridi değildir. Adı benzeyen
<header>, body içindeki görünür giriş veya başlık alanını ifade edebilir. Ayrıca <h1> içerik başlığıdır; <title> ise sekmede görülebilen belge adıdır. Bu ayrım, doğru içeriği doğru bölüme yerleştirmeyi kolaylaştırır.Head içinde neler bulunur?
Bir HTML belgesinde tek head bölümü bulunur. Metadata öğeleri tarayıcıya belgenin nasıl yorumlanacağını ve hangi kaynaklarla ilişkili olduğunu bildirir. Örneğin UTF-8 karakter kodlaması Türkçe metnin doğru yorumlanmasına yardımcı olur; viewport ayarı mobil tarayıcıya görünüm alanını bildirir. Viewport tek başına sayfanın bütün yerleşimini duyarlı hâle getirmez; CSS düzeni de buna uygun olmalıdır.
Stylesheet bağlantısı, sayfaya uygulanacak CSS dosyasını işaret eder. Script öğesi ise JavaScript kaynağını bağlayabilir. Bir öğenin head içinde bulunması, onun etkisinin görünmeyeceği anlamına gelmez: CSS body görünümünü değiştirebilir, title sekmede görünür ve betikler belgeyi değiştirebilir.
Tam belge örneği
Aşağıdaki dosya, head ile body sınırını birlikte gösterir:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>İletişim | Örnek Site</title>
<link rel="stylesheet" href="assets/site.css">
<script src="assets/app.js" defer></script>
</head>
<body>
<header>
<h1>İletişim</h1>
</header>
<main>
<p>İletişim bilgileri bu alanda yer alır.</p>
</main>
</body>
</html>Örnekteki CSS ve JavaScript dosyaları ayrıca oluşturulmuş olmalıdır. Dosyalarınız henüz yoksa bu iki bağlantıyı çıkarabilirsiniz; HTML içeriğini görmek için zorunlu değillerdir. Klasör yolları HTML dosyasının konumuna göre çözümlenir.
Harici klasik betikteki
defer, betiğin belge ayrıştırıldıktan sonra çalışmasını sağlar; bütün görsellerin yüklenmesini bekleme anlamına gelmez. Satır içi betikte aynı etkiyi sağlamaz. Betik yükleme seçeneklerini birbirine karıştırmadan, uygulamanın belge yapısına ne zaman ihtiyaç duyduğunu belirleyin.Göreve göre öğe seçimi
| İhtiyaç | Öğe veya ayar | Beklenen etki |
|---|---|---|
| Belgeye isim vermek | title | Sekme/yer imi için belge adı |
| Karakter kodlamasını bildirmek | meta charset | Metnin doğru kodlamayla yorumlanması |
| Harici CSS bağlamak | link rel=stylesheet | Stil dosyasının uygulanması |
| Görünür içerik başlığı | body içinde h1 | Sayfa içindeki ana başlık |
Tablo, yalnız başlık ve açıklama eklemekten daha geniş olan belge düzenini gösterir. Head içindeki her öğenin farklı görevi vardır; görünür metni buraya doldurmak veya aynı ayarı çelişen biçimde tekrar etmek yerine amaçlanan öğeyi seçin.
Uygulama ve kontrol sırası
- Mevcut HTML belgesinde html, head ve body sınırlarını bulun. Şablon sistemi kullanıyorsanız head'i hangi ortak dosyanın ürettiğini belirleyin.
- Karakter kodlamasını başta tanımlayın ve dosyanın gerçekten aynı kodlamayla kaydedildiğini kontrol edin.
- Belgeye özgü bir title ekleyin; görünür ana başlığı ayrıca body içinde oluşturun.
- CSS ve JavaScript yollarının gerçek dosyalara gittiğini kontrol edin. Tarayıcının Network bölümündeki başarısız istekleri görünüm sorunundan ayırın.
- Kaydettikten sonra sekme adını, Türkçe karakterleri, mobil görünümü ve bağlı dosyaların sonucunu ayrı ayrı inceleyin.
Sık yapılan hatalar
Head ile header'ı karıştırmak, görünür paragrafları head içine yazmak ve kopyalanan şablonlardan birden fazla head üretmek belgeyi sorunlu hâle getirir. Tarayıcı hatalı yapıyı düzeltmeye çalışabilir; sayfanın açılması kaynağın geçerli olduğunu kanıtlamaz. Kaynak metin ile geliştirici araçlarındaki güncel DOM'u karşılaştırın ve gerektiğinde bir HTML doğrulayıcısı kullanın.
Sık sorulan sorular
Head içindeki metin gizli bilgi saklamak için kullanılabilir mi?
Hayır. Head içeriği sayfa kaynağından görülebilir. API sırları, parolalar veya kullanıcıya özel gizli veriler burada tutulmamalıdır. Normal sayfa içinde görünmemek, verinin ziyaretçiden saklandığı anlamına gelmez.
Meta charset eklemek her Türkçe karakter sorununu düzeltir mi?
Tek başına yetmeyebilir. Dosyanın gerçek kodlaması, sunucunun içerik türü/kodlama başlığı ve veritabanından gelen metin de uyumlu olmalıdır. Bozulmuş metni yalnız bu etiketi ekleyerek eski hâline getiremezsiniz; sorunun üretildiği katmanı belirleyin.
