HTML Başlık ve Paragraf Etiketleri: Tarayıcı Metnin Yapısını Nasıl Anlar?

Bir web sayfasına metin eklemek, o metnin yapısını tanımlamak için tek başına yeterli değildir. Sayfada bir ana başlık, farklı konuları açıklayan bölümler ve bu bölümlere ait paragraflar bulunabilir. Ancak bu ilişkiler HTML içerisinde belirtilmediğinde, içeriğin hangi bölümünün neyi temsil ettiği açık bir şekilde tanımlanmış olmaz.

HTML’in temel görevi, web üzerinde yayımlanan içeriğin yapısını ve anlamını tanımlamaktır. Başlık ve paragraf öğeleri de bu görevin metin üzerindeki ilk uygulamalarıdır. Bir başlığı yalnızca büyük göstermek yerine başlık olarak işaretlemek, bir açıklamayı ayrı bir paragraf içerisinde yazmak ve önemli ifadeleri anlamlarına uygun öğelerle belirtmek, belgenin daha anlaşılır bir yapıya kavuşmasını sağlar.

Bu makalede başlık düzeylerinin nasıl belirlendiğini, paragrafların nasıl oluşturulduğunu ve metin içerisindeki önem ile vurgunun nasıl ifade edildiğini ele alacağız. Ardından bu öğeleri küçük bir HTML sayfasında birlikte kullanacağız. Amaç, etiketleri ezberlemekten çok, hangi içeriğin neden hangi öğeyle işaretlendiğini anlamaktır.

Metnin Yapısı Neden Önemlidir?

Bir kitapta bölüm başlıklarının, bir haber metninde paragrafların veya bir kullanım kılavuzunda alt başlıkların bulunması tesadüf değildir. Bu düzen, okuyucunun içeriği takip etmesini ve aradığı bilgiye ulaşmasını kolaylaştırır. Web sayfalarında da benzer bir ihtiyaç vardır; ancak burada yapının yalnızca görünüm üzerinden değil, HTML öğeleriyle de tanımlanması gerekir.

Örneğin “Web Geliştirme Günlüğüm” başlıklı bir sayfa hazırladığımızı düşünelim. Sayfanın içerisinde “Hakkımda” ve “Öğrenme Planım” adında iki bölüm bulunabilir. Öğrenme planını da “HTML Çalışmaları” ve “Uygulama Alışkanlığım” alt başlıklarına ayırabiliriz. Böylece sayfanın ana konusu, bölümleri ve alt konuları arasında belirli bir ilişki oluşur.

HTML öğelerini seçerken esas alacağımız nokta bu ilişkidir. Henüz başlıkların rengini, boyutunu veya sayfadaki boşlukları belirlemiyoruz. Önce içeriğin nasıl düzenlendiğini tanımlıyoruz. Görsel düzenleme ise bu yapı üzerine kurulacaktır.

HTML Başlık Etiketleri Nasıl Kullanılır?

HTML’de başlık öğeleri, h1 ile h6 arasında altı düzeyden oluşur. h1 en üst, h6 ise en alt başlık düzeyini temsil eder. Bu numaralar, başlığın içerik içerisindeki yerini belirtir.

Hazırlayacağımız sayfada ana başlık için h1, ana bölümler için h2 ve bu bölümlerin alt konuları için h3 kullanacağız:

<h1>Web Geliştirme Günlüğüm</h1>
<h2>Hakkımda</h2>
<h2>Öğrenme Planım</h2>
<h3>HTML Çalışmaları</h3>
<h3>Uygulama Alışkanlığım</h3>

Örnekte “Hakkımda” ve “Öğrenme Planım” aynı düzeydeki iki bölüm olduğu için h2 ile işaretlenmiştir. “HTML Çalışmaları” ve “Uygulama Alışkanlığım” ise öğrenme planının alt konularıdır. Bu nedenle onların düzeyi h3 olarak belirlenmiştir.

Başlık numaraları, sayfanın başından sonuna kadar sürekli artan bir sıra oluşturmaz. Bir alt konu tamamlandığında yeni bir ana bölüm için yeniden h2 kullanılabilir. Aynı şekilde her belgede altı başlık düzeyinin tamamının bulunması gerekmez. İçeriğin gerektirdiği kadar bölüm ve alt bölüm oluşturmak yeterlidir.

Başlık Düzeyi ile Yazı Boyutu Arasındaki Fark

Tarayıcılar başlıkları varsayılan olarak farklı boyutlarda ve kalınlıkta gösterebilir. Bu görünüm, başlık öğelerinin yalnızca yazıyı büyütmek veya küçültmek için kullanıldığı düşüncesini oluşturabilir. Ancak bir öğenin varsayılan görünümü ile belge içerisindeki görevi aynı şey değildir.

Örneğin ana başlığın ardından yeni bir bölüm açıyorsak, bölüm başlığının küçük görünmesini istediğimiz için h4 seçmemeliyiz. Bölümün içerikteki yeri h2 düzeyindeyse bu öğeyi kullanır, yazı boyutunu CSS ile düzenleriz. İçerik ile görsel sunumun birbirinden ayrılması, HTML ve CSS arasındaki görev paylaşımının temelidir.

Bu uygulamada CSS kullanmayacağız. Tarayıcının varsayılan görünümü, başlıkların ve paragrafların sonucunu incelemek için yeterlidir. Önceliğimiz, bu öğeler arasında doğru ilişkiyi kurmaktır.

Başlık Yapısının Erişilebilirlikle İlişkisi

Başlıklar, içeriği yalnızca görsel olarak bölümlere ayırmaz. Ekran okuyucu kullanan kişiler, başlıklar arasında gezinerek sayfanın konularını öğrenebilir ve okumak istedikleri bölüme ulaşabilir. Bu nedenle bir metnin büyük veya kalın görünmesi, başlık olarak işaretlenmesinin yerini tutmaz.

Mantıklı bir başlık hiyerarşisi, bölümler arasındaki ilişkinin takip edilmesini kolaylaştırır. Bir alt bölüm açarken h2 düzeyinden doğrudan h4 düzeyine geçmek, arada eksik bir bölüm olduğu izlenimini oluşturabilir. Buna karşılık h3 ile açıklanan bir alt konu tamamlandıktan sonra yeni ana bölüme h2 ile başlamak, içerikteki düzenin doğal bir parçasıdır.

Paragraflar Nasıl Oluşturulur?

Başlıklar bölümlerin konusunu belirtirken paragraflar bu konulara ait açıklamaları taşır. HTML’de bir paragraf oluşturmak için p öğesi kullanılır. Paragraf <p> etiketiyle başlar ve </p> etiketiyle sona erer.

<h2>Hakkımda</h2>
<p>Web geliştirmeyi öğreniyor ve çalışmalarımı bu sayfada paylaşıyorum.</p>
<p>Her yeni konuda küçük bir örnek hazırlayarak ilerliyorum.</p>

Burada “Hakkımda” başlığı, ardından gelen iki paragrafın konusunu tanımlar. Her açıklama ayrı bir p öğesi içerisinde yer alır. Başlığı paragrafın içine yazmayız; aynı şekilde bir paragrafın içerisinde yeni bir p öğesi açmayız. Bu öğeleri ayrı tutmak, belgenin yapısının doğru kurulmasını sağlar.

Editörde Alt Satıra Geçmek Ne Anlama Gelir?

Kod yazarken Enter tuşuna basarak alt satıra geçebiliriz. Ancak editördeki bu değişiklik, tarayıcıda yeni bir paragraf oluşturmaz. Normal metin akışında, CSS ile farklı bir boşluk işleme kuralı tanımlanmadığı sürece, art arda gelen boşluklar ve satır sonları genellikle tek bir boşluk gibi işlenir:

<p>HTML öğreniyorum.
    Her gün küçük bir örnek hazırlıyorum.</p>

Örnekte metin editörde iki satırda yazılmıştır; buna rağmen tek bir p öğesi içerisinde bulunduğu için tek paragraftır. Tarayıcı penceresi daraldığında metnin alt satıra taşması da paragraf sayısını değiştirmez. İki ayrı paragraf oluşturmak için metni iki ayrı öğeyle işaretlememiz gerekir:

<p>HTML öğreniyorum.</p>
<p>Her gün küçük bir örnek hazırlıyorum.</p>

br Öğesi Ne Zaman Kullanılır?

Bazı içeriklerde yeni bir paragraf açmadan satır sonu oluşturmak gerekir. Bir adresin satırlarını korumak veya bir şiirin dizelerini ayırmak bu duruma örnek verilebilir. br öğesi, metin içerisinde bu tür satır sonlarını belirtir:

<p>Örnek Eğitim Merkezi<br>
Örnek Mahallesi, Eğitim Sokak No: 12<br>
Ankara</p>

Bu örnekte tek paragraf içerisinde üç satır bulunmaktadır. br, içerik alamayan bir öğedir ve </br> şeklinde bir kapanış etiketi kullanılmaz.

Burada paragraf ile satır sonu arasındaki ayrımı korumak gerekir. Yeni bir düşünceyi ayrı paragraf olarak yazmak istediğimizde p kullanırız. Sayfada görsel boşluk bırakmak için art arda br eklemek yerine, boşlukları CSS ile düzenleriz.

Metin İçerisinde Önem ve Vurgu Nasıl Belirtilir?

Bir paragrafın içerisinde önemli bir uyarı veya özellikle vurgulanmak istenen bir ifade bulunabilir. HTML, bu anlamları belirtmek için farklı öğeler sunar. strong öğesi güçlü önem, ciddiyet veya aciliyet belirtirken em öğesi ifadeye vurgu kazandırır.

<p><strong>Dosyayı kaydetmeden tarayıcıyı yenilemeyin.</strong></p>
<p>Bu çalışmada <em>kendi cümlelerimi</em> kullanacağım.</p>

İlk cümlede dosyanın kaydedilmesine ilişkin uyarının önemli olduğunu belirtiyoruz. İkinci cümlede ise “kendi cümlelerimi” ifadesini vurgulayarak çalışmanın kişisel olarak hazırlanacağını öne çıkarıyoruz.

Tarayıcılar varsayılan olarak strong içeriğini kalın, em içeriğini italik gösterebilir. Ancak bu öğelerin seçimi yalnızca görünümle ilgili değildir. Bir sözcüğü kalın veya italik göstermek istediğimiz her durumda ona önem ya da vurgu anlamı yüklememeliyiz. Yalnızca görsel bir değişiklik gerekiyorsa bunu CSS ile yapabiliriz.

Bu anlamların bütün ekran okuyucularda mutlaka farklı bir ses tonuyla aktarılacağını da varsaymamak gerekir. Okuma biçimi kullanılan yazılıma ve ayarlara bağlı olabilir. Bu nedenle önemli bir uyarının ne anlattığı, cümlenin kendisinden de açıkça anlaşılmalıdır.

Başlık ve Paragraflarla Bir HTML Sayfası Hazırlayalım

Şimdi anlattığımız öğeleri aynı belge içerisinde kullanalım. Uygulama için HTML belgesinin temel yapısına sahip bir index.html dosyası yeterlidir. Böyle bir dosyanız varsa içeriğini aşağıdaki örnekle düzenleyebilirsiniz. Yeni bir dosya oluşturuyorsanız kodun tamamını editöre yazarak index.html adıyla kaydedin.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Geliştirme Günlüğüm</title>
</head>
<body>
    <h1>Web Geliştirme Günlüğüm</h1>
    <p>HTML öğrenirken hazırladığım örnekleri bu sayfada geliştiriyorum.</p>

    <h2>Hakkımda</h2>
    <p>Web geliştirmeyi öğreniyor ve çalışmalarımı bu sayfada paylaşıyorum.</p>
    <p>Her yeni konuda küçük bir örnek hazırlayarak ilerliyorum.</p>

    <h2>Öğrenme Planım</h2>
    <p>Önce içeriğin yapısını anlayacak, ardından görünümünü düzenleyeceğim.</p>

    <h3>HTML Çalışmaları</h3>
    <p>Bugün başlıkları ve paragrafları uygun öğelerle işaretliyorum.</p>
    <p>Bu çalışmada <em>kendi cümlelerimi</em> kullanacağım.</p>

    <h3>Uygulama Alışkanlığım</h3>
    <p><strong>Dosyayı kaydetmeden tarayıcıyı yenilemeyin.</strong></p>
    <p>Değişiklik yaptığımda dosyayı kaydediyor ve sonucu kontrol ediyorum.</p>
</body>
</html>

Dosyayı UTF-8 kodlamasıyla kaydedin ve tarayıcıda açın. Dosya zaten açıksa değişiklikleri kaydettikten sonra sayfayı yenileyin. Üstte ana başlık, ardından “Hakkımda” ve “Öğrenme Planım” bölümleri bulunmalıdır. Öğrenme planının altında ise iki alt başlık yer alacaktır.

Örnekte her paragraf ayrı bir öğeyle işaretlenmiştir. Başlıkların boyutları ve paragraflar arasındaki boşluklar, CSS eklemediğimiz için tarayıcının varsayılan stillerine göre oluşur. Bu görünüm üzerinden öğelerin görevlerini ve içerikteki sıralarını inceleyebiliriz.

title ve h1 aynı metni taşısa da farklı görevler üstlenir. title, genellikle tarayıcı sekmesinde görünen belge başlığını tanımlar. h1 ise sayfanın içeriğindeki ana başlıktır. Kullanıcının okuyacağı başlıklar ve paragraflar head bölümüne değil, body bölümüne yazılır.

Örneği Kendi İçeriğimizle Geliştirelim

Bir örneği olduğu gibi çalıştırmak, öğelerin sonucunu görmemizi sağlar. Yapıyı daha iyi anlamak için aynı belge üzerinde değişiklik yapmak da gerekir. Önce “Hakkımda” bölümündeki iki paragrafı kendinizi ve çalışmalarınızı anlatan cümlelerle değiştirin.

Ardından “Öğrenme Planım” bölümünün sonuna “Bir Sonraki Çalışmam” adında yeni bir alt başlık ekleyin. Bu başlık, diğer iki alt konuyla aynı düzeyde olduğu için h3 ile işaretlenmelidir:

<h3>Bir Sonraki Çalışmam</h3>
<p>Bir sonraki çalışmada sayfalar arasında bağlantı kurmayı deneyeceğim.</p>

Bu satırları son paragraftan sonra, </body> etiketinden önce ekleyin. Dosyayı kaydedip sayfayı yenilediğinizde öğrenme planının altında üçüncü bir alt bölüm bulunacaktır.

Son olarak bir paragrafı editörde iki satıra bölün ve tarayıcıdaki sonucu inceleyin. Ardından aynı metni iki ayrı p öğesine ayırın. Bu iki değişiklik, kodun yazılış düzeni ile belgenin içerik yapısı arasındaki farkı doğrudan gözlemlemenizi sağlar.

Hazırladığımız Sayfada Neleri Kontrol Etmeliyiz?

İlk olarak yalnızca başlıkları okuyun. Sayfanın ana konusu, bölümleri ve alt konuları bu başlıklardan anlaşılabiliyor mu? Örneğimizde tek bir h1, ana bölümler için h2 ve onların alt konuları için h3 kullandık. Başlık düzeylerini yazı boyutuna göre değil, içerikteki ilişkilerine göre belirlediğimizi kontrol edin.

Ardından paragrafların ve metin içerisindeki öğelerin açılış ve kapanış etiketlerini inceleyin. Bir başlık veya ikinci bir paragraf, p öğesinin içerisinde bulunmamalıdır. İç içe kullanılan öğeler de açıldıkları sıranın tersine kapanmalıdır. Örneğin paragraf içerisinde açılan strong öğesi önce kapatılır, ardından </p> yazılır.

Tarayıcıda yaptığınız değişiklikler görünmüyorsa dosyayı kaydettiğinizi ve düzenlediğiniz dosyanın açık olduğunu kontrol edin. Ekran okuyucu kullanıyorsanız başlıklar arasında gezinerek bölüm sırasını da inceleyebilirsiniz. Böylece sayfanın yalnızca görünümünü değil, işaretlediğiniz yapısını da değerlendirmiş olursunuz.

Metni Düzenlemek, Belgenin Anlamını Tanımlamaktır

Başlık, paragraf ve vurgu öğeleri, HTML öğrenirken karşılaştığımız ilk etiketler arasındadır. Ancak bu öğeleri doğru kullanmak, yalnızca temel sözdizimini öğrenmek anlamına gelmez. Sayfanın ana konusunu, bölümler arasındaki ilişkileri ve metindeki önemli ifadeleri tanımlamak, daha anlaşılır bir web belgesi oluşturmanın temelidir.

Hazırladığımız örnekte başlıklarla içerik düzenini, paragraflarla açıklamaları, strong ve em ile önem ve vurguyu belirttik. Bu yapıyı farklı metinlerle geliştirdikçe, etiket seçimini görünümden önce içeriğin anlamına göre yapma alışkanlığı kazanabiliriz.