0Pricing
HTML Academy · Ders

article Öğesi: Kendi Başına Yeterli İçerik

Bağımsız olarak dağıtılabilen içerikler için article kullanın

article Öğesi: Kendi Başına Yeterli İçerik, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Makale Öğesi Nedir?

<article> öğesi, kendi içinde anlamlı ve bağımsız olarak dağıtılabilen içeriği temsil eder:

  • Sayfa bağlamının dışında tek başına anlamlıdır
  • Anlamını kaybetmeden yeniden yayımlayabilirsiniz (RSS, sosyal kart)

Makale Öğesi Ne Zaman Kullanılır

<article> öğesini şu içerikler için kullanınız:

  • Blog yazıları
  • Haber makaleleri
  • Forum gönderileri
  • Ürün kartları
  • Yorumlar (tek tek yorumlar birer makale öğesidir)
  • Bileşenler veya araçlar

Makale Öğesi Yapısı

Tipik bir makale; üst bilgi, içerik ve alt bilgi bölümlerini içerir:

<article>
  <header>
    <h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
    <p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>

  <p>HTML5 brought many semantic improvements to the web...</p>

  <footer>
    <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
  </footer>
</article>

İç içe Makaleler (Yorumlar)

Yanıtları veya alt içerikleri temsil etmek için makaleleri iç içe yerleştirebilirsiniz:

<article class="post">
  <h2>Main Post Title</h2>
  <p>Post content...</p>

  <section class="comments">
    <h3>Comments</h3>

    <article class="comment">
      <p>Great post! — <cite>Alice</cite></p>
    </article>
    <article class="comment">
      <p>Thanks for sharing! — <cite>Bob</cite></p>
    </article>
  </section>
</article>

Ürün Kartlarını Makale Öğesi Olarak Kullanma

Ürün veya içerik kartları makale öğesi olabilir:

<ul class="product-grid">
  <li>
    <article class="product-card">
      <img src="widget.jpg" alt="Widget Pro">
      <h2>Widget Pro</h2>
      <p>The best widget for professionals.</p>
      <p>$49.99</p>
      <a href="/products/widget-pro">View Product</a>
    </article>
  </li>
</ul>

Makale Öğesi ve Bölüm Öğesi

Sık karıştırılan iki öğe — makale öğesi ve bölüm öğesi:

  • <article> — kendi içinde anlamlıdır; sayfadan çıkarıldığında da anlamını korur
  • <section> — tematik bir gruplamadır; anlam kazanmak için çevresindeki bağlama ihtiyaç duyar
<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>

<!-- Section: a chapter of the post (not standalone) -->
<article>
  <section><h2>Introduction</h2>...</section>
  <section><h2>Deep Dive</h2>...</section>
</article>

Makale Öğesi ve Schema.org

Zengin arama sonuçları elde etmek için makale öğesini Schema.org biçimindeki yapılandırılmış verilerle birleştiriniz:

<article>
  <h1 id="title">HTML5 Guide</h1>
  <time datetime="2025-01-15" id="date">Jan 15, 2025</time>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 Guide",
  "datePublished": "2025-01-15"
}
</script>

cite Öğesi

Bir çalışmanın başlığı veya atıf bilgisi için <cite> öğesini kullanınız:

<article>
  <h2>Book Review: <cite>Don't Make Me Think</cite></h2>
  <p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
  <p>Steve Krug's book remains essential reading for UX designers...</p>
</article>

Bağlantılarda Yazarlık İlişkisi

Makale içindeki yazarlık bağlantılarını rel="author" ile işaretleyiniz:

<article>
  <p>Written by
    <a href="/authors/jane" rel="author">Jane Smith</a>
  </p>
</article>
<!-- rel="author" helps search engines identify content authorship -->

Bir Sayfada Birden Çok Makale

Bir listede veya akışta birden çok makale bulunabilir:

<main>
  <h1>Latest Posts</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->

Makale Öğesi Ne Zaman Kullanılmaz

<article> öğesini şu içerikler için kullanmayınız:

  • Bağımsız bir anlamı olmayan genel sayfa bölümleri
  • Gezinme öğeleri
  • Ana sayfadaki pazarlama bölümleri (<section> kullanınız)
  • Kenar çubuğu bileşenleri (<aside> kullanınız)

Hızlı Kontrol

Bir makale öğesinde yer alması gereken içeriğin ayırt edici özelliği nedir?

Özet: Makale Öğesi

Makale öğesinin temel özellikleri:

  • Kendi içinde anlamlı ve bağımsız olarak dağıtılabilen içerik
  • Anlamını kaybetmeden yeniden yayımlanabilir (RSS, sosyal önizleme)
  • Örnekler: blog yazıları, haberler, ürün kartları, yorumlar
  • İç içe yerleştirilebilir (iç içe yorum makaleleri içeren gönderi)
  • Makale içindeki yazarlık bağlantılarında rel="author" kullanınız

Sıkça Sorulan Sorular

“article Öğesi: Kendi Başına Yeterli İçerik” dersi ücretsiz mi?

Evet — “article Öğesi: Kendi Başına Yeterli İçerik” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“article Öğesi: Kendi Başına Yeterli İçerik” dersinde ne öğreneceğim?

Bağımsız olarak dağıtılabilen içerikler için article kullanın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“article Öğesi: Kendi Başına Yeterli İçerik” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. header nav main ve footer
  2. article Öğesi: Kendi Başına Yeterli İçerik
  3. section Öğesi ve div Karşılaştırması
  4. time address ve mark
← HTML Academy Sayfasına Dön