Yükleniyor...
HTML Anlamsal Öğeler
div ve class/id sonrası anlamsal bölgeler anlamla adlandırılır.
Kutulardan önce anlam
CSS her etiketi stiller; anlamsallık niyeti belgeler.
Doğrudan yanıt
Anlam uyuyorsa landmarks. Bir main. Tüm siteyi tek article’a sarmayın.
📊 Core landmarks
| Element | Typical meaning |
|---|---|
| header | Introductory or banner content for a page or section |
| nav | Major navigation links |
| main | Dominant unique content of this page |
| article | Independent composition (post, story, card that could stand alone) |
| section | Thematic grouping, usually with a heading |
| aside | Side note related to the surrounding content |
| footer | Closing content for a page or section |
Basit iskelet
Üst bilgi ve bağlantılar, benzersiz içerik main’de, footer kapanışta.
Simple semantic skeleton
html
HTML Code
<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>İskeleti okuyun
- header çoğu zaman nav ile
- bir main
- footer kapatır
article, section ve aside
main içinde: bağımsız parça, tematik bölümler, yan not.
Article section and aside
html
HTML Code
<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>İkinci demoyu okuyun
- article tek başına durabilir
- section başlıklı
- aside ikinci main değildir
Landmark vs div
Standart rol? landmark. Sadece düzen sarmalayıcı? div.
Alıştırma
- header/nav/main/footer
- hikâye yalnız main’de
- bir article
- tam bir main doğrula
Kolay hatalar
- birden fazla main
- teması olmayan section
- rastgele landmarks
Özet
- Anlamsallık anlamı adlandırır
- bir main
- rol uyuyorsa landmark
🧠 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
6
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