Setiap elemen HTML memiliki nilai tampilan default, tergantung jenis terakhirnya. Ada dua jenis elemen tampilan, yaitu elemen block dan inline.
Elemen Blok-Level
Elemen blok-level selalu dimulai dengan baris baru dan biasanya ditambilkan secara terpisah (membentang ke kiri dan kanan sejauh mungkin).
Elemen<div> adalah elemen blok-level.
Contoh :
<!DOCTYPE html> <html> <body> <div style="border: 1px solid black">Hello World</div> <p>Elemen div merupakan elemen blok, yang tampilnya terpisah.</p> </body> </html>
Berikut adalah elemen blok-level di HTML:
<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> <video>
Elemen Inline
Elmen inline tidak seperti elemen blok-level yang memulainya dengan baris baru, elemen ini menyatu dengan tag lainnya dan hanya membutuhkan panjang lebar yang dibutuhkan.
Elemen <span> di dalam paragraf adalah elemen inline.
Contoh :
<!DOCTYPE html> <html> <body> <p>Elemen span inline <span style="border: 1px solid black">Hello World</span> elemen di saping paragrap.</p> <p>Span elemen, salah satu contoh elemen inline.</p> </body> </html>
Berikut adalah elemen inline di HTML:
<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> <var>
Catatan: Elemen inline tidak boleh berada bersama elemen blok-level!
Elemen <div>
Elemen <div> sering digunakan sebagai wadah untuk elemen HTML lainnya. Biasanya bisa berfungsi untuk mengelompokkan elemen dan tag HTML agar tampilannya lebih menarik.
Elemen <div> tidak memerlukan atribut lain, tetapi elemen beriku style, class, dan id bisa digunakan dengan elemen <div>.
Saat digunakan bersama dengan CSS, elemen <div> bisa digunakan untuk mengatur style pada blok konten:
Contoh :
<!DOCTYPE html> <html> <body> <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London merupakan ibu kota inggris.</p> </div> </body> </html>
Elemen <span>
Elemen <span> adalah salah satu elemen inline yang digunakan untuk menandai bagian dari teks atau bagian dari dokumen.
Elemen <span> tidak memerlukan atribut lain, tetapi elemen beriku style, class, dan id bisa digunakan dengan elemen <span>.
Saat digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk memberi style pada bagian teks:
Contoh :
<!DOCTYPE html> <html> <body> <h1>Contoh Elemen Span</h1> <p>Martin punya warna rambut <span style="color:blue;font-weight:bold">hitam</span> dan ivan punya warna <span style="color:darkolivegreen;font-weight:bold">rambut </span> berwarna-warni.</p> </body> </html>
Rangkuman
- Memiliki 2 tampilan elemen yaitu : Elemen Blok-level dan Inline
- Elemen blok-level memulai dengan baris baru dan biasanya terpisah dengan tag sebelumnya dan sesudahnya
- Elemen inline tidak memulai dengan garis baru dan biasanya menyatu dengan tag sebelum dan atau sesudahnya
- Elemen <div> merupakan salah satu elemen blok-level dan sering digunakan sebagai wadah untuk elemen HTML
- Elemen <span> merupakan salah satu elemen inline dan biasa digunakan untuk menandai bagian dari teks, atau bagian dari dokumen
Tag HTML
| Tag | Deskripsi |
|---|---|
| <div> | Mendefinisikan bagian dalam dokumen (level blok) |
| <span> | Mendefinisikan bagian dalam dokumen (inline) |
