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


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:







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 gidebildiği yere kadar gider
Span metin alanı kadar gider

Ç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>

Ne oldum dememeli, ne olacağım demeli.

</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 Diyor ki 23/06/2015

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

s.u Diyor ki 07/07/2015

bu işe yeni başlayan biri olarak cok işime yaradı sağol kardeşim

Bilal Diyor ki 22/07/2015

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.

Ömer Sait Diyor ki 22/11/2015

yeni başladım o kadar html den sonra div biraz kafa karıştırıyordu çok güzel açıklamışssınız

Mithat DASDEMIR Diyor ki 06/01/2016

ELLERINE SAGLIK KARDESIM SAYENDE HATA MI DUZELTTIM

selim seri Diyor ki 16/02/2016

Harika bir anlatım.Teşekkür ederiz

Süleyman Demir Diyor ki 09/03/2016

Güzel bir anlatımdı. Teşekkürler.

Elnur Əliyev Diyor ki 21/05/2016

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

yaşar Diyor ki 22/05/2016

emeğine sağlık kardeşim

Sinan Diyor ki 12/06/2016

Eline sağlık teşekkür ederim

BERK Diyor ki 03/11/2016

Çok açıklayıcı bir yazı olmuş. Teşekkürler

BURHAN SERT Diyor ki 04/12/2016

Mükemmel anlatım tebrikler

fatma Diyor ki 05/12/2016

Gayet sade ve anlaşılır bir anlatım , teşekkürler

Bahar Diyor ki 04/01/2017

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

Adınız

Eposta

Mesaj

1446

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE