div etiketi ne yapar
<div> (division, yani bölüm kelimesinin kısaltması) genel bir kapsayıcıdır. Elementleri bir araya toplar, böylece onlara tek bir birim olarak stil verebilir, onları konumlandırabilir ya da script ile yönetebilirsin. Tek başına hiçbir şeye benzemez: margin yok, kenarlık yok, özel bir yazı tipi yok. Bir blok elementtir, yani yeni bir satırda başlar ve kullanılabilir genişlik boyunca uzanır.
Stildeki border satırını kaldır, div'ler görünmez olur: bir div'in varsayılan görünümü budur. Görsel olarak yaptığı her şey CSS'ten gelir.
div class ve id
Bir div genellikle bir class alır; bu, CSS'inin hedeflediği addır. Aynı class'ı paylaşan div'ler aynı stili paylaşır:
.card iki kutuya da stil verir, .card.highlight ise iki class'a da sahip olan div'e mavi bir çerçeve ekler. Belirli tek bir div'i göstermen gerektiğinde, örneğin bir link hedefi olarak (href="#pro"), id kullan. Özellikler sayfası class ile id'yi ayrıntılı olarak karşılaştırıyor.
Yan yana div'ler
Div'ler blok olduğu için alt alta dizilir. Onları yan yana koymak için üst elementlerini bir flex kapsayıcı yap:
.row üzerindeki display: flex alt elementleri sıraya dizer, gap aralarına boşluk koyar, flex değerleri de genişliği paylaştırır (burada 1 : 2 : 1). Bu üst ve alt element kalıbı, gerçek sitelerde div'lerin en yaygın kullanımıdır. Bir div'i ortalamak için div nasıl ortalanır sayfasına bak.
İç içe div'ler
Div'ler istediğin derinlikte başka div'ler içerebilir. Her seviye bir kutunun içinde bir kutudur; her div'e bir kenarlık ve biraz padding verince bunu görebilirsin:
İç içe yazımı yerleşimin izin verdiği kadar sığ tut. Her fazladan sarmalayıcı, bir margin ya da genişlik beklediğin gibi davranmadığında düşünmen gereken bir kutu daha demektir.
div mi, anlamsal bir etiket mi?
Bir div içeriği hakkında hiçbir şey söylemez. HTML'de aynı gruplama işini yapan ve grubun ne olduğunu da söyleyen etiketler vardır:
| Bunun yerine | Bunu kullan | Ne için |
|---|---|---|
<div class="header"> | <header> | Bir sayfanın ya da bölümün girişi veya üst çubuğu |
<div class="nav"> | <nav> | Bir gezinme linkleri bloğu |
<div class="main"> | <main> | Ana içerik, sayfada bir kez |
<div class="post"> | <article> | Kendi başına anlamlı bir öğe: yazı, yorum, ürün kartı |
<div class="footer"> | <footer> | Bir sayfanın ya da bölümün alt kısmı |
Bu etiketler sen stil verene kadar tıpkı bir div gibi görünür, ama ekran okuyucular onları duyurur ve kullanıcıların aralarında atlamasına izin verir, arama motorları da yapıyı okur. Yalnızca yerleşim ya da stil için var olan kutular için, örneğin yukarıdaki .row sarmalayıcısı gibi, div kullan. Tam liste anlamsal HTML sayfasında.
Bir div buton değildir
Tıklama işleyicisi olan bir div, fare kullanan biri için tıklanabilir görünür, ama klavye kullanan biri ona Tab ile ulaşamaz ya da Enter ile basamaz ve bir ekran okuyucu onu buton olarak duyurmaz:
Eylemler için <button>, gezinme için <a href> kullan. İkisi de hiçbir ek iş olmadan odaklanabilir ve klavyeyle çalışır.
Sık yapılan hatalar
- Bir
<p>içinde div. Paragraf div'den önce kapanır. Div'i dış element yap ya da paragrafın içinde<span>kullan. - Div çorbası. Yalnızca div'lerden oluşan bir sayfanın ekran okuyucular için bir yapısı yoktur. Uygun olan yerlerde div'leri
<header>,<nav>,<main>ve<footer>ile değiştir. - Tıklanabilir div'ler. Onun yerine bir
<button>ya da bir link kullan. - Bir div'in metni kadar geniş olmasını beklemek. Bir div tüm genişliği kaplar. Küçülmesini istiyorsan
display: inline-block,width: fit-contentya da bir<span>kullan. - Aynı id'yi birkaç div'de kullanmak. Tekrarlanan her şey için bir class kullan.
Sıkça Sorulan Sorular
HTML'de div nedir?
<div> genel bir kapsayıcıdır. Başka elementleri gruplar, böylece onlara birlikte stil verebilir ya da onları birlikte konumlandırabilirsin. Kendine ait bir anlamı yoktur: tarayıcılar onu yeni bir satırda başlayan ve kullanılabilir genişliğin tamamını kaplayan bir blok olarak gösterir.
div class ne demek?
<div class="card">, class özelliği olan bir div'dir. Class, CSS'in stil vermek için (.card { ... }) ve JavaScript'in onu bulmak için kullandığı bir addır. Birçok div aynı class'ı paylaşabilir ve bir div'in birkaç class'ı olabilir: class="card featured".
İki div'i nasıl yan yana koyarım?
Onları bir üst div ile sar ve üst elemente display: flex ver. Alt elementler böylece yan yana dizilir. Aralarında boşluk için gap, genişliği eşit paylaşmaları için alt elementlere flex: 1 ekle.
div mi kullanmalıyım, section mı?
İçerik o role sahipse <section>, <header>, <nav>, <main>, <article> ya da <footer> kullan, çünkü ekran okuyucular ve arama motorları bunları anlar. Yalnızca stil ya da yerleşim için bir kutuya ihtiyacın olduğunda <div> kullan.
Bir p etiketinin içine div koyabilir miyim?
Hayır. Bir paragraf yalnızca satır içi içerik barındırabilir. Tarayıcı <div> gördüğü anda <p> etiketini kapatır ve bu stillerini bozar. Dış element olarak bir div ya da paragrafın içinde bir <span> kullan.
