Biçimlendirme etiketleri metinleri özel bir anlamla tanımlamak için kullanılır. Bazen yazının bir kısmının önemini anlatmak için kalın veya italik bir biçimde yazılmasını isteriz. Bu gibi durumlarda html metin biçimlendirme etiketlerini kullanırız. Yazının kalın veya italik yazılmasını istediğimiz kısmı metin biçimlendirme etiketleri içine alarak yaparız.
1. <b> etiketi kalın karakterler oluşturmak için kullanılır. Kod ile yazılmış hali ve sonucunu görelim.
<p>Lorem <b>ipsum</b> dolor sit amet.</p>Sonucu: Lorem ipsum dolor sit amet.
2. <i> etiketi ise italik metinler tanımlar.
<p>Lorem <i>ipsum</i> dolor sit amet.</p>Sonucu: Lorem ipsum dolor sit amet.
3. <strong> etiketi görsel olarak <b> etiketiyle aynı sonucu verir. Ancak <strong> etiketi metnin önemli olduğunu vurgular. SEO açısından önemli olduğunu düşündüğümüz kelimeleri <strong> etiketi içine almamız gerekir. Örnek ile kod kısmını ve sonucunu görelim.
<p>Lorem <strong>ipsum</strong> dolor sit amet.</p>Sonucu: Lorem ipsum dolor sit amet.
4. <em> etiketi görsel olarak <i> etiketiyle aynı sonucu verir. Ancak <em> etiketi metnin önemli olduğunu vurgular. SEO açısından önemli olduğunu düşündüğümüz kelimeleri <strong> etiketi içine almamız gerekir. Örnek ile kod kısmını ve sonucunu görelim.
<p>Lorem <em>ipsum</em> dolor sit amet.</p>Sonucu: Lorem ipsum dolor sit amet.
Aşağıda html sayfasında ayrı ayrı ve ikisininde aynı satırda kullanımı ile ilgili kod örneği ve sonucu:
See the Pen XwBQyq by zekeriya (@mutluzekeriya) on CodePen.
Not: Sitemize mobil den giriş yapıyorsanız hem kod kısmı hemde web sayfasında sonucu yanyana göremeyebilirsiniz. Örnekteki üst kısımda “HTML” yazan butona bastığınızda kod kısmını “Result” butonuna bastığınızda web sayfasındaki sonucunu görürsünüz.
Yazının font ayarları (büyüklüğü, rengi vb…) <font> etiketi ile yapılıyordu. Html5 ile artık yazının font ayarları CSS kısmında yapılıyor. Bu konuya CSS derslerimizde değineceğiz.
5. <sub> etiketi alt metin tanımlar. Yani yazının normal satır seviyesinin biraz altında yazılmasını sağlar.
6. <sup> etiketi üst metin tanımlar. Yani yazının normal satır seviyesinin biraz üstünde yazılmasını sağlar.
<sub> ve <sup> etiketine html kod kısmında örnek yazalım ve sonucunu görelim:
See the Pen jovEQB by zekeriya (@mutluzekeriya) on CodePen.
7. <small> etiketi küçük metin tanımlar. Genelde footer kısmında kullanılır.
<p>
<small> Tasarım ve Yazılım Copyright © 2019. </small>
</p>8. < mark > etiketi yazılarda istediğiniz yeri işaretli yapmanızı sağlar. Bu etiket içine alınan metnin üzeri sarı renge boyanır.
<p> Yazıda istediğimiz yeri <mark> işaretli </mark> yapabiliriz.</p>9. < del > etiketi silinen metni tanımlar. Silinen den kasıt <del> etiketi içine alınan metnin üzerini çizer.
<p> Yazıda istediğimiz yeri <del> silenen metin </del> yapabiliriz.</p>10. < ins> etiketi eklenen metni tanımlar. Burada <del> etiketi içine alınan metnin altını çizer.
<p> Yazıda istediğimiz yeri <del> eklenen metin </del> yapabiliriz.</p>11. < hr> etiketi ise yatayda çizgi oluşturmada kullanılır.
Özetlemek gerekirse html metin biçimlendirme etiketleri:
<b>– Kalın yazı<strong>– Önemli metin<i>– eğik yazı<em>– Vurgulanan metin<mark>– İşaretli metin<small>– Küçük metin<del>– Silinmiş metin(üzeri çizilmiş metin)<ins>– Eklenmiş metin(altı çizili metin)<sub>– Alt simge metni<sup>– Üst simge metni- <hr> – yatayda çizgi
Başka bir yazımızda görüşmek üzere… …
