- Konu sahibi
- #1
HTML’de
Aşağıdaki örnekte
Bu yapıda
Karar verirken her öğeyi şu soruyla sınıflandırmak yeterlidir: “Bu bilgi ziyaretçinin sayfa içeriği olarak okuyacağı veya kullanacağı bir şey mi?” Yanıt evetse genellikle
<body> etiketi, belgenin kullanıcıya sunulan asıl içeriğini ve bu içeriği destekleyen belge içi öğeleri taşıyan ana bölümdür. Başlıklar, paragraflar, bağlantılar, görseller, formlar ve sayfada kullanılan birçok etkileşimli öğe <body> içinde yer alır. <head> ise sayfanın kendisi olarak gösterilmeyen başlık, karakter kodlaması, stil ve benzeri belge bilgilerini içerir.<html> kök öğedir; <head> ve <body> onun iki temel bölümüdür. Bu nedenle <body> tek başına belgenin kökü değildir ve <head> içine konulmaz. Tarayıcı, bu yapıya göre hangi içeriğin belge bilgisi, hangisinin sayfada sunulacak ana içerik olduğunu belirler.Belge içindeki yapısal rolü
<body> etiketini yalnızca “ekranda görünen her şeyin kutusu” olarak düşünmek eksik olur. Sayfanın ana yapısı burada kurulur. Örneğin <header>, <nav>, <main>, <section>, <article> ve <footer> gibi anlamsal bölümler çoğunlukla <body> altında bulunur.<head> içindeki <title> tarayıcı sekmesinde görülen belge başlığını belirler; bu, sayfanın gövdesindeki bir <h1> başlığıyla aynı şey değildir. <body> içindeki <h1> ise sayfanın içerik başlıkları arasındaki ana başlığı ifade eder. Bir sayfanın erişilebilir ve anlaşılır olması için bu iki rolü birbirine karıştırmamak gerekir.Somut yapı örneği
Aşağıdaki örnekte
<head> belge hakkında bilgi verirken, <body> ziyaretçinin okuyacağı ve kullanacağı içeriği taşır:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Ürün tanıtımı</title>
</head>
<body>
<header>
<h1>Ürün tanıtımı</h1>
</header>
<main>
<p>Ürünün temel özellikleri burada açıklanır.</p>
<a href="/iletisim">İletişime geçin</a>
</main>
</body>
</html>Bu yapıda
<title> sayfanın ana içerik alanında görünmez; <h1>, paragraf ve bağlantı ise <body> içindeki içerik olarak sunulur. Tarayıcıda beklenen sonuç, başlık ve açıklama metninin sayfa alanında görünmesi, bağlantı metninin de görüntülenmesidir. Örnekteki /iletisim temsilî bir yoldur; bağlantının hedefi ancak kendi sitenizde o yol varsa açılır. İçerik gövdede görünmüyorsa öncelikle öğenin yanlışlıkla <head> içine alınıp alınmadığını ve etiketlerin doğru kapanıp kapanmadığını kontrol edin.Head, body ve html farkı
Karar verirken her öğeyi şu soruyla sınıflandırmak yeterlidir: “Bu bilgi ziyaretçinin sayfa içeriği olarak okuyacağı veya kullanacağı bir şey mi?” Yanıt evetse genellikle
<body> altındaki uygun anlamsal öğe seçilir. Belgenin nasıl tanımlanacağını veya kaynakların nasıl yükleneceğini açıklıyorsa <head> bölümüne aittir.| Öğe | Yapısal görevi | Tipik içerik |
|---|---|---|
<html> | Tüm HTML belgesinin kökü | <head> ve <body> |
<head> | Belge hakkında bilgi ve kaynak tanımları | <title>, <meta>, stil ve benzeri tanımlar |
<body> | Belgenin ana sunum ve etkileşim alanı | Metin, gezinme, form, görsel ve anlamsal bölümler |
Sık yapılan hatalar
- Sayfada gösterilecek paragrafı veya başlığı
<head>içine koymak. Bu, içerik ile belge bilgisinin görevlerini karıştırır. - Bir belgenin içine birden fazla bağımsız
<body>koymak. Belgenin tek bir ana gövdesi olmalı; farklı içerik alanları bunun altında<main>,<section>veya<article>ile ayrılmalıdır. - Her şeyi doğrudan
<body>altına yığmak. İçerik büyüdükçe anlamsal bölümler kullanmak, yapı ve erişilebilirlik açısından daha anlaşılırdır. <body>etiketini yalnızca görsel tasarım için kullanmak. Renk, boşluk ve yerleşim CSS’nin; içerik hiyerarşisi ise HTML’nin sorumluluğudur.
