HTML elementleri blok ve satıriçi olarak ikiye ayrılırlar.
Her iki tür de ekranda farklı şekilde yer kaplar.
Bir blok seviye element bulunduğu tüm satırı kaplar.
Blok seviyesi bir elementin yanına başka bir element koyamazsınız.
Fakat CSS ile elementin özelliğini değiştirmek mümkündür. Yani blok ve satıriçi arasında dönüşüm mümkündür.
Örnek blok seviye elementler:
Bir satıriçi element sadece içeriği kadar yer kaplar. Örneğin <span> (bu alan span ile oluşturuldu) bir satıriçi elementtir.
Örnek satıriçi elementler:
Bir web sayfası kodlarken en çok kullanacağınız etiket <div> olacaktır.
<div> elementi diğer HTML elementlerinin taşıyıcısı olarak kullanılır.
HTML sayfalarını tasarlarken sayfayı mantıksal bölümlere ayırırız. Menü, logo, sayfa üstü, sayfa altı gibi.
Bu ayrımları oluştururken, kod kısmında <div> kullanırız.
<div style="background-color:red;color:yellow;padding:20px;width:200px;height:100px;">
<h2>Bu bir kutudur.</h2>
<p>div elementi diğer HTML elementlerinin taşıyıcısıdır.</p>
</div>
<div> etiketini daha sonra örneklerde bolca kullanacağız.
<span> elementi metinlerin taşıyıcısıdır. Metinleri paragraf içinde yazmak istemediğinizde <span> içinde yazabilirsiniz.
<span> etiketi kullandığınız zaman bu metne CSS ile biçim verebilirsiniz.
Örneğin <h1> etiketi ile yazılmış bir başlığın içindeki bir kelimeyi farklı zemin ve renk ile yazmak istersek:
<h1>Span
<span style="background:#000; color:red">inline</span>
bir elementtir.</h1>