🚀 HTML Paragraphs: Metnin Yapısı ve Okunabilirlik

Metin Bloklarını Yönetmek: <p> Etiketi

Selamlar. Başlıklarla sayfanın haritasını çıkardık, şimdi o bölümlerin içini anlamlı metinlerle doldurma vakti. HTML'de paragraflar için kullandığımız ana yapı taşı <p> (Paragraph) etiketidir.

Bir paragraf etiketi kullandığınızda, tarayıcı bunu bir block-level (blok seviyesinde) öğe olarak kabul eder. Bunun anlamı şudur: Paragraf her zaman yeni bir satırdan başlar ve tarayıcı, okunabilirliği artırmak için paragrafın öncesine ve sonrasına otomatik olarak bir miktar boşluk (margin) ekler.

Tarayıcının Metin İşleme Mantığı (White Space Collapsing)

Burada yeni başlayanların sıkça düştüğü bir 'tuzak' var. HTML editörünüzde bir paragrafın içinde ne kadar boşluk bırakırsanız bırakın veya ne kadar alt satıra geçerseniz geçin, tarayıcı bunları tek bir boşluk olarak görür. Buna White Space Collapsing denir.

Biz Space Conqueror oyunumuzun hikaye metinlerini tarayıcı tabanlı arayüze aktarırken bu kuralla çok haşır neşir olmuştuk. Eğer metnin içinde zorunlu bir alt satıra geçiş istiyorsanız <br> (Line Break) etiketini, konuyu tamamen ayırmak için bir yatay çizgi istiyorsanız <hr> (Horizontal Rule) etiketini kullanmalısınız.

Unutmaman Gereken 3 Kural

1. Paragraf içine paragraf koyma: Bir <p> etiketinin içine başka bir <p> koyamazsınız. Tarayıcı bunu gördüğünde ilk paragrafı otomatik olarak kapatır ve yapınız bozulur.
2. Boşluklar için <p> kullanma: Sadece sayfada boşluk bırakmak için içi boş <p></p> etiketleri kullanmak kötü bir pratiktir. Boşluklar CSS'in (margin/padding) işidir.
3. Anlamsal Ayrım: Her yeni düşünce veya konu grubu için yeni bir <p> açın. Bu hem SEO hem de ekran okuyucular için metnin taranabilirliğini artırır.

Bir sonraki derste, bu metinlerin içindeki bazı kelimeleri nasıl vurgulayacağımızı (kalın, italik vb.) ve metin stillerinin HTML tarafındaki karşılıklarını göreceğiz.

Ovid Link: ovidgame.com