Özellik listesi

Ürün özelliklerini anlamsal etiketlerle ve listelerle eklersin.

Özellikler bölümü

Özellikler bölümü ürünün değerini maddeler halinde gösterir. Her özellik kendine yeten bir karttır; bunun için <article> kullanırsın. Kartlar bir <section> içine gruplanır.

Her kartta:

bir <h3> ile özellik adı
bir <p> ile açıklama
önemli sözleri <strong> ile, vurguluları <em> ile sararsın

section ve article farkı

<section> konu bakımından ilişkili içeriği gruplar; içinde genellikle bir başlık bulunur. <article> ise başlı başına dağıtılabilen, kendine yeten içeriktir: bir blog yazısı, bir özellik kartı, bir haber.

Özellik listesinde her kart bir <article>, tüm kartlar bir <section> içindedir. Böylece ekran okuyucu yapıyı doğru algılar.

Uygulama Özellikler bölümünü ekle

Önceki adımın hero içeren <main>'ini al. <button>'dan sonra bir <section> ekle. section içine dolu bir h2, en az iki article (her birinde dolu h3 ve p) ve en az üç li içeren bir ul koy. p içinde strong ve em kullan.

Ö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>TaskFlow - Görev yönetimi</title>
  </head>
  <body>
    <main>
      <h1>Görevlerini akılda değil, akışta tut</h1>
      <p>TaskFlow ile ekibinin görevlerini, son tarihlerini ve ilerlemesini tek panelden yönet.</p>
      <a href="/kayit">Ücretsiz başla</a>
      <button>Tur iste</button>
      <section>
        <h2>Neden TaskFlow?</h2>
        <article>
          <h3>Kanban panoları</h3>
          <p>Görevleri <strong>sürükle bırak</strong> ile taşı, akışı <em>canlı</em> gör.</p>
        </article>
        <article>
          <h3>Otomatik hatırlatma</h3>
          <p>Son tarih yaklaşırken <strong>e-posta</strong> ve <em>anlık bildirim</em> al.</p>
        </article>
        <ul>
          <li><strong>Takvim</strong> görünümü</li>
          <li><strong>Dosya</strong> ekleri</li>
          <li><strong>Etiket</strong> sistemi</li>
        </ul>
      </section>
    </main>
  </body>
</html>

Kendini test et

Etiketi rolüyle eşleştir

section

Konu grubu
article

Bağımsız içerik
strong

Önemli metin
em

Vurgulu metin
Kendine yeten bir özellik kartı için en uygun etiket hangisidir?
- article
- aside
- footer
- nav
Cevabı göster

article — Doğru. article bağımsız, dağıtılabilir içerik blokları için uygundur.

Bağımsız bir özellik kartı için etiket adını yaz

<____>
  <h3>Hızlı kurulum</h3>
  <p>Takımını dakikalar içinde başlat.</p>
</article>

Cevabı göster

<article>
  <h3>Hızlı kurulum</h3>
  <p>Takımını dakikalar içinde başlat.</p>
</article>

Sıradaki ders: Fiyat tablosu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler