Bir web sitesi tasarlarken veya içerik üretirken, metinlerinizi ziyaretçilerinize ve arama motorlarına doğru bir şekilde sunmak en önemli adımlardan biridir. Web sayfalarının yapı taşı olan HTML (HyperText Markup Language), metinlerinizi mantıksal bir çerçeveye oturtmanızı ve şekillendirmenizi sağlar. Bu rehberde, HTML’in en temel ve web sayfalarında en çok karşılaştığınız iki yapısını; başlıklar (headings) ve paragraflar (paragraphs) konularını SEO (Arama Motoru Optimizasyonu) ve erişilebilirlik (accessibility) standartlarına uygun bir biçimde, örneklerle derinlemesine öğreneceğiz.
1. HTML Başlıklar (Headings) Nedir ve Nasıl Kullanılır?
HTML’de başlıklar, sayfanızdaki içeriklerin hiyerarşisini, önem derecesini ve genel yapısını belirlemek için kullanılır. Bir kitabı veya gazeteyi düşünün; her içeriğin bir ana başlığı, alt bölüm başlıkları ve daha detaylı konular için alt başlıkları vardır. Web sayfaları da tam olarak bu mantıkla kurgulanmalıdır.
HTML standardı, en yüksek (en önemli) seviyeden en düşük seviyeye doğru altı farklı başlık etiketi sunar: <h1>‘den <h6>‘ya kadar.
<h1>: Sayfanın en büyük ve en önemli ana başlığını temsil eder. Bir haber sitesindeki haberin ana manşeti<h1>‘dir.<h2>: Ana başlığın altındaki temel konu başlıklarıdır.<h3>:<h2>başlıklarının alt detaylarını veya alt bölümlerini belirtir.<h4>,<h5>,<h6>: Giderek daha az öneme sahip, daha derin ve spesifik alt başlıkları ifade eder.
Örnek bir başlık kullanımı:
<h1>Web Geliştirmeye Giriş</h1>
<h2>HTML Temelleri</h2>
<h3>Başlıklar ve Paragraflar</h3>
<p>Burada başlıkların ve metinlerin nasıl çalıştığını öğreniyoruz.</p>
<h2>CSS ile Sayfayı Renklendirme</h2>
Başlık Kullanımında SEO ve Erişilebilirlik Altın Kuralları
Web geliştirmeye yeni başlayanların en sık yaptığı hata, sırf büyük veya kalın bir metin elde etmek için rastgele <h2> veya <h3> etiketleri kullanmaktır. Başlık etiketleri görsel bir tasarım aracı olarak (sadece metni büyütmek için) kullanılmamalıdır. Bu tür görsel işlemlerin yeri HTML değil, CSS (Cascading Style Sheets) olmalıdır.
Başlıkların anlamsal (semantic) olarak doğru kullanımının iki devasa faydası vardır:
- SEO (Arama Motoru Optimizasyonu) Faydası: Google gibi arama motorlarının botları sitenizi ziyaret ettiğinde, sayfanızın ne hakkında olduğunu anlamak için
<h1>,<h2>gibi başlıklarınızı referans alır. Anahtar kelimelerinizin sıradan metinler yerine<h1>veya<h2>etiketleri içinde mantıklı bir sırayla yer alması, içeriğinizin arama sonuçlarında daha üst sıralarda çıkmasına (ve “zengin snippet” olarak görünmesine) büyük katkı sağlar. Hiyerarşiyi korumak adına, her sayfada yalnızca bir tane<h1>etiketi kullanılması modern bir standarttır. - Erişilebilirlik (Accessibility) Faydası: Görme engelli kullanıcılar web sitelerinde gezinirken ekran okuyucu (screen reader) programlar kullanırlar. Ekran okuyucular sayfayı sese çevirirken bu başlık etiketlerini baz alırlar. Kullanıcı dilerse ekran okuyucuya “bana sayfadaki tüm
<h2>başlıklarını listele” komutunu verebilir ve bir içindekiler tablosu gibi sayfanızda kolayca gezinebilir. Hatalı başlık kullanımı, özel gereksinimli bireylerin sayfanızı okumasını ve anlamasını çok zorlaştırır.
2. HTML Paragraflar (Paragraphs) Nedir ve Nasıl Kullanılır?
Paragraflar, web sayfalarındaki düz metin bloklarını oluşturmak için kullanılan en temel yapı taşlarıdır ve HTML’de <p> (paragraph) etiketi ile tanımlanırlar. Okuduğunuz bu makaledeki metin bloklarının her biri birer paragraf elementidir.
<p> etiketi, blok seviyesinde (block-level) bir elementtir. Blok seviyesindeki elementlerin en önemli özelliği, bulundukları satırın tüm genişliğini kaplamaları ve her zaman yeni bir satırdan başlamalarıdır. Tarayıcılar (Chrome, Firefox vb.), paragrafların arasına otomatik olarak üstten ve alttan görünmez bir boşluk (margin) eklerler, böylece metinler birbirine girmez ve okuma kolaylığı sağlanır.
Örnek bir paragraf kullanımı:
<p>Bu benim ilk web sayfamdaki ilk paragrafım. HTML öğrenmek gerçekten çok eğlenceli.</p>
<p>Bu da ikinci paragrafım. Tarayıcı iki paragraf arasına otomatik olarak bir satır boşluğu koyacaktır.</p>
Paragraflarda Kapanış Etiketinin Önemi ve Boşluk Kuralları
Eski HTML sürümlerinde <p> etiketinin kapanışını (</p>) yazmayı unutmak tarayıcıların hatayı tolere etmesi sayesinde sayfanın bozulmasına yol açmayabiliyordu. Ancak daha katı kuralları olan XHTML ve modern web standartlarında her açılan <p> etiketinin muhakkak </p> ile kapatılması zorunludur. Kodlarınızı her zaman açıp kapatma alışkanlığı edinmek sizi karmaşık hatalardan kurtarır.
Başlangıçta yapılan bir diğer yaygın hata, paragraflar veya diğer elementler arasında ekstra boşluk bırakmak için sayfaya art arda içi boş <p></p> etiketleri yazmaktır. Web tarayıcıları içi boş olan bu mantıksız paragrafları görmezden gelir (minimize eder) ve sayfanıza boşluk eklemez. Sayfanızdaki dikey boşlukları (layout/düzen) yönetmek HTML’in değil, CSS padding (iç boşluk) ve margin (dış boşluk) özelliklerinin işidir.
3. Metin İçi Satır Atlamaları (Line Breaks: <br>)
Bazen bir paragrafın (<p>) içindeyken, yeni bir paragrafa geçmeden metni sadece bir alt satırdan devam ettirmek isteyebilirsiniz. Şiir yazarken veya iletişim adresi belirtirken bu durum çok sık yaşanır. İşte bu ihtiyacı <br> (line break) etiketi çözer.
<br> ile <p> arasındaki en kritik fark şudur: <br> metni sadece görsel olarak alt satıra atar ve sayfanın anlamsal hiyerarşisini (semantic structure) değiştirmez; <p> ise metni tamamen yeni bir fikir veya bölüm bloğuna ayırır. <br> etiketi, boş (void) bir elementtir. Bu yüzden kendi başına bir içeriği sarmalamaz ve </br> şeklinde bir kapanış etiketine asla ihtiyaç duymaz. Sadece uygulandığı yere konur ve işini yapar.
Örnek <br> kullanımı:
<p>İletişim Adresimiz:<br>
Örnek Mahallesi, Geliştirici Sokak No:1<br>
Kadıköy / İstanbul</p>
Bu örnekte tüm adres tek bir bütün halindeki paragraf bloğudur, ancak her satır daha düzenli görünmesi için <br> etiketiyle alt satıra indirilmiştir.
Bölümler veya paragraflar arasında tematik bir kopuş, bir hikayede zaman veya mekan değişimi gibi belirgin bir ayrım yapmak isterseniz <hr> (horizontal rule) etiketini kullanabilirsiniz. Bu etiket sayfaya boydan boya yatay bir çizgi çeker. O da tıpkı <br> gibi boş (void) bir elementtir ve kapanışı yoktur.
4. Paragraflar İçinde Satır İçi (Inline) Formatlama
Bir paragraf (<p>) veya başlık (<h1>) oluşturduğunuzda bu bloğun tümü tek bir element olarak davranır. Eğer paragraf içindeki spesifik bir kelimenin arama motorları için daha önemli olduğunu belirtmek veya okuyucunun dikkatini çekmek isterseniz satır içi (inline-level) etiketler kullanırsınız. Blok etiketlerin aksine satır içi etiketler yeni bir satıra geçmez ve metnin doğal akışını bölmezler.
En önemli satır içi anlamsal (semantic) etiketlerden ikisi şunlardır:
<strong>(Güçlü Vurgu): İçerisindeki kelimelerin son derece önemli olduğunu arama motorlarına ve ekran okuyuculara bildirir. Tarayıcılar varsayılan olarak bu kelimeleri kalın (bold) fontla gösterir. Ekran okuyucular bu metinleri daha baskın ve farklı bir ses tonlamasıyla okuyabilir.<em>(Emphasis – Vurgu): Metnin özel bir vurguyla okunması gerektiğini belirtir ve görsel olarak eğik (italik) yazdırır.
<p>Modern web tasarımında <strong>anlamsal (semantic) HTML</strong> kullanmak, başarılı olmanın <em>en temel</em> kurallarından biridir.</p>
Bu örnekteki <strong> ve <em> etiketleri paragrafın içine gömülmüş, yani iç içe geçirilmiştir (nested elements). HTML’de etiketleri iç içe kullanırken, tıpkı matruşka bebekleri gibi en son açtığınız etiketi ilk kapatmanız gerekir. Aksi takdirde (misnested tags) tarayıcı sayfa düzenini yanlış anlayabilir ve tasarımınızda bozulmalar meydana gelebilir.
Özet
HTML öğrenirken; başlıklar (<h1> – <h6>) sadece tasarımınızın büyüklüğünü ayarlayan araçlar değil, sayfanızın SEO dostu iskeletidir. Paragraflar (<p>) ise bu iskeletin kaslarıdır; ziyaretçiye bilgiyi sıkıcı olmayan, parçalara ayrılmış düzgün bloklar halinde sunarlar. Bir geliştirici olarak CSS (görsel şekillendirme) ile HTML’i (yapısal ve anlamsal iskelet) birbirinden ayırmayı ve bu temel etiketleri amaçlarına en uygun şekilde kullanmayı alışkanlık haline getirdiğinizde; hızlı, bulunabilir ve herkes tarafından kolayca erişilebilir harika web siteleri inşa edebilirsiniz.
