Biçimlendirme ve Vurgulama Etiketleri

Bugün HTML'nin birçok temel etiketini ele alacağız. Bu etiketler, web sayfalarınızda metin düzenleme, vurgulama ve farklı görseller oluşturmanıza yardımcı olur. br, hr, b, strong, em, mark, sup, sub, i gibi etiketleri nasıl kullanacağınızı öğrenmek, içeriklerinizi zenginleştirecektir.

1. `br`: Satır Sonu (Line Break)

Nedir?

br, içeriğin bir sonraki satıra geçmesini sağlar.
Kapanış etiketi yoktur, şu şekilde kullanılır: <br>.

Kullanım Örneği:

<p>
  Göklerde kartallar süzülür<br>
  Denizler dalgalanır durur<br>
  Ufuklar sonsuz bir yol<br>
</p>

Sonuç:

Her bir br etiketi metni bir alt satıra taşır.

2. `hr`: Yatay Çizgi (Horizontal Rule)

Nedir?

hr, içerik arasında bir yatay çizgi oluşturur ve görsel bir ayrım sağlar.
Kapanış etiketi yoktur, şu şekilde kullanılır: <hr>.

Kullanım Örneği:

<h1>Başlık</h1>
<hr>
<p>Bu bir paragraftır.</p>

Sonuç:

Başlık ile paragraf arasında bir yatay çizgi görünür.

3. `b`: Kalın Metin (Bold)

Nedir?

b, metni kalın yapar, ancak semantik bir vurgu taşımaz.
Görsel olarak önemli göstermek istediğiniz metinler için kullanılır.

Kullanım Örneği:

<p>Bu bir <b>kalın</b> metindir.</p>

Sonuç:

"kalın" kelimesi kalın görünür.

4. `strong`: Güçlü Vurgu (Strong Emphasis)

Nedir?

strong, metni kalın yapar ve önemli bir vurgu ifade eder.
Ekran okuyucular tarafından genellikle daha güçlü okunur.

Kullanım Örneği:

<p>Bu bir <strong>önemli</strong> kelimedir.</p>

Sonuç:

"önemli" kelimesi kalın görünür ve anlamlı bir vurgu taşır.

5. `em`: Vurgu (Emphasis)

Nedir?

em, metni italik yapar ve anlamlı bir vurgu ifade eder.
Ekran okuyucular bu metni vurgulu bir tonda okuyabilir.

Kullanım Örneği:

<p>Bu metnin <em>vurgulu</em> bir kısmı var.</p>

Sonuç:

"vurgulu" kelimesi italik görünür ve semantik vurgu taşır.

6. `mark`: Vurgulanmış Metin (Highlight)

Nedir?

mark, metni vurgulamak için kullanılır ve genellikle sarı bir arka plan rengi ekler.

Kullanım Örneği:

<p>Bu metnin <mark>vurgulanmış</mark> bir kısmı var.</p>

Sonuç:

"vurgulanmış" kelimesi sarı arka planla öne çıkar.

7. `sup`: Üst Simge (Superscript)

Nedir?

sup, metni yükseltilmiş bir şekilde, yani üst simge olarak gösterir.
Matematiksel ifadeler ve referanslar için kullanılır.

Kullanım Örneği:

<p>E=mc<sup>2</sup></p>

Sonuç:

"mc²" formülü, "2" üst simge olarak görünür.

8. `sub`: Alt Simge (Subscript)

Nedir?

sub, metni alçaltılmış bir şekilde, yani alt simge olarak gösterir.
Kimyasal formüller için idealdir.

Kullanım Örneği:

<p>H<sub>2</sub>O, sudur.</p>

Sonuç:

"H₂O", "2" alt simge olarak görünür.

9. `i`: İtalik Metin (Italic)

Nedir?

i, metni italik yapar.
Semantik bir vurgu taşımaz; genellikle yabancı kelimeler, terimler veya teknik ifadeler için kullanılır.

Kullanım Örneği:

<p>Bu bir <i>italik</i> kelimedir.</p>

Sonuç:

"italik" kelimesi italik görünür.

Kapsamlı Örnek

<h2>Çeşitli HTML Etiketleri</h2>
<p>
  Göklerde kartallar süzülür<br>
  Denizler dalgalanır durur<br>
  <hr>
  <b>Bu bir kalın metindir</b>, ancak <strong>bu çok önemli bir metindir</strong>.
  <br>
  <em>Bu italik bir vurgu</em>, <i>bu ise normal bir italik kelime</i>, 
  <mark>bu da vurgulanmış bir metin</mark>.<br>
  Einstein'ın formülü: E=mc<sup>2</sup><br>
  Su formülü: H<sub>2</sub>O
</p>

Sonuç:

Metinler farklı görsel ve semantik özelliklerle düzenlenir.
Her etiket, kendine has bir stil veya anlam katar.

Özet

Etiket	Amaç
`br`	Satır sonu eklemek.
`hr`	Yatay çizgi oluşturmak.
`b`	Metni kalın yapmak (vurgusuz).
`strong`	Metni kalın yapmak ve önemli olduğunu vurgulamak.
`em`	Metni italik yapmak ve vurgu eklemek.
`mark`	Metni vurgulamak için arka plan rengi eklemek.
`sup`	Metni üst simge olarak göstermek.
`sub`	Metni alt simge olarak göstermek.
`i`	Metni italik yapmak (vurgusuz).

Sonuç

En çok kullanılan HTML etiketleri genellikle biçimlendirme (ör. br, hr, b, i) ve vurgulama (ör. strong, em, mark, sup, sub) için tercih edilen etiketlerdir. Projelerin amacına bağlı olarak bu etiketler esnek bir şekilde kullanılabilir, ancak erişilebilirlik ve okunabilirlik ilkelerine de dikkat etmek önemlidir.

İçindekiler

Etiketler

HTML Karakter Kodları (Entity Codes)

İlgili Yazılar

HTML: Web Sayfalarının Temel Yapı Taşı

HTML'de Paragraf Etiketi (P Tag)

HTML Başlık Etiketleri (H1-H6)

HTML İskeleti ve Boilerplate

HTML’de Listeler: Ordered List (OL) ve Unordered List (UL)

HTML Anchor (Bağlantı) Etiketi