HTML DİV ve SPAN NEDİR?

Div etiketi bir HTML belgesi içinde bir bölüm belirtmek için kullanılır. Div html içinde verileri sağa, sola, yukarı veya aşağıya CSS yardımı ile hizalamaya yarar. Kısacası div'leri birer kutu olarak düşünebiliriz. Metinler, Resimler ve videolar div içinde yerleştirilebilir. Div tablolara benzer ama onları CSS ile Şekillendirilebilir. website tasarımında tablo kullanımında div'in avantajları ve kolaylıkları vardır. Aşağıda genel başlıklar ile div’li yapının tablolu yapıya olan avantajlarından bahsedeceğim.

DIV ve SPAN elemanları anlamsız etiketlerdir; Yani "p" veya "h1" gibi diğer etiketlerin aksine, onlar ile ilgili herhangi bir görsel özelliğe sahip olmadığı için Style ve CSS özelliklerinin ayrıca belirtilmesi gerekir. CSS ile Sahip oldukları tüm özellikler genellikle "sınıf" ve "id" nitelikleri ile, geliştirici tarafından kendilerine tahsis edilmelidir.

DIV etiketi blok düzeyi unsurudur. Her Div etiketi açılıp kapandığında bir alt satıra geçer. Div'leri tek olarak veya iç içe girmiş bir yapı olarakta kullanabiliriz.

SİTE YAPISI


DIV etiketi de yaygın sayfa düzeninde kullanılır. CSS kullanarak, bir DIV elemanı site içerisinde heryere konumladırabilir ve içine istediğimiz herhangi bir unsur yerleştirebilirsiniz.

Örnek site yapısı:


div ve span tag

header :Sitenin başlık ve açıklama içeriğini yer alır. Sadece başlığınız olacaksa altı seviyeli başlıklardan (h1-h6) birini kullanmanız yeterli.

nav : Menüleri, Gezinti (navigation) alanını temsil eder. Gezinti bağlantıları ya da içerik listesi için kullanılabilir.

section : Genel bölümleme öğesidir. İçinde başlığı ve altalanı olan bir makale olabilir.

article : Bir makale ya da yazı alanını temsil eder. Bu bir blog yazısı, yorum alanı, haber v.b. olabilir.

aside : Ana içerikten ayrı yazılan, yüzeysel bir bağlantısı olan içeriğe denir.

footer : Altalanı temsil eder. Bu bir sayfanın, bir bölümün ya da bir yazının altalanı olabilir.

Site yapısının html kodların gösterimi:

HTML:


<html>
<head>

</head>
<body>
<div class="header"> </div>

<div class="nav"> </div>

    <div class="section">

    <div class="header2"> </div>

    <div class="article"> </div>

    <div class="footer2"> </div>

</div>


<div class="aside"> </div>

<div class="footer"></div>

</body>

</html>

Site yapımızın html kodları yukardaki gibi olacaktır; ancak bu halde bir anlam ifade etmez bunu CSS ile şekillendirmemiz gerekir.

SPAN ETİKETİ


HTML SPAN etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlar. SPAN, DIV etiketinden farklı olarak bir satır içi (inline) element olduğu için metnin içinde kullanılması durumunda ilgili metni keserek bir alt satıra geçmez.

SPAN elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için Style ve CSS özelliklerinin ayrıca belirtilmesi gerekir.

Div'ler websayfada ekranın sonuna kadar yani gidebildiği yere kadar gider. span ise sadece metnin kapladığı alanı kapsar. Bir örnekle açıklayalım.

HTML:


<div style="background:#f5b57f">

   Div gidebildiği yere kadar gider

</div>

<span style="background:#9aec9a">

   Span metin alanı kadar gider

</span>

ÇIKTI:

html div-span nedir

Span etiketleri genellikle metin biçimlendirmek için kullanılan ve bir sayfanın düzenini etkilemez. Örneğin website sayfamızda bazı kelimelerin vurgulu gözükmesini istiyoruz; Bunun için span etiketlere style özellik atayalım.

HTML:


<html>
<head>
</head>
 <style type="text/css">
 
  span.vurgu{
            color: red;
        background-color: yellow;
            }

</style>

<body>

<p>Ne oldum <span class="vurgu">dememeli,</span> 

ne olacağım <span class="vurgu">demeli.</span></p>  

</body>

</html>
            

ÇIKTI:

html div-span nedir

Sonuç:

Hem DIV etiketi ve SPAN etiketi CSS ve websayfa tasarımında çok önemli bir role sahiptir. Bu kodlar websayfa düzeninde kullanır ve sayfanın belli bölümlerinde özellik atanır. Bu HTML kodlarına Class(sınıf) ve Tekil(id) CSS seçicileri ile birlikte kullanılır. DIV etiketi web düzenin de kullanılır. SPAN etiketi esas metin ile kullanıldığında ise, Tabloların yerini alır. Bu iki etiketin nasıl çalıştığını anlamak ve websayfa tasarımında CSS kullanmada önemli yer teşkil eder.

Şefik Selli 27/03/2018

Kardeşim harika bir anlatım ellerine sağlık.

Bilal 27/03/2018

Anlatımın cok güzel, yanında örneklerle daha da güzel ve akılda kalıcı, çok çok teşekkür ederim. Kayan yazı vs. için gelmiştim siteye, Şuan baştan aşağı okuyorum siteyi.

Elnur Əliyev 27/03/2018

Faydali məlumat idi. teşekkür edirəm.

Bahar 27/03/2018

Harika gerçekten ellerine sağlık okuduğum bölüm bu ama birçok kişiden güzel bir anlatımınız var :) çok teşekkür ederim.

Pars 02/04/2018

Merhaba eline sağlık Çok güzel anlatmışsın kardeşim. İki kutu arasına nasıl bir boşluk birakabilirim.

yönetici 03/04/2018

css margin konusuna bakınız.

Emirhan 11/02/2019

Güzel anlatımınız için teşekkürler...

Barancan Genç 18/04/2019

Çok güzel bir makale elinize sağlık, site çok hoş yeni keşfetmem biraz üzdü. Bundan sonra yer imlerindesiniz.

Murad 23/06/2019

Güzel anlatim, çok teşekkür ederim.

gadfather 03/07/2019

Gerçekten süper olmuş eline emeğine sağlık allah razı olsun.

By Azar 28/09/2019

Sitendeki makaleler için çok teşekkür ederim bir çok konuyu yazdığın makaleler vesilesi ile anladım. Allah senden razı olsun

eren b 09/11/2019

Faydalı bilgiler için teşekkürler.

Bora Kuskucu 19/12/2019

Tesekkurler.

ismail çevrim 12/01/2020

Bu kadar güzel anlatan birkaç site daha var , en iyileri arasındasın. Başarılar , harikasın !

Cengiz Şirin 27/03/2020

Gerçek'den çok güzel anlatmışsın.Tebrik ve teşekkür ederim. 😀 control+d bastım kayıt ettim öğrenene kadar bu sayfa gelmeye devam edeceğim.

MERT DUĞUKAN 12/01/2021

Çok güzel ve yararlı bir paylaşım olmuş. Ellerinize sağlık hocam.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

1810

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.