HTML de head ve body ne işe yarar?

HTML ve elementleri web sayfasının yapısını oluşturan iki önemli bölümdür. elementi, tarayıcıya web sayfasının meta bilgilerini ve tarayıcı ayarlarını ileten bilgileri içerir. Bu bölümde yer alan önemli meta etiketleri arasında sayfa başlığı, karakter seti, CSS stilleri, JavaScript dosyaları gibi bilgiler bulunur. elementi ise web sayfasının içeriğini ve görünen kısmını içerir. Burada yer alan HTML elementleri, metinler, resimler, videolar, bağlantılar ve diğer tüm içerikler kullanıcıya görüntülenir. [SEO Blog | Blog Yazma İpuçları, SEO Stratejileri ve Daha Fazlası] 160 karakter kısıtlamasına bağlı olarak bu şekilde bir meta açıklama üretilebilir.


HTML de head ve body ne işe yarar?

HTML (HyperText Markup Language) web sayfalarını oluşturmak için kullanılan bir işaret dilidir. HTML içerisindeki <head> ve <body> etiketleri ise web sayfasının yapısını ve içeriğini belirlemeye yardımcı olan önemli bölümleridir.

<head>

<head> etiketi, web sayfasının başlık bilgilerini içeren bölümdür. Bir web tarayıcısı, web sayfalarını yüklerken bu bölümdeki bilgileri kullanır. Bu etiketin içerisine genellikle aşağıdaki elemanlar yerleştirilir:

  • <title>: Web sayfasının başlığını belirtir. Tarayıcı sekmesinde ve arama sonuçlarında görüntülenen başlık metnidir.
  • <meta>: Sayfa hakkında bilgiler içeren meta etiketleri eklenir. Örneğin, sayfanın karakter kodlaması, dil ayarı, açıklama ve anahtar kelimeler gibi.
  • <link>: Harici CSS dosyaları, favicon ve diğer dış kaynaklar için bağlantıları içerir.
  • <script>: JavaScript kodları ya da harici JavaScript dosyaları için referanslar bulunabilir.
  • <base>: Relatif URL'lerin çözümlenmesi için bir baz URL belirtir.

Yani, <head> içerisinde yer alan bilgiler, tarayıcılar tarafından sayfanın optimizasyonu, doğru görüntülenmesi ve arama motorlarının sayfayı anlaması için kullanılır.

<body>

<body> etiketi ise web sayfasının içeriğini tanımlayan bölümdür. Bu etiketin içinde yer alan öğeler, kullanıcıların tarayıcıda gördüğü ve etkileşimde bulunduğu bilgileri içerir. Örnek olarak:

  • <header>: Sayfanın başlık bölümünü belirtir.
  • <nav>: Sayfanın gezinme menüsünü içerir.
  • <main>: Sayfanın ana içeriğini oluşturan bölümdür.
  • <section>: Sayfanın bölümlerini tanımlayan etikettir.
  • <article>: Özgün ve bağımsız içeriklerin bulunduğu bölümü temsil eder.
  • <aside>: Ana içeriğin yanında bulunan reklamlar, yan bağlantılar ya da notlar gibi ek bilgileri içerir.
  • <footer>: Sayfanın alt kısmındaki bilgileri içerir.

Sonuç olarak, <head> etiketi web sayfasının tarayıcıya verilen bilgileri içerirken, <body> etiketi ise web sayfasının görünür ve etkileşimde bulunulabilir içeriklerini içerir. Her iki etiket de bir web sayfasının yapılandırılması ve düzgün bir şekilde çalışması için önemlidir.


Sıkça Sorulan Sorular

1. Head ve body etiketleri HTML'de neden kullanılır?

Head etiketi, HTML sayfalarında yer alan başlık bilgilerini içermektedir. Tarayıcılar, başlık bilgilerini kullanarak sayfanın başlığını ve diğer önemli meta verilerini (örneğin, dil kodu, stil dosyaları vb.) algılar.

Body etiketi ise, sayfanın içeriğini ve görüntülenecek herhangi bir metni, görüntüyü, videoları veya başka tüm öğeleri içerir. Sayfanın görünen kısmı body etiketinin arasında yer alır.

2. Head ve body etiketleri arasındaki fark nedir?

Head etiketi, sayfanın meta verilerini içerirken, body etiketi sayfanın içeriğini içerir.

3. Başlık bilgilerini neden head etiketi içerisine yazmalıyız?

Başlık bilgileri, arama motorları ve kullanıcılar için önemli metadır. Arama motorları, başlık bilgilerini sayfanın içeriği hakkında bilgi toplamak ve doğru sonuçları sunmak için kullanır. Başlık bilgileri ayrıca sayfa tarayıcı sekmesinde görünür.

4. Body etiketi içinde neler olabilir?

Body etiketi içinde metinler, resimler, videolar, bağlantılar ve diğer HTML öğeleri gibi birçok öğe bulunabilir. Kısacası, sayfanın görünen kısmı body etiketi içinde yer alır.

5. Head etiketi içinde neler olabilir?

Head etiketi içinde başlık etiketi (title), meta etiketi (örneğin, dil kodu veya stil dosyası), stil etiketi (CSS) ve script etiketi (JavaScript dosyaları) gibi başlık bilgilerini içeren öğeler yer alabilir.