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.

Daha hızlı sayfa yükleme zamanları : Site div ile tasarlandığında daha az kod teşkil ettiğinden siteler daha hızlı yüklenir.
Daha Düşük Barındırma ücretleri : Daha az yüklenme zamanı barındırma ücretleri ve bant genişliğinin az kullanılması demektir ve bunun sonucu barındırma hizmeti aldığımız şirkete daha az ödeme yaparız.
Verimlilik : İçerik düzeni stilleri ayrılmış olduğundan, yeniden tasarlama CSS ile çok kolay. Güncelleme için CSS dosyası ve değişiklikleri çok kolaydır.
Daha iyi SEO için Daha az kod olması ve kodlama yapısının tablolu yapıya göre daha düzenli olması arama motorlarının indekslemesi için bir avantajdır. Arama motorları(google,yandex...) div ile düzenlenmiş sitelere öncelik verir.
Düzenleri ve tasarım gelişmişliği : CSS, HTML tablolara göre tasarımda özgürlük sunmaktadır. Tablolar katı, esnek olmayan, ve ızgara tabanlı iken, CSS tabanlı tasarımlar akışkan, esnek ve genişletilebilir.
Takım çalışmalarına daha uygundur : Web sitesi önyüzü ve arka planı ayrımı yapılır. Arayüz geliştirici ve programcı arasında daha kolay ve güzel iletişim sağlanır. iş bölümü olduğu için işler hızlı yürür.
Tekrar tasarlama daha ucuzdur farklı tasarımların adapte edilmesi kolaydır.
Geleceğe dönük bir yapıdır : HTML5 ile birlikte gelen yeni etiketler ve HTML5’in yapısı div ile kodlamanın devamı niteliğindedir

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ı:

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:

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:

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.

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