HTML işaretlemesinde <div> ve <span> etiketlerini ne…

div ve span etiketleri, öğeleri gruplamak ve stiller uygulamak için kullanılan evrensel kapsayıcılardır.

div (bölüm): Blok öğesi. İçeriğinin önüne ve arkasına yeni bir satır oluşturur. Başlıklar, ana içerik, altbilgi, yan paneller gibi büyük içerik bölümlerini gruplamak için kullanılır. CSS kullanarak sayfa düzeni oluşturmak için uygulanır.
span: Satır içi öğe. Yeni bir satır oluşturmaz. Bir satır içindeki küçük içerik parçalarını, örneğin tek kelimeleri veya ifadeleri gruplamak için kullanılır. Belirli bir metin parçasına stil uygulamak için kullanılır ve çevresindeki öğeleri etkilemez.

div kullanımı örneği:

<!-- Site başlık bölümünün gruplaması -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Bağlantı 1</li>
      <li>Bağlantı 2</li>
    </ul>
  </nav>
</div>

<!-- Ana içeriğin gruplaması -->
<div class="main-content">
  <article>
    <h2>Makale Başlığı</h2>
    <p>Makale içeriği...</p>
  </article>
</div>

span kullanımı örneği:

<p>Bu normal bir metin ve içinde <span class="highlight">vurgulanmış</span> kelime var.</p>

<style>
  .highlight {
    color: blue; /* Sadece "vurgulanmış" kelimesine stil uygula */
    font-weight: bold;
  }
</style>

Bu etiketler, daha iyi okunabilirlik ve kodun bakımı için uygun semantik sınıflar veya kimlikler ile kullanılmalıdır. Ayrıca, stil verme ve DOM manipülasyonu amaçlarıyla kullanılmalıdır. div ve span kullanımını aşırıya kaçırmaktan kaçınılmalı, bunun yerine HTML5'in daha semantik etiketleri (header, footer, article, nav, section) tercih edilmelidir.

HTML işaretlemesinde <div> ve <span> etiketlerini ne zaman kullanmalısınız?