<head> etiketi, sayfa ile ilgili bilgileri tutar. Kod içerisinde ise, <html> etiketi ile <body> etiketinin arasında bulunur.
<head> etiketi HTML dokümanı ile ilgili bilgileri tutar ama bu bilgiler sayfada görüntülenmez.
Bu bilgiler genelde, sayfanın başlığı, içerisinde kullanılacak olan CSS stilleri, JavaScript kodları ve buna benzer bilgilerdir.
Bu bilgilerin tamamına da HTML'de metadata denir.
<title> etiketi, sayfanın başlığını tutar ve tüm HTML sayfalarında zorunludur.
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<p>Title etiketindeki yazı, tarayıcı sekmesinde en üstte, favorilere eklendiğinde sayfa adı olarak ve arama sonuçlarında görünür.</p>
</body>
</html>
<style> etiketi içerisine sadece o sayfa için geçerli olacak olan CSS ifadeleri yazılır.
<head>
<title>Sayfa Başlığı</title>
<style>
p {color: pink;}
h2 {color: blue;}
</style>
</head>
<link> etiketi, harici olarak tutulan stil dosyalarına link vermek için kullanılır. <style> etiketinden farklı olarak bu harici dosyaları birden fazla HTML sayfasında çağırarak kullanabilirsiniz.
<head>
<title>Sayfa Başlığı</title>
<link rel="stylesheet" href="stil.css">
</head>
<meta> etiketi, HTML sayfası içerisinde hangi karakter setinin kullanılacağı ya da sayfanın yazarı, anahtar kelimeleri gibi bilgileri tutar.
Bu bilgiler SEO açısından önemlidir ve arama motorları tarafından, tarayıcılar tarafından kullanılırlar.
HTML sayfasında kullanılacak karakter setini belirlemek için:
HTML sayfasına bir açıklama eklemek için:
HTML sayfasına SEO ve arama motorları için anahtar kelimeler eklemek için:
HTML sayfasının yazarını belirtmek için:
HTML sayfasını istediğiniz zaman aralığında bir yenilemek için:
<meta> etiketinin kullanım örneği:
<head>
<meta charset="UTF-8">
<meta name="description" content="Teknoloji sorunlarınıza uzmanlarından çözümler">
<meta name="keywords" content="teknoloji,bilgisayar,telefon,modem">
<meta name="author" content="Ali Pak">
</head>
HMTL5 ile beraber, artık web programlayıcıları sayfanın nasıl görüneceğini (viewport) <meta> etiketi sayesinde belirleyebiliyorlar.
Viewport, kullanıcının sayfayı nasıl gördüğünü temsil eder. Cihazdan cihaza değişir ve sayfa bilgisayar ekranında büyük, telefon gibi cihazlarda ise daha küçük görüntülenir.
<meta> etiketini tüm web sayfalarına ayrı ayrı eklemeniz gerekmektedir.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport, web tarayıcısına sayfayı nasıl görüntülemesi, boyutlandırması gerektiği hakkında bilgi verir.
<script> etiketi, kullanıcı tarafına yazdığımız JavaScript kodlarının tutulduğu etikettir.
<head>
<title>Sayfa Başlığı</title>
<script>
function denemeFonksiyonu() {
document.getElementById("demo").innerHTML = "Yazı Değiştirme Örneği";
}
</script>
</head>
<base> etiketi, bulunduğu HTML sayfasında, varsayılan olarak eklenecek olan resimleri, dokümanları, dosyaları hangi klasörde arayacağını belirler.
HTML5 standartlarına göre, artık bir HTML sayfasında <html> etiketi, <head> etiketi, <body> etiketi yazılması zorunlu değil. Bu etiketleri kullanmasanız bile, oluşturduğunuz sayfa, HTML5 sayfası olarak kabul edilecektir.
<!DOCTYPE html>
<title>Sayfa Başlığı</title>
<p>Bu bir paragraftır.</p>
<h3>Bu bir başlıktır.</h3>