💖 Basit Blog Post Tasarımı

💖 Basit Blog Post Tasarımı

(Okunabilirlik kutsaldır, gözlerimiz değerli 👀✨)

Merhaba HTML evreninin yazar ruhlu geliştiricisi 💻📝
Bugün seninle “okuyan kaçmasın, yazı nefes alsın” diye tasarlanmış, sade ama güçlü bir blog post HTML yapısı kuruyoruz.

Bu yazıda:

• Doğru etiketleri kullanacağız 🧠
• Semantik HTML ile SEO’yu mutlu edeceğiz 📈
• Okuyucunun gözünü yormayan bir yapı kuracağız 😌

Hazırsan başlıyoruz💖

🧠 Neden Okunabilirlik Odaklı HTML?

Çünkü:

• Kimse duvar gibi yazı okumak istemiyor 🧱
• Google da istemiyor 😈
• Uzun içerik, doğru yapı olmazsa kaçış başlıyor 🏃‍♂️

İşte burada <article>, <section> ve <footer> sahneye çıkıyor 🎭

🧱 Temel Yapı: Blog Post İskeleti

Önce genel resmi görelim:

<article class="blog-post">
  <header>
    <h1>HTML ile Okunabilir Blog Yazısı Tasarlamak</h1>
    <p class="meta">Yazar: Cansu • 18 Aralık 2025</p>
  </header>

  <section>
    <p>
      HTML ile blog yazısı yazmak sadece içerik üretmek değil,
      aynı zamanda okuyucuya nefes aldırmaktır.
    </p>
  </section>

  <section>
    <h2>Neden Semantik HTML?</h2>
    <p>
      Çünkü <strong>anlamlı etiketler</strong> hem tarayıcıyı
      hem de arama motorlarını mutlu eder.
    </p>
  </section>

  <footer>
    <p>Etiketler: HTML, Blog, Okunabilirlik</p>
  </footer>
</article>

Şimdi bunu parça parça, aşk ile inceleyelim 💕

📰 <article>: Yazının Kalbi ❤️

<article> şunu der:

“Ben tek başıma anlamlıyım.”

Blog post için biçilmiş kaftan.

<article class="blog-post">
  <!-- Tüm yazı burada -->
</article>

SEO, ekran okuyucular ve geliştirici dostu ✨

🏷️ Başlık, Yazar ve Tarih (Header Alanı)

<header>
  <h1>HTML ile Okunabilir Blog Yazısı Tasarlamak</h1>
  <p class="meta">Yazar: Cansu • 18 Aralık 2025</p>
</header>

İpuçları 💡

• <h1> sadece bir tane olsun 🚨
• Yazar + tarih küçük ve sade olmalı
• Göz yormasın, bilgi versin

📚 <section>: İçeriği Nefes Aldırarak Böl

Her konuyu ayrı bir <section> içine al:

<section>
  <h2>Blog Yazısında Yapı Neden Önemli?</h2>
  <p>
    Paragraflarla bölünmüş içerik, okuyucunun sayfada
    daha uzun kalmasını sağlar.
  </p>
</section>

Okunabilirlik Altın Kuralları 💎

• 2–3 satırı geçen paragrafa dikkat ⚠️
• Başlıksız paragraf bırakma
• Her section = tek fikir 🎯

🧠 Metin İçinde HTML Detayları

<p>
  <strong>Kalın metin</strong> vurgular için,
  <em>italik</em> ise duygusal dokunuşlar içindir.
</p>

❌ <br><br><br> ile paragraf yapma
✅ <p> ile düzgün yapı kur

👣 <footer>: Yazının Sessiz Vedası

<footer>
  <p>Bu yazı 5 dakikada okunur ⏱️</p>
  <p>Etiketler: HTML, Semantik, Blog</p>
</footer>

Footer şunlar için idealdir:

• Etiketler
• Okuma süresi
• Yazar bio mini alanı

🎯 Mini CSS (Okunabilirlik Bonus’u)

HTML tamam, şimdi küçük bir sihir ✨

.blog-post {
  max-width: 700px;
  margin: 40px auto;
  line-height: 1.7;
  font-family: Georgia, serif;
}

.meta {
  color: #777;
  font-size: 14px;
}

Gözler: “Oh be 😌”

💌 Son Söz (Yazardan Okuyucuya)

İyi bir blog yazısı:

• Sadece iyi yazılmış değildir ✍️
• İyi yapılandırılmıştır 🧠

Semantik HTML kullan:

• Okuyucu mutlu 😄
• Google mutlu 📈
• Sen mutlu 💖