Html Span ve Div Etiketleri - Html Dersleri

[VexraDev]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Html 5 div ve span etiketleri nedir ve hangi amaçlar kullanılır?

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.