Block ve Inline Elemanlar - Div ve Span Etiketleri

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.

TEXT?

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.

TEXT?

`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!