SPAN etiketine sahip kayıtlar gösteriliyor.
SPAN etiketine sahip kayıtlar gösteriliyor.

HTML Bloklar

HTML Dersleri
HTML Bloklar

HTML etiketleri, sayfadaki yerleşimlerine göre satır içi ve blok seviyesi olmak üzere 2 gruba ayrılırlar. HTML sayfalarımızı kodlarken iki seviye arasındaki farkları bilmek faydalı olacaktır.

Blok (blocks) Seviyesi Elementler :  Bu gruptaki HTML elementleri eklendikleri zaman yeni bir satıra yerleşirler ve bulundukları yerin tamamı kadar genişliğe sahip olurlar. Blok seviyesi elemanlar, satır seviyesi elemanların aksine %100 genişliğe sahip olurlar. Örnek: <h1>, <p>, <ul>, <table>

Satır İçi (inline) Elementler : Bu elementler blok seviyesi gibi yeni bir satır başlatmazlar. Satır içi elemanlardan sonra gelenler, yeni bir satır yerine bu elemanın yanında görüntülenirler. Örneğin linkler (a) , resimler (img) ve metin biçimlendirme etiketlerinden bazıları (strong, b, td ve em) bu gruba girerler. Bu elemanlar kendisini oluşturan içerik kadar bir alan kaplarlar. 

<div> elementi : İsteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir blok oluşturulmasını sağlar. <div> bir blok oluşturduğu için bir metnin içinde kullanılması durumunda ilgili metni kesecektir <div> elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için style veya css özelliklerinin ayrıca belirtilmesi gerekir.  

HTML Kullanımı
<p>Bu paragrafta DIV elementi içinde <div>HTML Satırlar ve Bloklar</div> kelimesi kullanılmıştır.</p>

HTML Görünümü
Bu paragrafta DIV elementi içinde
HTML Satırlar ve Bloklar
kelimesi kullanılmıştır.

<span> elementi : İsteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlayan elementdir. <span>, <div> elementinden farklı olarak bir satır içi (inline) element olduğu için metnin içinde kullanılması durumunda ilgili metni kesmez .<span> elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için style veya css özelliklerinin ayrıca belirtilmesi gerekir. CSS ile birlikte kullanıldığında, <span> metin parçalarına stil ayarlamak için kullanılabilir.

HTML Kullanımı
<p>HTML Satırlar ve Bloklar= <span style="font-style:italic; color:navy;">HTML Satırlar ve Bloklar</span></p>

HTML Görünümü
HTML Satırlar ve Bloklar= HTML Satırlar ve Bloklar 

HTML elementlerinin satır seviyesi mi yoksa blok seviyesi mi oldukları display adındaki css özelliği ile kontrol edilebilir. Satır seviyesi elemanların display özelliği varsayılan olarak inline, blok seviyesi elemanlarının display özelliği de varsayılan olarak block değerine sahiptir.