HTML Head Elementi
HTML’deki <head> elementi, bir web sayfasının başlık (head) kısmını temsil eder. Sayfanın içeriği ile ilgili meta bilgileri, başlıkları, stil tanımlarını, ve diğer bağlantıları içerir. Bu bilgiler, tarayıcıya sayfanın nasıl işleneceği ve görüntüleneceği hakkında talimatlar verir. Yani bu demektir ki, <head> kısmında kullanıcıya direkt gösterilmeyen ancak sayfanın performansını ve işlevselliğini etkileyen öğeler yer alır.
Head Elementinde Kullanılan Yaygın Etiketler ve Görevleri
<title>: Sayfanın başlığını belirtir. Bu başlık, tarayıcı sekmesinde görünür.<meta>: Sayfa hakkında meta bilgileri içerir. Örneğin, karakter seti, açıklama, anahtar kelimeler ve diğer tarayıcı bilgileri buraya eklenir.<link>: Harici dosyaları (CSS dosyaları gibi) bağlamak için kullanılır.<style>: Sayfa için dahili CSS tanımlamalarını içerir.<script>: Dahili veya harici JavaScript kodlarını ekler.<base>: Sayfanın temel URL’sini tanımlar.<noscript>: Tarayıcıda JavaScript kapalıysa alternatif içerik sağlar.
HTML <head> elementi, bir sayfanın performansı, erişilebilirliği ve SEO’su için hayati önem taşır. Yukarıdaki etiketleri aşağıdaki örneğe bakarak nasıl etkili bir şekilde kullanabileceğinizi öğrenebilirsiniz. Unutmayın, doğru kullanılan bir <head>, hem kullanıcı deneyimini hem de sayfanızın teknik performansını iyileştirir. Bakınız:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Sayfa başlığını belirler. Bu, tarayıcı sekmesinde görünür. -->
<title>Örnek HTML Head Elementi</title>
<!-- Sayfanın karakter setini tanımlar. Türkçe karakterler için UTF-8 kullanılır. -->
<meta charset="UTF-8">
<!-- Sayfanın açıklamasını belirtir. Arama motorları için önemlidir. -->
<meta name="description" content="Bu sayfa, HTML head elementi örneği ve açıklamalarını içerir.">
<!-- Sayfanın anahtar kelimelerini belirtir. SEO için kullanılabilir. -->
<meta name="keywords" content="HTML, head, meta, title, SEO">
<!-- Sayfanın yazarı hakkında bilgi verir. -->
<meta name="author" content="Ahmet Öğretmen">
<!-- Cihaz ekranı için ölçeklendirme yapar. Mobil uyumlu tasarım için önemlidir. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Harici bir CSS dosyasını bağlar. -->
<link rel="stylesheet" href="styles.css">
<!-- Dahili CSS tanımları. -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
</style>
<!-- JavaScript kodları için bir harici dosya bağlar. -->
<script src="script.js" defer></script>
<!-- Tarayıcıda JavaScript devre dışıysa gösterilecek içerik. -->
<noscript>
Lütfen bu sayfanın düzgün çalışması için tarayıcınızda JavaScript'i etkinleştirin.
</noscript>
</head>
<body>
<h1>HTML Head Elementi Örneği</h1>
<p>Bu sayfa, HTML'nin head elementinde kullanılan etiketleri açıklayan bir örnektir.</p>
</body>
</html>