Html Div ve Span Etiketi

Html div etiketi aynen bir paragraf etiketi gibi block etiketidir yani bulunduğu satırı olduğu gibi kaplar.

<p> etiketi ile <div> etiketi arasındaki fark <p> etiketi içine bir paragraf yani bir içerik, bir metin eklerken <div> etiketi içine bir html parçası eklenir. Yani div ile html sayfasındaki elemanları mantıksal olarak gruplarız.

Örneğin başlık kısmını;

<div id="header">

</div>

menu kısmını

<div id="menu">

</div>

içerik kısmını 

<div id="content">

</div>

footer kısmını

<div id="footer ">

</div>

olarak tanımladığımız div etiketi arasına alarak gruplamış oluruz.

<span> etiketi ise bir inline etikettir. Yani span etiketinin kapsamı içindeki elemanın kapsadığı yer kadardır.

<div id="container">
	<h1>Halı yıkamada kaliteli hizmet</h1>

	<div id="service-1">
		<h2>Kaliteli hizmet</h2>
		<img src="">
		<p>Kocaeli İzmit' de <span style="color:red;">halı yıkamada</span> kaliteli hizmet sunmaktayız.</p>
	</div>

	<div id="service-2">
		<h2>Halınızı evden teslim alalım</h2>
		<img src=""> 
        <p>Kocaeli İzmit' de çevresinde halınızı evden teslim alalım.</p>
	</div>	
</div>

Yukarıdaki örnekte kapsayıcı container ismindeki bir div içerisine <h1> etiketi ve 2 tane de aynı amaca hizmet eden bölme yani div eklenmiştir. Her bir service div' i içerisine bir <h2> bir <img> ve bir <p> etiketi eklenmiştir.

Ayrıca <p> etiketi içindeki açıklama yazısının "halı yıkamada" kısmının rengini değiştirmek için span etiketi kullandığıma dikkat ediniz.

<span> bir inline etiket olduğundan dolayı paragraf gene aynı satırda olmaya devam edecek ancak bir bölümü span içerisine alıp o bölüme yazı rengi uyguladım.

<span style="color:red;">

** div etiketinin kullanımı css ile iç içe olduğundan dolayı css bölümünde sıklıkla bahsedeceğimiz bir etikettir. Dolayısıyla bu aşamada sadece <div> etiketi nedir ve hangi amaçla kullanılır bunu bilmemiz yeterlidir.