HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan temel yapı taşlarından biridir. <div> etiketi, HTML’de içeriği gruplandırmak ve düzenlemek için kullanılan önemli bir etikettir. Bu yazıda, <div> etiketinin ne olduğunu, nasıl kullanıldığını ve bazı örnek kodlarla nasıl işlev gördüğünü inceleyeceğiz.
<div> Etiketi Nedir?
<div>, “division” kelimesinin kısaltmasıdır ve HTML belgelerinde blok seviyesinde bir konteyner oluşturur. Bu etiket, içerisine aldığı içeriği gruplandırır ve bu gruplamayı CSS (Cascading Style Sheets) veya JavaScript ile daha kolay yönetilebilir hale getirir. Genellikle CSS ile stil uygulamak veya JavaScript ile dinamik davranışlar eklemek için kullanılır.
<div> Etiketinin Kullanımı
<div> etiketi aşağıdaki gibi kullanılır:
<div>
<!-- İçerik buraya gelecek -->
</div>
<div> etiketi bir açılış ve kapanış tag’ine sahiptir ve içerisine diğer HTML etiketleri, metin veya medya öğeleri gibi her türlü içeriği alabilir.
Örnek Kullanım: İki Bölümlü Sayfa Düzeni
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İki Bölümlü Sayfa</title>
<style>
.container {
display: flex;
justify-content: space-between;
}
.sidebar {
width: 30%;
background-color: #f0f0f0;
}
.main-content {
width: 70%;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- Yan menü içeriği buraya gelecek -->
<h2>Yan Menü</h2>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<div class="main-content">
<!-- Ana içerik buraya gelecek -->
<h1>Hoş Geldiniz!</h1>
<p>Web sitemize hoş geldiniz. Burada güncel bilgileri bulabilirsiniz.</p>
</div>
></div>
</body>
</html>
Bu örnekte, <div> etiketi kullanılarak iki bölümlü bir sayfa düzeni oluşturulmuştur. Bir tarafta bir yan menü (sidebar) ve diğer tarafta ana içerik (main-content) bulunmaktadır.
Sonuç
<div> etiketi, HTML belgelerinde içerikleri düzenlemek, gruplamak ve yönetmek için güçlü bir araçtır. CSS ve JavaScript ile birleştirildiğinde, sayfa düzenini ve içeriğini daha etkili bir şekilde kontrol etmemize olanak tanır.