Web tasarımda header vs nav vs div

Berat.xx56

Berat.xx56

Decapat
Katılım
20 Mart 2023
Mesajlar
413
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ı?
 
Son düzenleyen: Moderatör:
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

Ekran Alıntısı.PNG


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


Yani gelelim konuya :D 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.

Semantics - Glossary | MDN

In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)
developer.mozilla.org developer.mozilla.org
web.dev

Semantic HTML | web.dev

Using the correct HTML elements to describe your document content.
web.dev web.dev

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 :D 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.
 
Son düzenleme:
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).
 

Benzer konular

C
Web tasarımda nasıl ilerlenmeli?
Mesaj
4
Görüntüleme
668
bmax
bmax
Berat.xx56
Web tasarımda nasıl pratik yapılmalıdır?
2
Mesaj
11
Görüntüleme
921
Eşref Bey
Eşref Bey
Yeniçocuk
Web tasarımda hangi alana odaklanılmalı?
Mesaj
6
Görüntüleme
439
Yeniçocuk
Yeniçocuk
grafikibrahim24
Web tasarımda "images" klasörü kullanımı
Mesaj
4
Görüntüleme
577
xenefon
xenefon
Scitians
  • Çözüldü
Çözüldü  Mobil tasarımda div içerisindeki öğelerin kayması nasıl düzeltilir?
Mesaj
3
Görüntüleme
1.953
Scitians
Scitians

Bu konuyu görüntüleyen kullanıcılar

Toplam: 2 (üye: 0, misafir: 2)

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı