CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özellik listesi

HTML kursu · Orta seviye · Ders 15/67

Ü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

  1. Etiketi rolüyle eşleştir

    section
    Konu grubu
    article
    Bağımsız içerik
    strong
    Önemli metin
    em
    Vurgulu metin

  2. 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.

  3. 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>

Orta seviye bölümündeki tüm dersler

1 İleri metin etiketleri

  1. Abbr, cite ve time
  2. Code, kbd ve samp
  3. Sub ve sup
  4. Pre ve code bloğu
  5. Wbr ve bdi, bdo
  6. Özet - Teknik doküman

2 İleri bağlantılar

  1. Download bağlantıları
  2. Ping ve rel türleri
  3. Hreflang ve canonical
  4. Bağlantı erişilebilirliği
  5. Buton vs bağlantı
  6. Özet - Çok dilli menü

3 Proje: Landing sayfası

  1. Proje: Ürün landing sayfası
  2. Hero bölümü
  3. Özellik listesi
  4. Fiyat tablosu
  5. Proje sonu - Landing

4 İleri tablolar

  1. Col ve colgroup
  2. Scope ve headers
  3. Tablo erişilebilirliği
  4. Responsive tablolar
  5. Tablo görsel yapısı
  6. Özet - Karşılaştırma tablosu

5 Proje: Veri tablosu

  1. Proje: Veri tablosu
  2. Başlık ve caption
  3. Gövde verisi
  4. Toplam satırı
  5. Proje sonu - Veri tablosu

6 İleri form öğeleri

  1. Fieldset ve legend
  2. Datalist ve output
  3. Progress ve meter
  4. Input öznitelikleri
  5. Autocomplete ve inputmode
  6. Özet - Anket formu

7 Form doğrulama

  1. Required ve pattern
  2. Min, max ve step
  3. Minlength ve maxlength
  4. Type-based doğrulama
  5. Novalidate ve formnovalidate
  6. Özet - Kayıt formu doğrulama

8 Proje: İletişim formu

  1. Proje: İletişim formu
  2. Form iskeleti
  3. Kişi alanları
  4. Mesaj ve konu
  5. Proje sonu - İletişim formu

9 Anlamsal düzen

  1. Header yapısı
  2. Ana içerik
  3. Sidebar ve aside
  4. Footer yapısı
  5. Bölümleme kuralları
  6. Özet - Magazin sayfası

10 Erişilebilirlik temelleri

  1. ARIA temelleri
  2. Saklı başlık
  3. Skip link
  4. Form erişilebilirliği
  5. Tablo erişilebilirliği
  6. Özet - Erişilebilir kart

11 Proje: Site iskeleti

  1. Proje: Çok sayfalı site iskeleti
  2. Tutarlı header/footer
  3. Ana sayfa
  4. Hakkında ve iletişim
  5. Proje sonu - Site iskeleti

12 Orta seviye finali

  1. Meydan okuma - İleri metin
  2. Meydan okuma - Erişilebilir tablo
  3. Meydan okuma - Doğrulamalı form
  4. Meydan okuma - Anlamsal düzen
  5. Meydan okuma - Orta seviye projesi