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

Sıradaki ders: Veri görsel yapı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler