Section ve Div arasındaki fark nedir?

Doğru Cevap

• 

  10 yıl önce yazılmış

  10 yıl önce güncellenmiş

  GncArt

  42 cevap - 13 soru
  HTML5 ile sık sık duyduğumuz "nav", "header", "footer", "section", <article>, "figure","aside" gibi etikertler HTML yapısını düzenli ve anlamlı bir hale getirmemizi sağlar.
  
  Mesela bir arama motoru sitenizdeki menü yapısını bulabilmek için bir çok karışık işlem uygular fakat siz menü yapınızı "nav" içine koyarsanız anında bu yapının içinde olan linkler menü yapısı olarak algılanır veya aynı şey daha sonradan çalışma kodlarında değişiklik yapacağınız zaman kolaylıkla o kod yapısı içinde bir menü olduğunu anlarsınız ve gereksiz html yorum yazma derdidende kurtulmuş olursunuz.
  
  "section" ve "div" yapılarının farkına gelince daha önce dediğim gibi"section" işin düzenleme ve mantık kısmı ama "div" ise içine ekstra html etiketleri ekleyebildiğimiz ve css ile düzenleyebildiğimiz alandır. Biraz daha netleştirmek açısından bir sayfada çalışmalarınızı yayınladığınızı düşününün. Genel bir container içinde her çalışma için bir section açarak her çalışmanın aynı özelliklerde ayrık bir yapıda olduğunu gösterebiliriz .Dediğin gibi sürekli iç içe div açmak işleri biraz karıştırıyor bunun yerine gerektiği yerde section gerektiği yerde header kullanabiliriz. Ör:
  
  

  <div id="calismalar">
      <section class="calisma">
          <div>
              <header>
                  <figure>
                      <img src="resim linki" alt="">
                  </figure>
              </header>
              <footer>
                  <h3>Çalışma Başlığı</h3>
                  <p>Çalışma detayları....</p>
              </footer>
          </div>
      </section>
      <section class="calisma">
          <div>
              <header>
                  <figure>
                      <img src="resim linki" alt="">
                  </figure>
              </header>
              <footer>
                  <h3>Çalışma Başlığı</h3>
                  <p>Çalışma detayları....</p>
              </footer>
          </div>
      </section>
  </div>
  

  
  
  veya eski düzen şu şekilde yapardık:
  
  

  <div id="calismalar>
      <div class="calisma">
          <div class="image">
              <img src="" alt="">
          </div>
          <div class"detay">
              <h3>Başlık</h3>
              <p>Detay</p>
          </div>
      </div>
  </div>
  

  
  
  

  .calisma div {...}
  .calisma h3 {...}
  .calisma p {...}
  

  
  
  Farkettiysen daha düzenli bir yapı elde etmiş olduk. Her çalışma "section" sayesinde her çalışmanın ayrı bir yapı olduğunu ayırt edebiliyoruz ve her çalışmanında kendi içinde düzenli bir şekilde gruplandığını görebiliyoruz. CSS ile biçimlendirirken her section içindeki elemente ayrı ayrı class verme derdindende kurtuluyoruz. HTML5 standartları doğrultusunda en üste saydığım html etiketlerine css ile müdahele edilmemesi söyleniyor ama istersen her birine display:block atayarak bir div gibi biçimlendirebilirsin -ki önerilmiyor mantıksal yapıyı bozması açısından.

  • psygnosis
    teşekkürler yardımın için.
    10 yıl önce yazılmış

Cevaplar

• 

  10 yıl önce yazılmış

  psygnosis

  33 cevap - 159 soru
  yokmu yani cevap verebilecek kimse