Web tasarımda header vs nav vs div

Merhaba arkadaşlar, bir web tasarim örneği videosunda adamin hiç div kullanmadığını gördüm header ve nav ullı yapısı kullandı. Gayet de normal mis gibi site oldu.

Peki modern bir web sitesinde hangisi kullanılmalı? Her şeyi bir divin içine yazmak mı mantıklı headerin içine yazmak mı?

Üst kısmı genelde Navbar kullanıyorum ben.
Eğer 2 menü alt alta içeriyorsa üste Header, hemen altına Nav koyuyorum.

HTML yapısında bazı tagler default olarak hazır CSS'ler ile gelirler. Örneğin div "display: Block;" olarak gelirken span "display: İnline-block" veya "display: İnline" olarak gelir (şu an hangisi default olarak geldiğini hatırlamadığım için ikisini de yazdım).

Demem o ki, nav ve header yapıları da bu şekilde hazır CSS durumları ile birlikte gelirler.

Bunun yanı sıra arama motorlarının indexleme robotları sitenize ulaştıkları ilk anda belirlediğiniz taglere istinaden sitenizi okurlar. Bu konuda da tagler önem arz eder.

Yine farklı bir konuda erişilebilirlik konusudur. Örneğin "b" ve "strong" taglerinin CSS örnekleri aynıdır, ikisi de yazılan kelimelerin fontlarını kalınlaştırır lakin aradaki temel fark şudur, "b" etiketi sadece fontu kalınlaştırmak için kullanılırken "strong" tagi görme engeli bulunan insanların siteyi bir programa okuturken yazılan bu tagin daha alçak veya yüksek tonlarda duyulmasını da sağlayabilir.

Sözün özü şudur, HTML'de sadece div kullanarak da istediğiniz her şeyi yapabilirsiniz. Lakin üçüncü parti yazılımların düzgün çalışmasını, arama motorlarının doğru indexleme yapabilmesini ve taglere özel default CSS'lerin kullanılabilmesini istiyorsanız her durum için özelleştirilmiş tagler kullanmanız sizin yararınıza olur.

Bu kadar fazla anlattığıma bakmayın şahsen en sık kullandığım tag de "div" tagidir.

Öncelikle cevabınız için teşekkürler.
Benim bu soruyu sormamın sebebi mesela 1.ci fotoğrafta herhangi bir site var gördüğünüz gibi div kullanılmamış full zoomu uzaklaştırınca herşey büyüyor



Alttakinde ise herşey bir divin içinde yazılmış ve uzaklaştırınca div width height değerini kaybetmiyor.

Yani gelelim konuya siz hangi yöntemi mantıklı görürsünüz?

Kullandığı şey semantic (anlamsal) HTML'dir. İşlev bakımından benzer olsalar da hem kodun okunabilirliğini hem arama motoru optimizasyonunu hem de erişilebilirliği arttırır. Kodunuzda her zaman anlamsal HTML'i kullanın. İleride faydasını görebilirsiniz.

Berat.xx56 dedi:

Öncelikle cevabınız için teşekkürler.
Benim bu soruyu sormamın sebebi mesela 1.ci fotoğrafta herhangi bir site var gördüğünüz gibi div kullanılmamış full zoomu uzaklaştırınca herşey büyüyor

Eki Görüntüle 1787569

Alttakinde ise herşey bir divin içinde yazılmış ve uzaklaştırınca div width height değerini kaybetmiyor.Eki Görüntüle 1787570

Yani gelelim konuya siz hangi yöntemi mantıklı görürsünüz?

Genişletmek için tıkla...

Anlamsal biçimi tercih edin. Width (genişlik) değerini ayarlarsanız yine aynı şekilde görünürler.

Hmm dediğinizi anlamadım ama siteye girince anladım şimdi teşekkürler hocam

Berat.xx56 dedi:

Merhaba arkadaşlar, bir web tasarim örneği videosunda adamin hiç div kullanmadığını gördüm header ve nav ullı yapısı kullandı. Gayet de normal mis gibi site oldu.

Peki modern bir web sitesinde hangisi kullanılmalı? Her şeyi bir divin içine yazmak mı mantıklı headerin içine yazmak mı?

Genişletmek için tıkla...

Burada ki gibi bir site varsa bu şekilde kullanıyorum. Siteyi ben yaptım (freelance).