HTML Biçimlendirme Etiketleri

HTML biçimlendirme varsayılan olarak CSS özelliklerine sahip etiketlerden oluşuyor.

Web sayfaları içerisindeki paragraf, kelime veya harfler CSS yardımı biçimlendirilebilir (altını çizmek, kalınlaştırmak, İtalik yapmak…), aynı zamanda HTML mimarisinde varsayılan olarak bu özelliklere sahip HTML biçimlendirme etiketleri de bulunuyor;

Kalın Yazı Etiketleri <b> & <strong>

<b> Etiketi

<b> (bold) etiketi kullanımında internet tarayıcıları görsel olarak web sitesi ziyaretçilerine etiket arasında bulunan metni kalın ve siyah olarak gösterir, web sitesi ziyaretçilerinin dikkatini çekmek için kullanılır, tarayıcı tarafına kelimenin ya da metnin önemini vurgulamaz.

Başlıklarda <b> etiketinin kullanımı gereksizdir, bunun yerine heading etiketleri (h1, h2, h3, h4, h5, h6) kullanılmalıdır.

<b> etiketine class atanıp çok kullanım tercih edilmeyecekse, <b> etiketini kullanmak yerine CSS ayarlarından metin kalınlaştırılabilir.

Kullanım:

<p>Web sitesi içeriğinin başlıklarında <b>bold</b> etiketi yerine heading etiketleri kullanılmalıdır.</p>

Tarayıcı Görünümü:

Web sitesi içeriğinin başlıklarında bold etiketi yerine heading etiketleri kullanılmalıdır.

<strong>

<strong> etiketi kullanıldığında internet tarayıcıları <b> etiketinde olduğu gibi web sitesi ziyaretçilerine <strong> etiketi arasında kalan metni kalın ve siyah olarak gösterir, tarayıcı tarafında metnin önemini vurgular.

Kullanım:

<p><strong>Strong etiketi</strong> metnin önemini vurgular.</p>

Tarayıcı Görünümü:

Strong etiketi metnin önemini vurgular.

<b> ve <strong> Etiketi Farkı

<b> etiketi genel anlamda tarayıcıların görsel olarak metni kalınlaştırmasına yardımcı olurken, <strong> etiketi tarayıcıya tüm sayfa içeriğiyle alakalı metnin öneminin vurgulanmasına yardımcı olur.

Bu iki etiketin web sitesi ziyaretçilerine aynı görüntüyü, siyah ve kalın metni sunar fakat asıl fark tarayıcı tarafındadır. <b> etiketi kullanmak yerine CSS ile metnin font ayarlarıyla oynanarak aynı görüntü verilebilir fakat <strong> etiketi önem belirttiği için bu etiket yerine CSS ayarlarının tercihi aynı sonucu vermez.

SEO açısından bakılacak olduğunda da <b> etiketi yerine <strong> etiketi kullanılmalıdır.

Alt Çizgi Etiketi <u>

<u> (underline) etiketi metin içerisinde herhangi bir bölümü vurgulamak ve dikkat çekmek amacıyla kullanılır.

Kullanım:

<p><u>Underline etiketi</u> arasında kalan metin tarayıcıda altı çizili olarak görünür.</p>

Tarayıcı Görünümü:

Underline etiketi arasında kalan metin tarayıcıda altı çizili olarak görünür.

İtalik Etiketleri <i> & <em> & <cite> & <var>

<i>

HTML i etiketi (<i> İtalic) etiketi kullanımında adından da anlaşıldığı gibi metni İtalik şekilde gösterir. Genel olarak biyolojik latince terimleri belirtirken ve teknik terimleri belirtirken kullanılır.

<b> etiketi gibi yalnızca görsel olarak sunum yapmaz, daha çok <i> etiketinin arasından kalan metni tarayıcıya belirtir.

Kullanım:

<p><i>Proxy</i> sunucuları trafiği denetler ve yönlendirir.</p>

Tarayıcı Görünümü:

Proxy sunucuları trafiği denetler ve yönlendirir.

<em>

<em> (emphasis) etiketi kullanıldığında <i> etiketi gibi metni İtalik olarak gösterir. Emphasis kelimelerinin baş harflerinden türetilen bu etiket adından da anlaşılacağı gibi vurgu yapmak için kullanılır.

Emphasis <em> etiketi sayfa içerisinde uzun metni işaretlemekten ziyade daha çok içerik ile alakalı kelimelere vurgu yapmak için kullanılır.

İtalik görünüm verme amacıyla <em> etiketinin kullanılması anlamsızdır, bunun yerine CSS ayarlarından fontun İtalik görünümü tercih edilebilir.

Kullanım:

<p><em>Emphasis</em> etiketi içeriğin vurgusunu yapmak için kullanılır.</p>

Tarayıcı Görünümü:

Emphasis etiketi içeriğin vurgusunu yapmak için kullanılır.

<i> ve <em> Farkı

<i> etiketi yabancı bir kelimeyi veya teknik bir ifadeyi temsil ederken, <em> etiketi içeriği vurgulayan kelimeyi temsil eder. Her ikisi de görsel olarak web sitesi ziyaretçilerine aynı görünür fakat durum tarayıcı tarafında farklıdır.

<cite>

Cite (citation element) etiketi kitap, şarkı, şiir veya filmden bahsederken, bahsedilen eserin adını belirtmek için kullanılır.

