CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Ana sayfa

HTML kursu · Orta seviye · Ders 60/67

Ana sayfada hero ve özet içerik bölümlerini yazarsın.

Ana sayfa yapısı

Ana sayfanın <main> bölgesi genellikle bir hero ile başlar: sayfa başlığını taşıyan bir <h1> ve kısa bir açıklama paragrafı. Ardından içerik <section> bölümlerine ayrılır.

Her section kendi <h2> başlığını taşır. Section içine bağımsız içerik parçaları olan <article> etiketleri konur; her article <h3> ve <p> ile yazılır. Böylece başlık hiyerarşisi sayfadan sayfaya tutarlı kalır.

Section ve article

<section> ilgili içeriği gruplar ve bir <h2> başlığıyla tanıtılır. Section içine <article> etiketleri konur; her article kendi başlığıyla bağımsız bir parçadır.

Peynir Dergisi ana sayfasında 'Son yazılar' section'ı iki article taşır: her birinde <h3> (yazı başlığı) ve <p> (kısa özet) bulunur. Bu yapı sayfayı tarayıcılar ve ekran okuyucular için anlamlı bölgelere ayırır.

Uygulama main içine hero ve section ekle

header ile footer arasına <main> ekle. main içinde <h1> (sayfa başlığı), bir <p> (kısa açıklama) ve bir <section> olsun. section içinde <h2> ve en az iki <article>; her article'da <h3> ve <p> bulunsun.

Ö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>Peynir Dergisi</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Peynir Dergisi</a>
        <a href="/yazilar">Yazilar</a>
        <a href="/hakkimizda">Hakkimizda</a>
        <a href="/iletisim">Iletisim</a>
      </nav>
    </header>
    <main>
      <h1>Peynir Dergisi</h1>
      <p>Peynir kültürüne dair yazılar, tarifler ve üretici hikayeleri.</p>
      <section>
        <h2>Son yazılar</h2>
        <article>
          <h3>Ezine peyniri</h3>
          <p>Trakya'nın beyaz peynirinin üretim aşamalarını inceledik.</p>
        </article>
        <article>
          <h3>Van otlu peyniri</h3>
          <p>Doğu Anadolu'nun otlu peynirinde kullanılan bitkileri tanıdık.</p>
        </article>
      </section>
    </main>
    <footer>
      <address>
        Peynir Dergisi, Beyoglu, Istanbul
      </address>
      <p>(c) 2026 Peynir Dergisi</p>
    </footer>
  </body>
</html>

Kendini test et

  1. Hero bölümünün başlığını tamamla

    <main><____>Peynir Dergisi</h1></main>
    Cevabı göster 
    <main><h1>Peynir Dergisi</h1></main>

  2. Bir section içinde bir h2 ve en az bir article istersen doğru yapı hangisi?

    • <h2><section><article>...</article></section></h2>
    • <section><article><h2>...</h2></article></section>
    • <section><h2>...</h2><article>...</article></section>
    • <section><h2>...</h2></section><article>...</article>
    Cevabı göster

    <section><h2>...</h2><article>...</article></section> — Doğru. section h2 ile başlar, article section içinde yer alır.

  3. Başlık seviyesini rolüyle eşleştir

    h1
    Sayfa başlığı
    h2
    Bölüm başlığı
    h3
    Article başlığı
    section
    İçerik grubu

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