Widget iskeleti
Anlamsal etiketlerle widget iskeletini kurarsın.
Widget kabuğunu kur
Bu derste widget'ın anlamsal kabuğunu kuracağız. Önceki dersteki boş iskeletin <body>'sine bir <section> ekleriz; bu, panelin sınırını çizer.
Section içine sırayla şunlar girer:
<header>: panel başlığı için<main>: widget'ın asıl içeriği için<article>: bağımsız veri birimi için
Böylece ekran okuyucu paneli tek bir bölge olarak algılar.
header ve main ne işe yarar?
<header> bir bölümün tanıtım grubudur; widget'ın adını ve kısa açıklamasını taşır. İçine genellikle bir <h1> konur.
<main> ise sayfadaki asıl içeriği sarar; her sayfada yalnızca bir tane <main> olmalıdır. Widget'ta <main> içine bir <article> koyarız; böylece veri birimi bağımsız olur.
Bu ayrım ekran okuyucu kısayollarının doğru çalışmasını sağlar.
Uygulama lang, meta, title ve widget kabını ekle
Önceki dersin boş iskeletini al. <html>'e lang="tr" ekle. <head> içine meta charset=utf-8, viewport (width=device-width, initial-scale=1) ve title (içeriği Satış Paneli) koy. <body>'ye sırayla bir <section>, onun içine <header> ve <h1> (içeriği Satış Paneli), sonra <main> ve onun içine boş bir <article> ekle.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Satış Paneli</title>
</head>
<body>
<section>
<header>
<h1>Satış Paneli</h1>
</header>
<main>
<article>
<!-- içerikler sonraki derslerde gelir -->
</article>
</main>
</section>
</body>
</html>Kendini test et
-
Hangi etiket 'bağımsız, tek başına da anlamlı içerik' için en uygundur?
- section — tematik bölüm
- article — bağımsız içerik birimi
- header — bölüm başlığı
- main — ana içerik bölgesi
Cevabı göster
article — bağımsız içerik birimi — Doğru! article bağımsız, tek başına da anlamlı içerik birimini taşır.
-
Header etiketini tamamla
<section> <____> <h1>Satış Paneli</h1> </header> </section>Cevabı göster
<section> <header> <h1>Satış Paneli</h1> </header> </section> -
Etiketleri rolleriyle eşleştir
- section
- Tematik bölüm
- header
- Bölüm başlığı grubu
- main
- Ana içerik bölgesi
- article
- Bağımsız içerik birimi