İnternet tarayıcıları <cite> etiketi içerisinde bulunan metni İtalik olarak gösterir fakat bu etiketin asıl amacı tabiki İtalik yazı fontu olarak kullanılmak değildir.

Kullanım:

<p><cite>The Lord of the Rings</cite> by J.R.R Tolkien.</p>

Tarayıcı Görünümü:

The Lord of the Rings by J.R.R Tolkien.

<var>

<var> (variable) etiketi değişkenleri sayfa içerisinde belirtirken kullanılır, <var> etiketi içerisinde bulunan değişkenler varsayılan olarak italik görünür.

Matematik, fizik gibi bilim dallarının formülleri belirtilirken değişkenler <var> etiketi içerisinde gösterilir.

Kullanım:

<p><var>E</var>=<var>m</var><var>c<sup>2</sup></var></p>

Tarayıcı Görünümü:

E=mc²

<address>

<address> etiketi adından da anlaşıldığı gibi adres belirtirken kullanılmalıdır. Tarayılar tarafından İtalik olarak gösterilir fakat italik görünümü vermek için <address> etiketini kullanmak hatalı kullanım olur.

Kullanım:

<p>Google Genel Merkezi</p><address>1600 Amphitheatre Parkway Mountain View, CA 94043, ABD</address>

Tarayıcı Görünümü:

Google Genel Merkezi

Metnin Üzerini Çizen Etiketler

<s>

<s> (strikethrough) üstü çizili etiketi kullanımında internet tarayıcıları <s> etiketi arasında kalan metni üzeri çizili olarak gösterir.

Öncesinde yazılmış olan ve artık önemi kalmayan bir ibarenin üzerini çizmek için kullanılabilir.

Kullanım:

<p><s>Stoktaki ürünler %50 indirimle!</s>Stok Yok!</p>

Tarayıcı Görünümü:

Stoktaki ürünler %50 indirimle!
Stok Yok!

<del>

<del> (delete) etiketi kullanıldığında <s> etiketine benzer şekilde internet tarayıcıları tarafından <del> etiketi arasında kalan metni üzeri çizili olarak gösterir.

Metnin bir bölümünün silindiğini temsil eder fakat çok fazla kullanımda olan bir etiket değildir.

Kullanım:

<p>HTML bir <del>programlama</del> işaretleme dilidir.</p>

Tarayıcı Görünümü:

HTML bir programlama işaretleme dilidir.

<mark>

<mark> etiketi metin içerisinde işaretlenmek istenen belirli bir alan için kullanılır, varsayılan olarak <mark> etiketi içinde bulunan metnin arkaplan rengi sarı olarak işaretlenir.

<strong> etiketi gibi içeriğin öneminin vurgulamaz, <mark> etiketi renk farkı ile web sitesini ziyaret eden kişiye belirlenen alanı göstermek için kullanılır.

Kullanım:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Tarayıcı Görünümü:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<small>

Normalde tarayıcıların varsayılan font büyüklüğü <p> etiketi için 16px’dir. <small> etiketinin kullanımında <small></small> etiketinin arasında kalan metnin font büyüklüğü 13.3333px olarak değişir.

CSS ile aynı görünüm kazandırılabildiği için çok tercih edilen bir etiket değildir.

Kullanım:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</small> 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Tarayıcı Görünümü:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alt ve Üst İfadeler

<sub> Etiketi

<sub> (subscript), alt simge etiketi kullanımında  etiketi arasında kalan kısım tarayıcı tarafında alt simge olarak gösterilir. Kimyada moleküllerin atom sayılarını belirtirken veya matematikte dizileri belirtirken kullanılabilir.

Kullanım:

<p>Yaşamın kaynağı olan suyun formülü H<sub>2</sub>O'dur.</p>

Tarayıcı Görünümü:

Yaşamın kaynağı olan suyun formülü H₂O’dur.

<sup> Etiketi

<sup> (superscript), üst simge etiketi kullanımında  etiketi arasında kalan kısım tarayıcı tarafında üst simge olarak gösterilir. Matematikte üstel ifadelerin gösteriminde ve dillerde sıralama belirtirken kullanılır.

Kullanım:

<p>(a-b)<sup>2</sup> =a> <sup>2</sup> -2ab +b<sup>2</sup></p><p>5<sup>th</sup></p>

Tarayıcı Görünümü:

(a-b)² = a² -2ab +b²

5^th

Heading Etiketleri

HTML yapısında bulunan 6 adet başlık etiketinin (h1,h2,h3,h4,h5,h6) her biri etiketin arasında kalan bölümü tarayıcıya farklı font büyüklüğünde yansıtıyor. H1’den H6’ya doğru gittikçe etiketin önemi ve font büyüklüğü azalıyor.

<h1> Etiketi

H1 etiketi heading etiketlerinden en büyük fonta sahiptir. Tarayıcılar tarafından <h1> etiketi arasında kalan başlık varsayılan olarak 32px olarak gösterilir.

<h2> Etiketi

Varsayılan font büyüklüğü 24px.

<h3> Etiketi

Varsayılan font büyüklüğü 18.72px.

<h4> Etiketi

Varsayılan font büyüklüğü 16px.

<h5> Etiketi

Varsayılan font büyüklüğü 13.28px.

<h6> Etiketi

Varsayılan font büyüklüğü 10.72px.

Kullanım:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Tarayıcı Görünümü: