HTML Academy · Ders

span ve div Öğeleri

Biçimlendirme kancaları için genel satır içi ve blok kapsayıcıları kullanmayı öğrenin.

span ve div Öğeleri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Genel Amaçlı Kapsayıcılar

HTML'de anlamsal olarak nötr iki genel amaçlı kapsayıcı öğe bulunur:

<div> — blok düzeyinde kapsayıcı
<span> — satır içi kapsayıcı

Bu öğeler tek başlarına herhangi bir anlam taşımaz — yalnızca stillendirme ve betik yazma bağlantı noktaları olarak kullanılır.

div Öğesi

<div>, öncesinde ve sonrasında yeni bir satır oluşturan blok düzeyinde bir kapsayıcıdır:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

span Öğesi

<span>, metin içinde akışını sürdüren satır içi bir kapsayıcıdır:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

div Yerine Anlamsal Öğeler Ne Zaman Kullanılır

<div> kullanmadan önce anlamsal bir öğenin uygun olup olmadığını kontrol edin:

Sayfa üst bilgisi → <header>
Gezinme → <nav>
Ana içerik → <main>
Blog gönderisi → <article>
Kenar çubuğu → <aside>
Sayfa alt bilgisi → <footer>

Hiçbir anlamsal öğe uygun olmadığında <div> kullanın.

Div Aşırı Kullanımı

Div aşırı kullanımı — her şey için <div> kullanmak:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

class ve id ile CSS Bağlantı Noktaları

Hem <div> hem de <span>, CSS hedeflemesi için class veya id öznitelikleriyle kullanılır:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

JavaScript Hedeflemesi

<div> ve <span> aynı zamanda JavaScript hedefleridir:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

İç İçe Yerleştirme Kuralları

Genel amaçlı kapsayıcılar için iç içe yerleştirme kuralları:

<div>, <div> ve <span> içerebilir
<span> yalnızca <span> ve satır içi içerik içerebilir
<div> öğesini <span> içine yerleştirmeyin

<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

Yerleşim için div

div'leri kullanan yaygın yerleşim örüntüsü:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

Satır İçi Biçimlendirme için span

Yaygın satır içi biçimlendirme örüntüleri:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div ve span Görünmezdir

Varsayılan olarak <div> ve <span> görünmez kapsayıcılardır:

<div>, blok olarak görüntülenmesi dışında görsel stil eklemez
<span> hiçbir görsel stil eklemez
Tüm görünüm, uyguladığınız CSS'den kaynaklanır
Bu özellik onları ideal nötr kapsayıcılar hâline getirir

Hızlı Kontrol

Bir paragraf içindeki tek bir sözcüğü biçimlendirmek için hangi öğeyi kullanmalısınız?

Özet: span ve div

Genel amaçlı kapsayıcıların temel noktaları:

<div> — blok düzeyinde; öğeleri yerleşim amacıyla gruplandırır
<span> — satır içi; metin bölümlerini biçimlendirme için hedefler
Her ikisi de anlamsal olarak nötrdür — herhangi bir anlam eklemez
Uygun olduklarında anlamsal HTML5 öğelerini tercih edin
Bunları CSS ve JavaScript'e bağlamak için class ve id kullanın

Sıkça Sorulan Sorular

“span ve div Öğeleri” dersi ücretsiz mi?

Evet — “span ve div Öğeleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“span ve div Öğeleri” dersinde ne öğreneceğim?

Biçimlendirme kancaları için genel satır içi ve blok kapsayıcıları kullanmayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“span ve div Öğeleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön