Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası
Anlamsız kapsayıcı div'leri anlamsal öğelerle değiştirin ve belge ana hattı algoritmasıyla başlık hiyerarşisini öğrenin.
Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Div Yığını — Sorun
Div yığını, tamamen <div> ve <span> öğelerinden oluşturulmuş bir sayfadır. Yapıyı anlatmak için sınıf adlarına ihtiyaç duyar, bu sınıflar olmadan ekran okuyucular tarafından anlaşılamaz ve arama motorlarına hiçbir anlam aktarmaz.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>Anlamsal Alternatif
Anlamsız div'leri, amacı bildiren anlamsal öğelerle değiştirin. Yapı artık kendini açıklar hâle gelir ve CSS olmadan da anlaşılır.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>Belge Anahat Algoritması
Başlık öğeleri (h1-h6) bir belge anahattı oluşturur. Ekran okuyucu kullanıcıları başlıklara göre gezinir. Yardımcı teknoloji anahat düzeyini duyurur. Hiyerarşiyi mantıklı tutun: sayfa başlığı için h1, ana bölümler için h2, alt bölümler için h3 kullanın.
<time> — Makinece Okunabilir Tarihler
<time> öğesi, makinece okunabilir bir datetime özniteliğiyle tarih ve saatleri işaretler. Arama motorları etkinlik tarihlerini anlar; ekran okuyucular biçimlendirilmiş tarihleri duyurabilir.
<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time><address>
<address> öğesi, en yakın makale veya belgeye ait iletişim bilgilerini kapsar. Bunun posta adresi olması gerekmez; e-posta, telefon ve sosyal medya kullanıcı adları da buna dahildir.
<address>
<a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
<a href="https://twitter.com/coddykit">@coddykit</a>
</address><figure> ve <figcaption>
<figure>, resimler, grafikler, kod örnekleri veya videolar gibi kendi içinde bütünlüklü içerikleri kapsar. <figcaption>, şekille anlamsal olarak ilişkilendirilmiş bir açıklama sağlar.
<figure>
<img src="chart.png" alt="Monthly active users 2025">
<figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure><blockquote> ve <cite>
<blockquote>, uzun bir alıntıyı işaretler. Kaynak adresi için cite özniteliğini kullanın. <cite> öğesi, yaratıcı bir çalışmanın (kitap, makale veya film) başlığını işaretler.
<blockquote cite="https://developer.mozilla.org">
<p>HTML is the standard markup language for creating web pages.</p>
<footer>—<cite>MDN Web Docs</cite></footer>
</blockquote><details> ve <summary>
<details> + <summary> ikilisi, JavaScript olmadan yerleşik bir açılır-kapanır bileşen oluşturur. Tarayıcı açma-kapama işlemini, klavye etkileşimini ve erişilebilirliği otomatik olarak yönetir.
<details>
<summary>What is the refund policy?</summary>
<p>We offer a 30-day money-back guarantee on all plans.</p>
</details><mark> — Vurgulanmış Metin
<mark>, bir arama sonucu eşleşmesi gibi başvuru amacıyla vurgulanan metni temsil eder. Metni CSS ile sarıya boyamaktan anlamsal olarak farklıdır.
<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p><abbr> — Kısaltmalar
Kısaltmaları ve akronimleri <abbr> ile sarın ve tam terimi title özniteliğinde sağlayın. Ekran okuyucular ve tarayıcılar, imleç üzerine getirildiğinde açılımı kullanıcılara sunar.
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr><div> ve <span> Ne Zaman Kullanılır?
Her ikisi de hâlâ kullanışlıdır. <div>, anlamsal bir anlamı olmayan genel bir blok kapsayıcısı için doğru seçimdir; buna yerleşim kapsayıcıları ve React'teki bileşen kökleri dahildir. <span> ise anlamsal anlamı olmayan satır içi stillendirme kancaları için kullanılır.
Kısa Kontrol
JavaScript gerektirmeden yerel, daraltılabilir bir açılır-kapanır bileşen oluşturan HTML öğesi hangisidir?
Özet: Anlamsal HTML5
Div yığınını anlamsal öğelerle değiştirin: üst bilgi, gezinme, ana içerik, makale, bölüm, ek içerik ve alt bilgi. Tarihler için time, medya için figure/figcaption, açılır-kapanır bileşenler için details/summary, vurgular için mark kullanın. div ve span öğelerini anlamsal anlamı olmayan yerleşim kapsayıcılarıyla sınırlı tutun.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası” dersi ücretsiz mi?
Evet — “Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası” dersinde ne öğreneceğim?
Anlamsız kapsayıcı div'leri anlamsal öğelerle değiştirin ve belge ana hattı algoritmasıyla başlık hiyerarşisini öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Form Denetimleri: input türleri, select, textarea
- ARIA ve Erişilebilirlik: label role aria-*
- Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası
- Form Doğrulama Öznitelikleri