İçerik-tabanlı metin biçimlendirme, metnin nasıl görüntülendiğinin aksine, metni anlamına göre işaredemek için HTML etikederi kullanmayı içerir. İçerik-tabanlı biçimlendirme kullanma arzusu, metin içeriğinin çeşitli şekillerde görülebilmesidir. Örneğin, Web sayfası içeriğini ekranda görüntülemek yerine yüksek sesle okuyan, görme özelliği zayıf insanlar için Web tarayıcıları olasılığını düşünün. Bu senaryoda bir vurgu (emphasis) (<em>) etiketi, bir koyu (bold) (<b>) etiketinden daha anlamlıdır, çünkü vurgu, okurken metin üzerine yerleştirilebilir. Fakat koyu etiketinin, metnin görünümü dışında bir anlamı yoktur. Sonuç olarak, mümkün olduğunca fiziksel etikeder üzerinde içerik-tabanlı etikeder kullanmanız gerekir. HTML içerik-tabanlı biçimlendirme etikederinin, kısa açıklamaları ile kullanımları şöyledir: • <cite>-bir kitap ya da magazin makalesi başlığı gibi bir kaynak alıntıyı tanımlar • <code>-programlama kodu gibi tek boşluklu kodu tanımlar • <dfn>—bir çevrimiçi sözlükte belirebilecek tanımlamaları belirtir • <em>-metne vurgu ekler • <kbd>—bir klavyede yazılan metni tanımlar • <samp>—alfabetik karakterlerin bir sırasını belirler • <strong>—metne güçlü bir vurgu ekler • <var>—programlama kodu gibi kod içindeki değişkenleri tanımlar Tüm bu etikeder, hem başlangıç hem de bitiş etikederi ile metin içeriğini kuşatırlar. Aşağıdaki, bir metin cümlesini işaredemek için <em> ve <strong> etikederini kullanmanın bir örneğidir:
<P> The collapse of the market came as. an <em>enormous</em> surprise to many, and delivered a <strong>crushing</strong> blow to many individual portfolios. </p>
Şekil 2-2, Internet Explorer’in, <em> metnini italik ve <strong> metnini koyu görüntülemesini örnekleyerek bu kodun sonuçlarını göstermektedir.
Not
İçerik-tabanli biçimlendirme etiketlerinin metni biçimlendirmek için yararlı olduklarını belirtmeme rağmen, onlan resimleri biçimlendirmek için de kullanabilirsiniz. Vurgu, içeriğin anlamında olduğundan, resmin sayfadaki diğer içeriğe göre daha güçlü bir anlamı olduğunu belirtmek için, resmi <strong> etiketi ile işaredeyebilirsiniz. Resimlerin nasıl kullanılacağını, Bölüm 3 “Sayfalan Resimler ile Süslemek”de öğreneceksiniz