Merhaba! Bugün iki önemli ve sık kullanılan HTML etiketi olan div ve span etiketlerini inceleyeceğiz. Bu etiketler, web sayfalarınızı düzenlemenize, içerikleri gruplamanıza ve CSS ile daha kolay stil vermenize yardımcı olur. Ancak bu iki etiketin nasıl davrandığını anlamadan önce, inline (satır içi) ve block (blok) elementleri arasındaki farkları anlamamız gerekiyor.
Inline ve Block Elementler
Block Elementler
- Tam bir blok oluşturur ve her zaman yeni bir satırda başlar.
- Tüm genişliği kaplar, hatta içerik az olsa bile.
- Örnekler:
<h1>, <p>, <div>, <section>.
Örnek:
<p>Bu bir paragraf.</p>
<h1>Bu bir başlık.</h1>
Sonuç:
- Paragraf ve başlık kendi satırlarında görüntülenir.
Inline Elementler
- Aynı satırda diğer öğelerle birlikte bulunabilir.
- İçeriği kadar yer kaplar.
- Örnekler:
<a>, <span>, <strong>, <em>.
Örnek:
<a href="#">Bu bir bağlantıdır.</a>
<strong>Bu kalın bir yazıdır.</strong>
Sonuç:
- Bağlantı ve kalın yazı aynı satırda yer alır.
div Etiketi
div Nedir?
- Block seviyesinde bir elementtir.
- İçeriği gruplamak ve düzenlemek için kullanılır.
- Kendi başına herhangi bir görsel etkisi yoktur; CSS ile stil verilerek işlevsellik kazanır.
div Kullanımı
Bir div etiketi, farklı içerikleri bir araya toplamak için kullanılır. Örneğin:
<div>
<h1>Başlık</h1>
<p>Bu bir paragraf.</p>
</div>
Sonuç:
- Başlık ve paragraf,
div etiketiyle birlikte bir blok olarak gruplandırılır.
div ile Ne Yapabilirsiniz?
- CSS ile bir grup içeriği birlikte stillendirebilirsiniz.
- İçeriği mantıksal bir şekilde düzenleyebilir ve gruplandırabilirsiniz.
- Örneğin, bir web sitesinde bir kart tasarımı:
<div style="border: 1px solid #ccc; padding: 10px; width: 300px;">
<img src="chicken.jpg" alt="Tavuk resmi" width="100%">
<h2>Başlık</h2>
<p>Bu, bir kart içeriğidir.</p>
</div>
span Etiketi
span Nedir?
- Inline seviyesinde bir elementtir.
- Tek bir metin veya içeriği seçip stil vermek veya işlev eklemek için kullanılır.
- Blok oluşturmaz; metin veya diğer inline içeriklerin etrafına sarılır.
span Kullanımı
Bir span etiketi, metni seçip CSS ile stil vermek için idealdir. Örneğin:
<p>Bu metnin <span style="color: red;">bir kısmı kırmızı</span>.</p>
Sonuç:
- “bir kısmı kırmızı” kısmı kırmızı renkli görünür.
span ile Ne Yapabilirsiniz?
- Inline metinlere stil verebilirsiniz (örneğin, renk değiştirme, yazı tipi değişikliği).
- JavaScript ile belirli metinlere dinamik işlevler ekleyebilirsiniz.
div ve span Arasındaki Farklar
| Özellik | div | span |
|---|
| Davranış | Block element | Inline element |
| Amaç | İçerikleri gruplamak | Belirli metin veya içerikleri vurgulamak |
| Yerleşim | Her zaman yeni bir satırda başlar | Aynı satırda yer alır |
| Kullanım Örnekleri | Web sayfasında bölümler oluşturmak | Metin içinde belirli bir alanı seçmek |
Örnek: div ve span ile Stil Verme
Kod:
<div style="border: 2px solid #007bff; padding: 10px; margin-bottom: 10px;">
<h1>Başlık</h1>
<p>Bu metin <span style="color: red;">kırmızı renkle</span> vurgulanmıştır.</p>
</div>
Sonuç:
div etiketi, başlık ve paragrafı bir kutuda gruplar.span etiketi, paragraftaki belirli bir metni kırmızı renkle vurgular.
Ne Zaman div, Ne Zaman span Kullanılmalı?
div Kullanmanız Gereken Durumlar:
- İçeriği bölümlere ayırmak istiyorsanız.
- Birden fazla öğeyi (başlık, paragraf, resim) gruplamak istiyorsanız.
- CSS ile bir grup öğeye toplu olarak stil vermek istiyorsanız.
span Kullanmanız Gereken Durumlar:
- Inline içerik üzerinde işlem yapmak istiyorsanız.
- Sadece belirli bir metni vurgulamak veya stil vermek istiyorsanız.
Sonuç
div, blok seviyesinde bir elementtir ve içerikleri gruplamak için kullanılır.span, inline seviyesinde bir elementtir ve metni seçmek veya stil vermek için idealdir.- İkisi de CSS veya JavaScript ile daha güçlü hale gelir ve modern web geliştirme için vazgeçilmez araçlardır.
Şimdi div ve span kullanarak kendi örneklerinizi oluşturarak bunları keşfetmeye başlayabilirsiniz!