Tutorial Text HTML Part 2: Perbedaan Block Element dan Inline Element tag HTML
Halo kawan-kawan,
Sebelum kita melanjutkan pembahasan kita, mari kita mengenal lebih dalam tentang 2 jenis tipe elemen atau 2 jenis tipe tag di dalam HTML, yakni block element dan inline element serta perbedaan keduanya.
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’.
Web browser secara default akan menampilkan blok level elemen secara terpisah dengan membentuk baris atau paragraph 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:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Nusantara Coding</title>
</head>
<body>
<h1>Block Element HTML</h1>
<h4>Saya sedang belajar Block Element HTML</h4>
<p>Tag-tag pada blog Elemen akan membentuk baris baru dari tag sebelumnya</p>
<p>Berikut contoh-contoh tag Blog Elemen</p>
<ul>
<li>Tag li juga merupakan blok elemen</li>
<li>Tag headline juga merupakan blok elemen</li>
<li>dan tag p juga merupakan blok elemen, karena akan membentuk jarak dengan tag sebelumnya</li>
</ul>
</body>
</html>
Hasil Code:
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 meskipun dengan tampilan yang berbeda di web broser (tebal, miring, bergaris bawah, atau teks tercoret). 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>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Nusantara Coding</title>
</head>
<body>
<p><strong>Inline Element HTML. </strong>
<i>Saya sedang belajar Inline Element HTML</i>
<b>Tag-tag pada blog Inline akan terus bersambung dari tag sebelumnya,
<u>selama tidak dipotong tag Block Element</u></b>
<em>Perhatikan Kata-kata berikut ini,
meskipun dipotong tag Inline tidak akan terbentuk baris baru:</em>
<b>Tag b</b> dan <strong>tag strong</strong> membuat huruf tebal,
<i>Tag i</i> dan <em> tag em</em> membuat huruf miring,
<u>Tag u</u> membuat huruf bergaris bawah, dan
<s>Tag s</s> membuat huruf bercoret.
</p>
</body>
</html>
Hasil Code
Catatan: 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.