Home / HTML / Belajar HTML – Block Level Element dan Inline Level Element

Belajar HTML – Block Level Element dan Inline Level Element

Sebelum saya menutup bab ini, mari kita bahas sedikit tentang block level element dan inline level element. Jika dilihat dari cara web browser menampilkan sebuah element (atau tag), terdapat 2 jenis tampilan, yakni block dan inline. Block level element (atau block level tag) adalah tag-tag HTML yang menjadi bagian terpisah dari alur halaman, dan ditampilkan dalam baris baru. Contoh dari block level element adalah tag <p> dan tag <h1>. Kedua tag ini akan ‘menutup’ tag sebelumnya dan memulai sebuah baris baru (memulai block baru). Umumnya tag ini berada di bagian paling luar dari struktur DOM.

Inline level element (atau inline level tag) adalah tag-tag HTML yang mengikuti tampilan yang sudah ada. Tag ini tidak akan membuat baris baru. Contoh dari inline level element adalah tag <strong> dan <em>. Kedua tag ini digunakan untuk membuat huruf miring dan huruf tebal pada sebuah teks. Inline level element umumnya tidak berdiri sendiri tetapi berada di dalam block level element.

Sebagai contoh, dan juga sebagai template untuk kode-kode HTML yang akan kita gunakan dalam bab berikutnya, save lah kode HTML berikut dengan nama index.html:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Mohon <strong>jangan diganggu</strong>,
lagi serius belajar <em>HTML</em></p>
</body>
</html>

Dan Berikut Ini Merupakan Hasil eksekusi Beberapa Baris Code Diatas :

Belajar HTML - Block Level Element dan Inline Level Element
Dari tampilan diatas, anda dapat melihat perbedaan dari block level element dengan inline level element.

Belajar HTML - Block Level Element dan Inline Level Element

Belajar HTML - Block Level Element dan Inline Level Element

Div dan Span Element

Berkaitan dengan pembahasan mengenai block dan inline element, terdapat 2 tag khusus yang sering dibahas bersamaan, yakni tag <div> dan tag <span>. Kedua element ini tidak memiliki peranan tertentu di dalam HTML namun menjadi sangat berguna ketika dikombinasikan dengan CSS.

Tag <div> adalah block level element, sedangkan tag <span> merupakan inline level element. Keduanya sering digunakan untuk membuat struktur halaman dengan bantuan CSS.

Baik tag <div> maupun tag <span> bisa disebut sebagai “tag tanpa format tampilan”. Maksudnya, kedua tag ini tidak memiliki efek visual apapun.

Sebagai contoh, ketika sebuah teks ditulis ke dalam tag <h1>, teks tersebut akan ditampilkan dengan ukuran besar dan font tebal. Akan tetapi ketika ditulis ke dalam tag <div>, seolah-olah tidak ada perubahan. Kecuali terdapat sedikit spasi diatas dan dibawah teks karena tag <div> termasuk block level element.

Begitu juga halnya dengan tag <span>. Ketika sebuah teks berada diantara tag <span>, tidak ada efek visual apapun. Beda halnya dengan tag <i> yang akan membuat teks tampil dalam huruf miring. Baik tag <span> dan tag <i> termasuk ke dalam kelompok inline level element.

Sifat tag <div> dan <span> yang tidak bermakna ini justru menjadikannya sebagai tag ideal untuk CSS. Karena penggunaan kedua tag ini sangat bergantung kepada CSS,  Dalam bab ini kita telah membahas secara mendalam tentang pengertian tag, atribut dan element dalam HTML. Kita juga telah membahas struktur dasar penulisan HTML.

Untuk bab berikutnya, saya akan membahas dengan detail tentang tag <head>, atau head element, yakni tag dan atribut apa saja yang biasanya ditempatkan di bagian <head> sebuah halaman HTML.

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Title Element

Tag <title> mungkin menjadi tag paling penting di bagian <head>. Tag ini berfungsi untuk menampilkan …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *