HTML’in temel görevlerinden biri de metinlere anlam vermesidir – bu aynı zamanda semantik olarak da bilinir. Böylece tarayıcılar içeriğin nasıl gösterileceğini bilirler. Bu yazıda HTML’in bir metin kümesini nasıl yapılandırdığına bakacağız ve başlıklara, paragraflara, listelere ve daha fazlasına nasıl dönüştürdüğü ile ilgileneceğiz.
Temeller: başlık ve paragraf
Çoğu yapılandırılmış metin başlıklardan ve paragraflardan oluşur. Bu bir roman okurken de, gazete okurken de, dergi okurken de böyledir.
Yapılandırılmış içerik okuma deneyimini kolaylaştırır ve zevkli hale getirir.
HTMP’de her paragraf bloğu <p> öğesinin içine alınmalıdır:
<p>I am a paragraph, oh yes I am.</p>Buna karşın, her başlık da başlık öğesine sarılır:
<h1>I am the title of the story.</h1>Altı tür başlık öğesi bulunur: <h1>, <h2>, <h3>, <h4>, <h5>, ve <h6>. Her öğe belgede farklı bir içerik seviyesine işaret eder; <h1> ana başlığı, <h2> alt başlığı, <h3> alt-alt başlığı, vb. ifade eder.
Yapısal bir hiyerarşi inşa etmek
Örneğin aşağıdaki hikayede <h1> öğesi hikayenin başlığını niteler. <h2> öğesi her alt bölümün başlığını, ve <h3> öğesi ise bölümlerin alt başlıklarını niteler:
<h1>The Crushing Bore</h1>
<p>By Chris Mills</p>
<h2>Chapter 1: The dark night</h2>
<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
<h2>Chapter 2: The eternal silence</h2>
<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
<h3>The specter speaks</h3>
<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>Belgedeki öğelerin neyi nitelediği aslında tamamen size kalmış bir şey. Dikkat etmeniz gereken şey sadece bu öğelerin bir hiyeraşide bulunup bulunmadığı. Bunu yaparken aşağıdakileri göz önünde bulundurabilirsiniz:
- Her sayfa için tercihen bir tane
<h1>öğesi kullanılmalı — bu öğe en üst düzey başlığımız olacak ve diğerleri bu başlığın altında yer alacak. - Başlık hiyerarşisini doğru düzende kullanmaya önem verin. Örneğin
<h2>öğesinden önce<h3>öğesini kullanmayın — bu hem anlamlı olmaz hem de garip sonuçlara neden olabilir. - Altı başlık seviyesi içerisinden üçten fazlasını kullanmamaya özen gösterin – tabi zorunda değilseniz. Çok fazla seviyesi olan belgeler bir süre sonra okunmakta zorluk çıkarır. Bu durumlarda içeriği ikiye bölmeyi düşünebilirsiniz.
Neden sayfa yapısına ihtiyacımız var?
Bu soruya cevap vermek için bir örneğe bakalım – text-start.html. Bu örnek bu yazı için bir başlangıç noktası olacak. Örneğin bir kopyasını yerel bilgisayarınıza kaydedin. Bu belgenin body kısmı birden fazla metin içerir ve bunlar herhangi bir HTML yapılandırması ile ayrılmamıştır. Sadece satır boşlukları bulunur – (enter’a bastığımız zaman elde ettiğimiz satır boşlukları)
Ancak, bu belgeyi tarayıcınızda açarsanız aşağıdaki gibi görürsünüz, kocaman ve bölünmemiş bir paragraf.
Bunun sebebi bu dökümana bir yapı kazandıracak öğelerin olmaması. Bu yüzden tarayıcımız ne yapacağını bilemiyor ve her şeyi bir paragraf gibi gösteriyor. Peki bu neden önemli:
- Kullanıcılar bir web sayfasına bakarken genellikle aradıkları içeriği bulmaya çalışırlar ve başlıklara bakarlar. ( Genellikle sayfalarda çok kısa bir süre geçiririz.) Eğer yararlı bir içeriği birkaç saniye içerisinde bulamazlarsa muhtemelen yorulurlar ve başka bir yere giderler.
- Arama motorları sayfalarınızı indekslerken başlıkları önemli anahtar kelimeler olarak değerlendirirler, bu da sayfanızın arama motorlarındaki sıralamasını etkiler. Başlıklar olmadığında sayfanız SEO (Search Engine Optimization, Arama Motoru Optimizasyonu) bakımından muhtemelen daha kötü olacaktır.
- Önemli derecede görme bozukluğu olan ziyaretçiler genellikle sayfaları okumazlar, dinlerler. Bunu da ekran okuyucusu adı verilen uygulamalar ile gerçekleştirirler. Bu uygulamalar istenilen içeriğe hızlı bir şekilde ulaşmayı da sağlarlar. Kullanılan tekniklerden birisi belgenin bir taslağını oluşturmaktır. Taslak da, tahmin ettiğiniz gibi, başlıklar üzerinden oluşturulur. Böylece ziyaretçiler istenilen içeriği hızlı bir şekilde bulabilir. Eğer başlıklar yoksa ziyaretçiler başlıkları dinlemek yerine tüm metni dinlemek zorunda kalırlar.
- İçeriği CSS ile biçimlendirmek, veya JavaScript ile ilginç özellikler katmak için HTML öğelerine ihtiyaç duyarsınız.
Bu nedenle metnimizi yapısal olarak bir forma sokmamız gerekir.
Neden anlam bilgisine ihtiyacımız var?
Anlam bilgisi hayatımızın her yerinde karşımızdadır – bir şey gördüğümüzde, duyduğumuzda, hissettiğimizde o şeyin bize verdiği anlamı da değerlendiririz. Örneğin trafik ışıklarında gördüğümüz kırmızı ışık bize durmamızı söyler, yeşil ışık ise yola devam edebileceğimizi. Bunun yanında yanlış bir anlam çıkarımında bulunursak da işler kolayca sarpa sarar – kırmızı ışıkta geçmek bizi trafik kazası riskine açık hale getirecektir.
Benzer şekilde, web sayfalarımızda da doğru öğeleri kullanmamız, doğru anlam, fonksiyon ve görünümü kazandırır. Mesela, <h1> öğesi metindeki başık seviyesini niteler ve anlam bilgisi olarak da hiyerarşide en üst seviyedeki öğe olduğunu belirtir.
<h1>This is a top level heading</h1>Varsayılan olarak tarayıcılar başlıklara daha büyük font boyutu vererek bu blokların başlık olduklarını göstermeye çalışırlar.
Diğer taraftan, her öğenin başlık gibi görünmesi de sağlanabilir:
<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>Yukarıdaki örnek bir <span> öğesi içerir. Sayfada belirli bir anlamı yoktur. Sardığı metne bir CSS eklemek istersek kullanırız. Bu span öğesine eklediğimiz CSS bu öğeyi bir başlık gibi gösterir. Her ne kadar bir anlam bilgisi olmasa da görünüşte başlık gibi davranır. Ancak yukarıda bahsettiğimiz semantik özellikleri taşımaz. Dolayısıyla doğru iş için doğru öğeyi kullanmak önemlidir.
Listeler
Şimdi dikkatimizi listelere döndürelim. Listeler hayatımızda her yerdeler – alışveriş listesinden bu yazıdaki izlediğimiz talimatlara kadar. Listeler webde de her yerdeler. Üç tip liste bulunur:
Sıralanmamış
Sıralanmamış listeler sıralamanın önemli olmadığı zaman kullanacağımız öğelerdir. Mesela bir alışveriş listesi oluşturmak istersek sıralanmamış listeleri kullanabiliriz:
milk eggs bread hummus
Her sıralanmamış liste <ul> öğesi ile başlar — bu öğe tüm listeyi baştan sonra sarar:
<ul>
milk
eggs
bread
hummus
</ul>Bununla birlikte listedeki her madde de <li> öğesi ile sarılır:
<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
<li>hummus</li>
</ul>Sıralanmış
Sıralanmış listeler sıralamanın önemli olduğu durumlarda kullanılır. Örneğin bir yol tarifinde izleyeceğimiz sıralama gideceğimiz yere ulaşmamız için önemlidir:
Drive to the end of the road Turn right Go straight across the first two roundabouts Turn left at the third roundabout The school is on your right, 300 meters up the road
Biçimlendirme yöntemi sıralanmamış listelerdekine benzer. Sadece burada <ul> yerine <ol> öğesini kullanırız.
<ol>
<li>Drive to the end of the road</li>
<li>Turn right</li>
<li>Go straight across the first two roundabouts</li>
<li>Turn left at the third roundabout</li>
<li>The school is on your right, 300 meters up the road</li>
</ol>İç içe listeler
Bir listeyi başka bir liste içinde kullanmamızda bir sorun bulunmuyor. Örneğin alt maddeleri olan kapsamlı bir liste oluşturmak isteyebilirsiniz. Yemek tarifi örneğimize bakalım:
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.</li>
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
<li>If you want a smooth hummus, process it for a longer time.</li>
</ol>Burada birkaç madde birbiriyle ilgili olduğu için bunları gruplayıp alt maddeler olarak yazalım. Bu şekilde okunduğunda alt-tarifler olarak anlaşılsın. Dolayısıyla üst listenin içine bir liste daha oluşturup listemizi düzenliyoruz:
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
<li>If you want a smooth hummus, process it for a longer time.</li>
</ul>
</li>
</ol>Vurgu ve önem
İnsan dilinde kullandığımız kelimelere vurgu veririz. Bu şekilde önem verdiğimiz noktanın karşı tarafta da anlaşılmasını sağlarız. HTML benzer şekilde vurgu sağlayabileceğimiz birkaç semantik öğe içerir. Şimdi bu öğelere bakalım
Önem
Konuşma dilinde bir noktanın önemini belirtmek istediğimizde bazı kelimeleri vurgularız – bu şekilde anlamı bir miktar değiştiririz. Benzer şekilde yazılı dilde bazı kelimeleri vurgulamak için yatık olarak yazarız. Örneğin aşağıdaki iki cümle farklı anlamlar taşır:
Geç kalmadığın için memnunum.
Geç kalmadığın için memnunum.
İlk cümle doğal bir şekilde karşısındaki kişinin geç kalmadığı için memnun olduğunu belirtir. İkinci cümle ise sarkastik veya pasif-agresif bir ton kullanarak rahatsızlık ifade eder.
HTML’de <em> (emphasis-önem) öğesi ile benzer vurgulamaları yapabiliriz. Bu öğeler okumayı daha kolaylaştırmasının yanı sıra ekran okuyucularının da metni farklı bir tonda okumalarını sağlar. Tarayıcılar varsayılan olarak yatık yazı kullanır ama bu etiketi sadece yatık yazı için kullanmamıza gerek yok. Eğer sadece yatık yazı isteseydik yukarıda yaptığımız gibi bir <span> öğesine CSS uygulayabilirdik. Ya da bir <i> öğesi kullanırdık.
<p><em>Geç</em> kalmadığın için <em>memnunum</em>.</p>Güçlü önem
Önemli kelimeleri vurgulama için yazılı dilde kalın kelimeler kullanmayı tercih ederiz. Örneğin:
Bu içecek oldukça zehirlidir.
Sana güveniyorum. Sakın geç kalma!
HTML’de <strong> etiketiyle benzer etkiyi veririz. Yukarıda olduğu gibi, yazıdaki bu etkinin yanında ekran okuyucuları bu metinleri farklı bir tonda okur. Tarayıcılar ise varsayılan olarak bu kelimeleri kalın gösterirler. Ancak yine yukarıda söylediğimiz gibi bu etiketleri sadece benzer etkiyi vermek için kullanmamıza gerek yok. Bu etki için bir <span> etiketine CSS uygulayabiliriz, ya da <b> etiketini kullanırız.
<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>İki etkiyi iç içe kullanmamız da mümkün:
<p>Bu içecek <strong>oldukça zehirli</strong> —
Eğer <strong>içersen, <em>ölebilirsin</em></strong>.</p>Yatık, kalın, altı çizili
Buraya kadar öğrendiğimiz öğeler için anlam bilgisi vardı. Ancak bu durum <b>, <i>, ve <u> için biraz daha karışık. Bu öğeler insanlar kalın, yatık ve altı çizili yazabilsinler diye üretilmişlerdi ve o dönemde CSS hala etkin bir şekilde desteklenmiyordu. Sadece görünüme yönelik değişiklikler yapan, ve anlam bilgisine dokunmayan bu tür öğelere görünüm öğeleri adı verilir ve bu öğelerin artık kullanılması tavsiye edilmez. Çünkü anlam ulaşılabilirlikte çok önemlidir – SEO.
HTML5 <b>, <i>, ve <u> için yeni ama hala karışık anlam özellikleri kazandırdı.
Sonuç olarak <b>, <i>, veya <u> öğelerini geleneksel olarak kalın, yatık veya altı çizili görünüm vermek için kullanabiliriz. Ancak, ulaşılabilirliği de göz önünde bulundurmak gerekir. Yatık yazı konsepti ekran okuyucuları için veya Latin alfabesi dışındaki bir yazı sistemi kullanan ziyaretçilerimiz için pek anlamlı olmayacaktır.
<i>geleneksel olarak yatık yazı görünümünü göstermek için kullanılır: yabancı kelimeler, terim ifadeleri veya düşünceler…<b>kalın metin oluşturmak için kullanılır: anahtar kelimeler, ürün isimleri, giriş cümleleri…<u>altı çizili yazılar için kullanılır: doğru veya yanlış yazılışı göstermek için…
Altyazı ile ilgili önemli bir uyarı yapmak da fayda var: Ziyaretçiler altyazıyı link ile karıştırabilirler. Bu yüzden webde altyazıyı sadece link öğelerine bırakmak iyi olacaktır. Gerektiğinde <u> öğesini kullanabilirsiniz ancak CSS kullanarak varsayılan alt çizgiyi web için daha anlamlı hale getirmeyi de aklınızda bulundurun. Aşağıdaki örneği tarayıcınızda inceleyebilirsiniz:
<!-- scientific names -->
<p>
The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
is the most common hummingbird in Eastern North America.
</p>
<!-- foreign words -->
<p>
The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
<i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>
<!-- a known misspelling -->
<p>
Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
</p>
<!-- Highlight keywords in a set of instructions -->
<ol>
<li>
<b>Slice</b> two pieces of bread off the loaf.
</li>
<li>
<b>Insert</b> a tomato slice and a leaf of
lettuce between the slices of bread.
</li>
</ol>Öğrendiklerinizi test edin!
Bu yazının da sonuna geldik. Bu yazıda öğrendiğimiz en önemli bilgiyi hatırlıyor musunuz?
Özet
Şimdilik bu kadar. Bu yazı size HTML’de biçimlendirmenin ne anlama geldiği ile ilgili bir fikir verdi ve bir takım HTML öğelerini tanıttı. Bu bölümde görülecek daha çok fazla semantik öğe olduğunu unutmayın. Bunlara advanced text formatting makalesinde göz atabilirsiniz.