Blok ve Satır İçi Elemanlar

Ders 21/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda blok ve satır içi elemanların farkını açıklayabilecek, div ve span etiketlerini doğru yerde kullanabileceksiniz.

İki davranış

Tarayıcı elemanları varsayılan olarak iki şekilde yerleştirir:

Blok elemanlar yeni bir satırda başlar ve bulunduğu alanın tüm genişliğini kaplar. Örnekler: p, h1, ul, div.
Satır içi elemanlar metnin akışı içinde kalır ve yalnızca içeriği kadar yer kaplar. Örnekler: a, strong, em, span.

Farkı görmek için aşağıda elemanlara arka plan rengi verdik. Bu style niteliğini CSS’e Köprü dersinde açıklayacağız.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blok ve satır içi</title>
</head>
<body>
  <p style="background-color: lightblue;">Ben bir paragrafım, tüm satırı kaplıyorum.</p>
  <p style="background-color: lightgreen;">Ben de öyle.</p>
  <p>Bu cümlenin içinde <strong style="background-color: yellow;">satır içi bir eleman</strong> var, satır bölünmedi.</p>
</body>
</html>

`div` ve `span`

Bu iki etiketin kendilerine ait bir anlamı yoktur. Yalnızca içeriği gruplamaya yararlar. Genellikle bu gruplara CSS uygulamak için kullanılırlar.

div Blok bir kutudur. Birkaç elemanı bir arada tutar.
span Satır içi bir kutudur. Bir metnin küçük bir parçasını işaretler.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Div ve span</title>
</head>
<body>
  <div style="background-color: lightgray;">
    <h2>Duyuru</h2>
    <p>Toplantı <span style="background-color: yellow;">cuma</span> günü yapılacak.</p>
  </div>
</body>
</html>

Uygun bir anlamlı etiket varsa onu kullanın. div ve span, başka uygun etiket olmadığında kullanılır.

İç içe yazma kuralları

Blok elemanlar genellikle başka blok ve satır içi elemanları içerebilir.
Satır içi elemanların içine p veya div gibi blok elemanlar yazılmaz. Önemli bir istisna a etiketidir: a bir bloğu sarabilir.
p etiketinin içine başka bir blok eleman yazılamaz. <p><div>...</div></p> yazarsanız tarayıcı paragrafı div başlamadan kapatır.

Sık yapılan hatalar

Her şeyi div ile yazmak. Başlık için h2, paragraf için p, liste için ul kullanın. Yalnızca div kullanılan bir sayfa ne ekran okuyucular ne de arama motorları için anlamlıdır.

p içine div yazmak. Tarayıcı bunu sessizce başka bir yapıya çevirir ve sayfanız beklediğiniz gibi görünmez.

Soru 1

Aşağıdakilerden hangisi varsayılan olarak satır içi bir elemandır?

h2 :: Başlıklar blok elemandır.
span :: Doğru.
div :: div blok elemandır.

Soru 2

Bir paragrafta tek bir kelimeyi gruplamak istiyorsunuz ve uygun bir anlamlı etiket yok. Hangisini kullanırsınız?

div :: div blok olduğu için satırı böler.
p :: Paragraf içine paragraf yazılamaz.
span :: Doğru.

Duyuru kutusu

Hedefteki sonucu elde edin. Yalnızca body içine yazılacak kodu yazın. Başlık ve paragraf bir div içinde olsun, cuma kelimesi span içine alınsın.

<div>
  <h2>Duyuru</h2>
  <p>Kulüp toplantısı <span>cuma</span> günü.</p>
</div>

Bu derste öğrendikleriniz

Blok elemanlar yeni satırda başlar, satır içi elemanlar metnin akışında kalır.
div ve span anlamı olmayan gruplama kutularıdır.
Uygun bir anlamlı etiket varsa div veya span yerine onu kullanın.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.