Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

Section ve Div arasındaki fark nedir?

arkadaşlar merhaba Html5 e çalışmaya başlıyorumda kafama takılan bir soru var eminim ilk çalışan herkesin takılmıştır..

bu div ve section ya da header la h1...h6 article ve p bunlar arasındaki fark nedir çözemedim..

kanımca sürekli div ve p kullanınca güzel görüntü olmuyor.. ve daha düzgün bi kod düzeni açısından mı ?
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Doğru Cevap

  • GncArt adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    9 yıl önce güncellenmiş
    42 cevap - 13 soru
    HTML5 ile sık sık duyduğumuz "nav", "header", "footer", "section", &amp;amp;lt;article&amp;amp;gt;, "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 &amp;amp;quot;section&amp;amp;quot; 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 adlı üyenin fotoğrafı psygnosis
      teşekkürler yardımın için.
      9 yıl önce yazılmış

Cevaplar

  • psygnosis adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    33 cevap - 159 soru
    yokmu yani cevap verebilecek kimse