section Öğesi ve div Karşılaştırması
section yerine yalın bir div kullanmanız gereken durumları öğrenin
section Öğesi ve div Karşılaştırması, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. 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.
Bölüm Öğesi
<section> öğesi, ilişkili içeriği tematik bir bölüm altında gruplar:
<section>
<h2>Contact Information</h2>
<p>Email: hello@example.com</p>
<p>Phone: (555) 555-0100</p>
</section>Bölüm Öğesi ve Kapsayıcı Öğesi
Temel soru şudur: Bu grubun adlandırılabilecek bir teması veya amacı var mı?
<section>— evet; tematik bir gruplamayı temsil eder ve bir başlığı olmalıdır<div>— hayır; yalnızca biçimlendirme veya betik çalıştırma amacıyla kullanılan bir kapsayıcıdır
Bölüm Öğesinin Bir Başlığı Olmalıdır
Her <section> öğesinin bir başlığı (<h2>-<h6>) olmalıdır:
<!-- Good: section with heading -->
<section>
<h2>Our Team</h2>
<ul>...</ul>
</section>
<!-- Bad: section without heading -->
<section class="hero"> <!-- should be a div -->
<img src="banner.jpg" alt="">
</section>Bölüm Öğesi Ne Zaman Kullanılır
<section> öğesini şu içerikler için kullanınız:
- Bir belgenin bölümleri
- Sihirbazdaki sekmeler veya adımlar
- Uzun bir makalenin bölümleri (Giriş, Yöntemler, Sonuçlar)
- Ana sayfadaki pazarlama bölümleri (Özellikler, Fiyatlandırma, Kullanıcı Görüşleri)
Kapsayıcı Öğesi Ne Zaman Kullanılır
Anlamsal bir anlam taşımadan yalnızca CSS veya JavaScript için bir kapsayıcıya ihtiyaç duyduğunuzda <div> kullanınız:
<div class="layout"> <!-- just a CSS grid container -->
<nav>...</nav>
<main>...</main>
</div>
<div id="modal"> <!-- a JavaScript-controlled modal -->
...
</div>Uzun Bir Makaledeki Bölümler
Bir makalenin içinde bölümler oluşturmak için bölüm öğelerini kullanınız:
<article>
<h1>Complete Guide to HTML5</h1>
<section>
<h2>Introduction</h2>
<p>HTML5 is the fifth version...</p>
</section>
<section>
<h2>Semantic Elements</h2>
<p>HTML5 introduced many semantic elements...</p>
</section>
<section>
<h2>Forms</h2>
<p>HTML5 greatly improved form handling...</p>
</section>
</article>Ana Sayfa Bölümleri
Bölümlerle yapılandırılmış ana sayfa:
<main>
<section id="hero">
<h2>Build Better Web Apps</h2>
<p>The platform for modern developers.</p>
</section>
<section id="features">
<h2>Key Features</h2>
...
</section>
<section id="pricing">
<h2>Pricing</h2>
...
</section>
</main>Bölüm Öğesi Başlık Bağlamı Oluşturur
Bölüm öğeleri, HTML5 belge ana hattı algoritmasında yeni başlık bağlamları oluşturur:
<section>
<h2>Chapter 1</h2> <!-- h2 within section context -->
<section>
<h3>Section 1.1</h3>
</section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->Bölümler İçin Başlık İlişkilendirme
Bir bölümü, ekran okuyucular için kendi başlığıyla ilişkilendiriniz:
<section aria-labelledby="features-heading">
<h2 id="features-heading">Features</h2>
<ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->Karar Akış Şeması
Hangi kapsayıcı öğesi kullanılmalıdır?
- Ana gezinme mi? →
<nav> - Birincil sayfa içeriği mi? →
<main> - Kendi içinde anlamlı içerik mi? →
<article> - Başlıklı tematik gruplama mı? →
<section> - Kenar çubuğu veya ilişkili içerik mi? →
<aside> - Yalnızca biçimlendirme kapsayıcısı mı? →
<div>
Başlıksız Bölüm Öğesi: Kapsayıcı Öğesi Kullanın
Bir bölüme başlık veremiyorsanız bunun yerine kapsayıcı öğesini kullanınız:
<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
<div class="column">Left content</div>
<div class="column">Right content</div>
</div>Hızlı Kontrol
Bölüm öğesi yerine ne zaman kapsayıcı öğesini tercih etmelisiniz?
Özet: Bölüm Öğesi ve Kapsayıcı Öğesi
Bölüm öğesi ve kapsayıcı öğesinin temel özellikleri:
<section>— tematik grup; bir başlığı olmalıdır<div>— biçimlendirme veya betik çalıştırma için kullanılan, anlamsal açıdan nötr kapsayıcı- Bölüm öğesi, ekran okuyucuların gezinebileceği adlandırılmış bir işaret bölgesi oluşturur
- Bölümü başlığıyla ilişkilendirmek için
aria-labelledbyekleyiniz - Kararsız kaldığınızda kapsayıcı öğesini kullanınız; daha sonra her zaman bölüm öğesine dönüştürebilirsiniz
Sıkça Sorulan Sorular
“section Öğesi ve div Karşılaştırması” dersi ücretsiz mi?
Evet — “section Öğesi ve div Karşılaştırması” 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.
“section Öğesi ve div Karşılaştırması” dersinde ne öğreneceğim?
section yerine yalın bir div kullanmanız gereken durumları öğ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 3. dersidir.
“section Öğesi ve div Karşılaştırması” 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
- header nav main ve footer
- article Öğesi: Kendi Başına Yeterli İçerik
- section Öğesi ve div Karşılaştırması
- time address ve mark