HTML’de Blok ve Satır İçi Elemanları (Block and Inline Elements)
HTML’de tüm etiketler, blok (block) veya satır içi (inline) elemanlar olarak iki gruba ayrılır. Bu ayrım, etiketlerin tarayıcıda nasıl davrandığını anlamamızı sağlar. Öyle ki, web sayfası tasarlarken, bu farkı bilmek düzenli ve istediğiniz gibi bir yapı oluşturmanın temel anahtarıdır desem yeridir. Zira tüm bir sayfa düzeni bu ayrıma göre belirlenir.
Blok Elemanları (Block Elements)
Blok elemanlar, adı üstünde bir “blok” oluşturur. Yani sayfanın tüm genişliğini kaplayarak, kendisinden önceki ve sonraki elemanları yeni bir satıra iter. Mevcut bulunduğu satırı sadece kendisi kullanır. Örneğin, <div> bir blok elemandır ve diğer elemanları kapsamak için sıkça kullanılır. Benzer şekilde, <p> etiketi, paragraf oluşturmak için kullanılan bir blok elemandır ve her zaman yeni bir satırda başlar. Blok elemanlar genişlik olarak varsayılan olarak bulundukları satırın tamamını kaplarlar. Haliyle blok oluşturan HTML elemanlarından sıklıkla kullanılanları bilmeniz gerekmektedir. Bakınız:
<div>: Bölüm veya kapsayıcı olarak kullanılır. Sayfa tasarımında farklı bölümleri ayırmak ve düzenlemek için kullanılır.<p>: Bir paragraf oluşturur. Metin içeriklerini gruplamak için idealdir.<h1>–<h6>: Başlık etiketleridir.<h1>en büyük,<h6>ise en küçük başlığı temsil eder.<ul>ve<ol>: Sırasız (<ul>) veya sıralı (<ol>) listeler oluşturur.<table>: Tablo oluşturur. Veriyi satır ve sütunlar halinde düzenlemek için kullanılır.<form>: Form elemanlarını kapsayan bir yapı oluşturur.
Aşağıdaki tabloda HTML’de bulunan blok düzeyindeki elementler listelenmiştir:
<address> | <article> | <aside> | <blockquote> |
<canvas> | <dd> | <div> | <dl> |
<dt> | <fieldset> | <figcaption> | <figure> |
<footer> | <form> | <h1>...<h6> | <header> |
<hr> | <li> | <main> | <nav> |
<noscript> | <ol> | <p> | <pre> |
<section> | <table> | <tfoot> | <ul> |
Satır İçi Elemanlar (Inline Elements)
Satır içi elemanlar, bir satırın içinde yer alır ve diğer elemanlarla yan yana durabilir. Blok elemanların aksine, yeni bir satır oluşturmaz. Genellikle metinlerin veya küçük bileşenlerin stilini değiştirmek için kullanılır. Satır içi elemanları olarak şunları bilmeniz iyi olacaktır:
<span>: Küçük bir metin grubunu veya satır içindeki elemanı stilize etmek için kullanılır.<a>: Linkler oluşturur.<strong>ve<b>: Metni kalın yapmak için kullanılır.<em>ve<i>: Metni italik yapmak için kullanılır.<img>: Görseller için kullanılır.<input>: Form giriş alanı oluşturur. Kullanıcıdan veri toplamak için kullanılır.
Aşağıdaki tabloda HTML’deki satı içi elementler listelenmiştir:
<a> | <abbr> | <acronym> | <b> |
<bdo> | <big> | <br> | <button> |
<cite> | <code> | <dfn> | <em> |
<i> | <img> | <input> | <kbd> |
<label> | <map> | <object> | <output> |
<q> | <samp> | <script> | <select> |
<small> | <span> | <strong> | <sub> |
<sup> | <textarea> | <time> | <tt> |
Blok ve Satır Elemanları Arasındaki Farklar
| Özellik | Blok Elemanlar | Satır İçi Elemanlar |
|---|---|---|
| Satır Davranışı | Her zaman yeni bir satırda başlar. | Aynı satırda yer alır. |
| Genişlik | Varsayılan olarak tüm satırı kaplar. | İçeriği kadar genişlik kaplar. |
| Diğer Elemanlar | Hem blok hem de satır içi elemanlar içerebilir. | Sadece satır içi elemanlar içerebilir. |
Blok elemanlar sayfanın genişliğini kaplayan ve her zaman yeni bir satırda başlayan elemanlardır. Genellikle sayfa yapısını oluşturmak için kullanılırlar. Satır içi elemanlar ise blok elemanlardan farklı olarak, aynı satırda yer alabilir. Örneğin, bir paragraf içinde bir kelimeyi vurgulamak için kullanılan <strong> ya da bir bağlantı oluşturmak için kullanılan <a> etiketleri satır içi elemandır. Satır içi elemanlar sadece içeriği kadar yer kaplar ve diğer elemanlarla yan yana durabilir. Ancak, blok elemanları içeremezler; yalnızca diğer satır içi elemanları barındırabilirler.
Blok ve satır içi elemanlar arasındaki bu fark, web sayfası düzenini etkiler. Örneğin, blok elemanlar varsayılan olarak alt alta sıralanırken, satır içi elemanlar yan yana dizilir. Bu nedenle, hangisini kullanacağınızı belirlerken bu davranışları göz önünde bulundurmanız önemlidir.
HTML’de bu ayrım, tasarımı anlamak ve doğru yapılar oluşturmak için kritik öneme sahiptir. Bir blok eleman içinde satır içi elemanları kullanarak, hem yapısal hem de görsel açıdan anlamlı bir düzen oluşturabilirsiniz. Ancak, satır içi elemanlar içinde blok eleman kullanmak hatalara yol açabilir. Bu nedenle, elemanların blok mu yoksa satır içi mi olduğunu bilmeniz hayati önem taşımaktadır.