Div etiketi

<div> etiketi HTML sənəddəki bölməni (division) və ya bloku təyin edir.
<div> etiketini bloklar halında göstərmək üçün CSS-dən istifadə olunur.
 
Nümunə olaraq, sənəddəki bir bölməni göy rəngdə göstərmək üçün:
<div style="color:#0000FF">
    <h3>Bu başlıqdır</h3>
    <p>Bu mətndir.</p>
</div>
Nəticəni görmək üçün klikləyin
 
Məsləhətlər və qeydlər
<div> etiketi ilə səhifə strukturu yaradarkən tez-tez CSS-dən istifadə olunur.
Adətən brauzerlər <div> etiketindən əvvəl və sonra sətir sonu yaradırlar, yəni hər div yeni sətirdə başlayır. Sətir sonları CSS ilə dəyişdirilə bilər.
 
HTML 4.01 və HTML5 fərqləri
<div> align xüsusiyyəti HTML5-də dəstəklənilmir.
 
Xüsusiyyətlər
Xüsusiyyət Dəyər Xarakteristika
align left
right
center
justify
HTML5 tərəfindən dəstəklənmir
<div> elementinin daxilindəki məzmunun yerini müəyyən edir
 
 
Başlanğıc CSS köklənməsi
Əksər brauzerlər <object> etiketinin ilkin CSS dəyərlərini belə görəcək:
div {
    display: block;
}
 
Nümunə
Son olaraq daha bir nümunəyə baxaq:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML div</title>
</head>
<body>
<style type="text/css">
   .block1 { 
    width: 200px; 
    background: #ccc;
    padding: 5px;
    padding-right: 20px; 
    border: solid 1px black; 
    float: left;
   }
   .block2 { 
    width: 200px; 
    background: #fc0; 
    padding: 5px; 
    border: solid 1px black; 
    float: left; 
    position: relative; 
    top: 40px; 
    left: -70px; 
   }
</style> 
<div class="block1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
<div class="block2">Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> 
</body>
</html>

Brauzerdə nəticə belə görünəcəkdir:
 

Div etiketi


Göründüyü kimi, iki div elementi yaratdıq və fərqlənmələri üçün onların fon rənglərini müxtəlif seçdik. İkinci bloku CSS vasitəsilə birinci blokun üzərinə gətirmiş olduq.
Nəticəyə buradan da baxa bilərsiniz.
HTML5