Ada dua tipe element di HTML jika dilihat dari cara mereka “memakan” space layout, yaitu element block dan inline.
Element block itu ketika dipanggil, akan memakan satu blok baris dalam layout.
Sedangkan element inline akan memakan sebanyak space yang dibutuhkan saja.
Sudah paham kan? Di ilustrasi yang saya buat diatas, kalau element block dia akan memakan satu baris sampai mentok dari ujung kiri ke kanan.
Sudah paham kan? Di ilustrasi yang saya buat diatas, kalau element block dia akan memakan satu baris sampai mentok dari ujung kiri ke kanan.
Sedangkan inline, dia akan memakan space sesuai yang dibutuhkan. Jika berlebih maka akan otomatis turun ke bawah arah kiri.
Penggunaan
Dua-duanya sangat penting untuk membuat website yang keren.
Yang paling jelas, element block biasanya digunakan untuk membuat layout website secara keseluruhan. Sedangkan inline fokus pada pembuatan konten yang keren.
Tabel Jenis Element
Supaya lebih jelas, berikut element-element yang termasuk block dan inline.
| Tag HTML | Keterangan |
|---|---|
| <address> | Block |
| <article> | Block |
| <aside> | Block |
| <blockquote> | Block |
| <canvas> | Block |
| <dd> | Block |
| <div> | Block |
| <dl> | Block |
| <dt> | Block |
| <fieldset> | Block |
| <figcaption> | Block |
| <figure> | Block |
| <footer> | Block |
| <form> | Block |
| <h1> | Block |
| <h6> | Block |
| <header> | Block |
| <hr> | Block |
| <li> | Block |
| <main> | Block |
| <nav> | Block |
| <noscript> | Block |
| <ol> | Block |
| <p> | Block |
| <pre> | Block |
| <section> | Block |
| <table> | Block |
| <tfoot> | Block |
| <ul> | Block |
| <video> | Block |
| <a> | Inline |
| <abbr> | Inline |
| <acronym> | Inline |
| <b> | Inline |
| <bdo> | Inline |
| <big> | Inline |
| <br> | Inline |
| <button> | Inline |
| <cite> | Inline |
| <code> | Inline |
| <dfn> | Inline |
| <em> | Inline |
| <i> | Inline |
| <img> | Inline |
| <input> | Inline |
| <kbd> | Inline |
| <label> | Inline |
| <map> | Inline |
| <object> | Inline |
| <output> | Inline |
| <q> | Inline |
| <samp> | Inline |
| <script> | Inline |
| <select> | Inline |
| <small> | Inline |
| <span> | Inline |
| <strong> | Inline |
| <sub> | Inline |
| <sup> | Inline |
| <textarea> | Inline |
| <time> | Inline |
| <tt> | Inline |
| <var> | Inline |
Untuk mengubah default style kita membutuhkan css.