HTML Blok ve Satır içi (Block and Inline)
HTML elementleri blok ve satır içi (block and inline) olmak üzere varsayılan iki görüntüleme türüne sahiptir.
HTML Blok ve Satır içi Elementleri
HTML belgelerinde her element varsayılan bir görüntülenme değerlerine sahiptir. Haliyle ekranda farklı şekilde yer kaplarlar. Yani sahip oldukları varsayılan değer blok ise tüm satırı, satır içi ise sadece içeriği kadar yer kaplar.
HTML Blok Seviye Elementleri (Block-level Elements)
HTML dökümanlarında blok seviye bir element yanına varsayılan olarak başka bir element yerleştirilemez. Bulunduğu satır komple kendine tahsis edilmiştir. Tabii her zamanki gibi CSS kullanarak bu duruma da müdahale edebiliriz.
Aşağıdaki tabloda HTML’deki 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> |
HTML <div> Elementi
Belki de bir web sayfası kodlarken en çok kullanacağınız element <div> olacaktır. Diğer elementlerin taşıyıcısı olarak kullanılan bu element, menü, logo, sayfa üstü, sayfa altı gibi mantıksal bölümlere ayrılırken yaygın bir şekilde kullanılmaktadır.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
HTML Satır İçi Elementleri (Inline Elements)
HTML dökümanlarında satır içi bir element varsayılan olarak ancak içeriği kadar yer kaplar. 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> |
HTML <span> Elementi
Metinler <span> elementi içerisinde yazılabilir. Pekala CSS ile span elementine istediğimiz biçimi verebiliriz.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.