Tutorial Text HTML Part 1: Perbedaan Block Element dengan Inline Element tag HTML

Sebelum membahas tag-tag yang berkaitan dengan text, dalam tutorial ini saya ingin menjelaskan tentang 2 jenis tipe elemen atau 2 jenis tipe tag di dalam HTML, yakni block element dan inline element serta perbedaan keduanya.

Di dalam HTML, seluruh text atau ‘isi’ halaman web harus berada di dalam atau diantara tag pembuka dan penutup HTML. Tag-tag di dalam HTML bisa dibagi menjadi 2 bagian, yakni tag berjenis block, dan tag berjenis inline. Di dalam tutorial text HTML: Perbedaan block element dengan inline element HTML ini kita akan membahas perbedaan keduanya.

Pada dasarnya, seluruh tag dalam HTML dibedakan menjadi 2 jenis: tag bertipe block element dan tag dengan tipe inline element. Perbedaan keduanya terletak dalam cara web browser menampilkan tag ini.

Pengertian Blok Level Element dalam Tag HTML

Tag dengan tipe block level element, bertujuan untuk membagi halaman HTML menjadi bagian yang terpisah, atau menjadi ‘blok’. Contoh dari blok elemen ini adalah tag paragraf (<p>), list (<ol> atau <ul>), dan heading (<h1> s/d <h6>). Block element akan ditampilkan terpisah dari seluruh tag sebelum dan sesudahnya.

Web browser secara default akan menampilkan blok level elemen secara terpisah seolah-olah dalam sebuah ‘kotak’ dan dimulai pada baris baru (tidak mengikuti tag sebelumnya). Dan biasanya juga memiliki jarak spasi dari tag sebelum dan tag sesudahnya.
Berikut adalah contoh tag <p>, <h2>, dan <ol> di dalam HTML:

 

 

Dari contoh tersebut terlihat bahwa masing-masing tag akan ditampilkan di baris baru dan berjarak dari tag sebelumnya.

Pengertian Inline Level Element dalam Tag HTML

Berbeda dengan block level element, tag dengan tipe inline level element akan ‘menyatu’ dengan tag sebelum dan sesudahnya. Tag ini tidak akan memulai blok atau baris baru namun akan tetap berada di dalam blok tersebut. Tag inline juga tidak akan ditampilkan dengan jarak dari tag sebelum dan sesudahnya. Contoh dari tag inline ini adalah: <em>, <i>,<strong> dan <b>.
Berikut adalah contoh dari halaman HTML kita sebelumnya, namun seluruh tag diganti dengan tag inline seperti <em>, <i>, dan <b>:

 

 Terlepas dari tampilan text yang dicetak tebal atau miring, inline elemen adalah jenis tag yang mengikuti alur dari tag HTML yang ada.

Tampilan yang menjadi perbedaan block elemen dengan inline elemen tidaklah mutlak. Dengan menggunakan CSS, kita bisa merubah tampilan block elemen ‘seolah-olah’ menjadi inline elemen dan sebaliknya. Namun karena tujuan HTML bukanlah untuk tampilan, melainkan untuk membuat struktur halaman web, kita sebaiknya tidak berfokus di dalam tampilan, namun di dalam struktur. Untuk menangani tampilan dari web, sebaiknya menggunakan CSS.

Tutorial HTML Lanjutan: 

 

• Tutorial Text HTML Part 2: Cara Membuat Huruf Miring dalam HTML (tag i dan tag em)
• Tutorial Text HTML Part 3: Cara Membuat Huruf Tebal HTML (tag b dan tag strong)
• Tutorial Text HTML Part 4: Cara Membuat Huruf Garis Bawah (underline) (tag u dan ins)
• Tutorial Text HTML Part 5: Cara Membuat Huruf Tercoret (Strikethrough) (tag s dan del)
• Tutorial Text HTML Part 6: Cara Menulis Persamaan Matematis (tag sup dan sub)
• Tutorial Text HTML Part 7: Cara Membuat Kutipan (tag blockquote dan q)
• Tutorial Text HTML Part 8: Cara Membuat Text HTML Tanpa Format (tag pre dan code)
• Tutorial Text HTML Part 9: Cara Untuk Merubah Arah Text dalam HTML (tag bdo)
• Tutorial Text HTML Part 10: Tag Untuk Penulisan Hal Teknis (tag samp, kbd, var)
• Tutorial Text HTML Part 11: Cara Menampilkan Karakter Khusus HTML
• Tutorial Text HTML Part 12: Tag abbr, cite, dfn, dan small untuk Struktur Text HTML
• Tutorial Text HTML Part 13: Tag-tag Deprecated untuk Struktur Text dalam HTML