Html Ders 2 – Başlık, Paragraf ve Metin Biçimlendirme

Başlık Etiketleri (<h1> – <h6>)

Başlık etiketleri, web sayfasındaki içeriğin hiyerarşik yapısını oluşturmak için kullanılır. <h1> en önemli başlığı (genellikle sayfa başlığı) temsil ederken, <h6> en az önemli başlığı temsil eder.

  • Kullanımı: İçeriğinizin bölümlerini ve alt bölümlerini tanımlamak için başlık etiketlerini kullanın. Sayfanızın yapısını düzenli tutmak ve kullanıcıların içeriği daha kolay anlamasına yardımcı olmak için önemlidir.
  • SEO (Arama Motoru Optimizasyonu) Açısından Önemi: Arama motorları, sayfa içeriğini anlamak için başlık etiketlerini kullanır. <h1> etiketi genellikle sayfanın ana konusunu belirtir ve arama sonuçlarında daha yüksek sıralamalar elde etmek için önemlidir.
  • Görsel Farklılıklar: Tarayıcılar, farklı başlık seviyelerini varsayılan olarak görsel olarak farklılaştırır (büyük/küçük yazı tipi boyutları, kalınlaştırma vb.). Ancak bu görünümleri CSS ile özelleştirebilirsiniz.

Örnek:

HTML
<h1>Web Geliştirme Temelleri</h1>
<h2>HTML'ye Giriş</h2>
<h3>Etiketler ve Elemanlar</h3>
<h4>Metin Biçimlendirme</h4>
<h5>Başlık Etiketleri</h5>
<h6>Alt Başlıklar</h6>

Paragraf Etiketi (<p>)

<p> etiketi, bir paragrafı tanımlar. Web sayfalarındaki metin içeriğini paragraflara ayırmak için kullanılır.

  • Kullanımı: Uzun metin bloklarını daha okunabilir hale getirmek için paragrafları kullanın. Her paragraf genellikle tek bir fikir veya konuyu ele alır.
  • Boşluklar ve Satır Sonları: HTML, boşlukları ve satır sonlarını otomatik olarak işler. Paragraflar arasındaki boşluğu artırmak için <br> (satır atlama) etiketini kullanmaktan kaçının; bunun yerine CSS kullanarak boşluk ekleyin.

Örnek:

HTML
<p>Bu bir paragraf örneğidir. HTML'de paragrafları tanımlamak için kullanılır ve metin içeriğini daha okunabilir hale getirir.</p>
<p>İkinci bir paragraf örneği. Paragraflar, uzun metin bloklarını bölümlere ayırmamıza yardımcı olur.</p>

Metin Biçimlendirme Etiketleri

Bu etiketler, metnin görünümünü değiştirmek için kullanılır.

  • <strong>: Metni önemli veya dikkat çekici olduğunu belirtmek için kullanır. Genellikle kalın (bold) olarak görüntülenir. Semantik olarak “önemli” anlamına gelir.
  • <em>: Metni vurgulamak için kullanır. Genellikle italik (italic) olarak görüntülenir. Semantik olarak “vurgu” anlamına gelir.
  • <b>: Metni kalın (bold) yapar. Sadece görsel bir değişikliktir, semantik anlamı yoktur. <strong> etiketi yerine kullanılmamalıdır.
  • <i>: Metni italik yapar. Sadece görsel bir değişikliktir, semantik anlamı yoktur. <em> etiketi yerine kullanılmamalıdır.
  • <mark>: Metnin belirli bir bölümünü vurgulamak için kullanılır (örneğin, arama sonuçlarında bulunan kelimeler). Genellikle sarı arka planlı olarak görüntülenir.
  • <small>: Metni daha küçük boyutlu gösterir. Alt yazı veya dipnotlar gibi amaçlar için kullanılabilir.
  • <del>: Silindiğini belirtmek için metin üzerinde kullanılır (örneğin, bir önceki sürümdeki değişiklikleri göstermek). Genellikle çizili olarak görüntülenir.
  • <ins>: Eklendiğini belirtmek için metin üzerinde kullanılır (örneğin, yeni eklenen bilgileri göstermek). Genellikle altı çizgili olarak görüntülenir.

Örnek:

HTML
<p>Bu <strong>önemli</strong> bir bilgi.</p>
<p><em>Vurgulanmış</em> bir metin örneği.</p>
<p><b>Bu metin kalın görünür</b>, ancak semantik anlamı yoktur.</p>
<p><i>Bu metin italik görünür</i>, ancak semantik anlamı yoktur.</p>
<p>Arama sonuçlarınızda <mark>HTML</mark> kelimesi vurgulanmıştır.</p>
<p>Bu, <small>küçük yazı tipiyle</small> yazılmış bir nottur.</p>
<p><del>Eski fiyat: 100 TL</del> Yeni fiyat: 80 TL</p>
<p><ins>Eklenen yeni bilgi:</ins> Bu bilgiyi unutmayın!</p>

Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML

Etiketler