Yükleniyor...

HTML Block ve Inline

Tablolardan sonra sayfa akışına bakın: her öğenin varsayılan bir display alışkanlığı vardır. İki aile: block ve inline.

Burada akış ne demek

Layout CSS’siz varsayılan paketleme. Paragraf block’tur; bağlantı cümlede inline kalır.

Doğrudan yanıt

Block: p, div, başlıklar, listeler, table. Inline: a, strong, em, span, code. Önce varsayılanları öğrenin.

📊 Common defaults

Category Examples Flow habit
Block p, div, h1–h6, ul, ol, section, table New line, full available width (typical)
Inline a, strong, em, span, code Continues inside the text line

Block kutular ve içinde inline

p kapsayıcıdır; a/strong satırda kalır. Sonraki div yeni blok açar.

Block paragraph with inline pieces

html
HTML Code 
<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

Paragraf örneğini okuma

  • p kutuyu sahiplenir
  • a ve strong satırda
  • alttaki div başka block

div versus span

div varsayılan block; span inline. Kısa ifadeler → span.

div versus span contrast

html
HTML Code 
<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

div/span örneği

  • span satırda
  • div kendi block satırında

CSS sonra display değiştirebilir

Override’ı görmek için varsayılanları ezberleyin.

Alıştırma

  1. İki p üst üste
  2. Bir paragrafta iki a
  3. span ile div karşılaştır
  4. strong zorla yeni satır olmasın
  5. Her kategoriden üç etiket yaz

Kolay hatalar

  • her küçük ifade için div
  • strong’tan yeni satır beklemek
  • CSS override’ı unutmak

Özet

  • Block ≈ yeni satır
  • Inline ≈ satır içinde
  • kısa kancalar için span
  • CSS sonra

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Html Ders