Div İd ve Div Class Arasındaki Temel Fark

Web tasarım’a yeni başlayan bir çok arkadaş div class ve div id arasında ki farkı bilemiyor. Doğrusu bende ilk başladığım zamanlarda bunun genel mantığını bilemiyordum. Ama sonra gerek çalışmalarım, gerek okuduğum bazı kaynaklar sayesinde arasındaki genel farkı kaptım.

Div id, web sayfası içerisinde yer yer alan gerekli bölümler için kullanılabilir. Örnek vermek gerekirse;

<div id=”header”></div>

Header bölümü yani üst kısım sayfamızda kullanmamız gereken bir bölüm. Bu yüzden header’e id veriyoruz arkadaşlar. Aynı şekilde footer, sidebar, index gibi bölümler de bir temada olması gereken temel bölümler olduğu için id veriyoruz..

Bir diğer tanımı ise, sayfada kullanılması şart olan ve tek bir şekilde kullanılacak olan bölümlere div id veriyoruz.

Div class, sayfamızda her bölümde ve olması şart olmayan bölümler için kullanılır. Buna da örnek verelim;

<div id=”header”><div class=”logo”><img src=”./images/logo.png” /></div>

Farkındaysanız header’e burada id vermiştik. Logo onun içinde olan bir özellik olunca buna class veriyoruz arkadaşlar. Çünkü logoyu tek bir yerde değil, bir çok bölümde kullanabiliriz. Aynı şekilde logo her tasarımda bulunmayabilir. O yüzden id yerine class veriyoruz.

Kaynak: Enes Çakmak | Div İd ve Div Class Arasındaki Temel Fark

Bir eklemede ben yapacağım. Artık id kullanımından kaçınmalıyız. HTML5 tag'leri artık id'ler pek gerek kalmadığını düşünüyorum.

div id="header" diye tanımlama yapacağınıza <header> </header>
div id="footer" = <footer> </footer>
<nav> </nav>
<section> </section>
<aside> </aside>

buda bir yaklaşım olabilir tabii, bu şekilde kullanmanın bir w3 açısından sıkıntısı olmaz ama id ve class arasındaki asıl fark bu değil, asıl fark;

id benzersizdir, class birden çok kullanılabilir.
örnek vereyim: header isminde bir id oluşturduğumuzu varsayalım; her bir sayfa içinde ancak bir sefer header id sini kullanabiliriz. yani id tanımlaması benzersiz olduğundan, her sayfada birkez kullanılabilir, yineleme yapılmaz. yapılırsa sayfa çalışmaya devam eder ama w3 standartlarına uygun bir kodlama lmaz.

class ise bir sayfa içinde birden çok kez kullanılabilir.
yine örnek vereyim: mesaj adında bir classımız var diyelim her bir sayfada istediğimiz kadar bu mesaj classını kullanabiliriz.

kısaca her id sayfa başına bir kez kullanılır, class için sınırlama yoktur. temel fark aslında budur hocam.