Perbedaan Block Element dengan Inline Element tag pada HTML

belajar HTML dan CSS untuk pemula

Sebelum mendiskusikan tag-tag yang terkait dengan text, dalam tutorial ini saya mau menjelaskan mengenai dua macam tipe elemen atau dua macam tipe tag di dalam HTML, yaitu 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 jadi 2 bagian, yaitu tag berjenis block, dan tag berjenis inline. Di dalam tutorial text HTML: Perbedaan block element dengan inline element HTML ini kita akan mengulas perbedaan keduanya.

Pada hakikatnya, seluruh tag dalam HTML dibedakan jadi dua macam: tag bertipe block element dan tag dengan tipe inline element. Perbedaan keduanya terletak dalam cara web browser menampilkan tag ini.

Blok Level Element pada Tag HTML

Tag dengan tipe block level element, bertujuan untuk membagi halaman HTML jadi bagian yang terpisah, atau jadi ‘blok’. Contoh dari blok elemen ini merupakan tag paragraf (<p>), daftar (<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 seakan-akan pada sebuah ‘kotak’ dan dimulai pada baris baru (tidak mengikuti tag sebelumnya). Dan pada umumnya juga mempunyai jarak spasi dari tag sebelum dan tag sesudahnya.

Berikut ialah contoh tag <p>, <h2>, dan <ol> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Infanthree</title>
</head>
<body>
<h2>Saya sedang belajar Block Element HTML</h2>
<h4>Di Infanthree.com</h4>
<p>Tag p dan h1 ialah tag dengan tipe blok</p>
<p>Keduanya akan dimulai di baris baru</p>
<ul>
<li>Tag li juga merupakan blok elemen</li>
<li>dan juga akan berjarak dari tag p sebelumnya</li>
</ul>
</body>
</html>

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

Inline Level Element pada Tag HTML

Beda dengan block level element, tag dengan tipe inline level element akan ‘menyatu’ dengan tag sebelum dan sesudahnya. Tag ini tak akan memulai blok atau baris baru tetapi akan tetap berada di dalam blok itu. Tag inline juga tak akan ditampilkan dengan jarak dari tag sebelum dan sesudahnya. Contoh dari tag inline ini merupakan: <em>, <i>,<strong> dan <b>.

Berikut ialah contoh dari halaman HTML kita sebelumnya, tetapi seluruh tag diganti dengan tag inline seperti <em>, <i>, dan <b>:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Infanthree</title>
</head>
<body>
<p><strong>Saya sedang belajar Inline Element HTML </strong>
<i>Di Infanthree.com </i>
<b>Tag i dan em ialah tag dengan tipe inline</b>
<em>Keduanya tidak dimulai di baris baru</em></p>
</body>
</html>

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

Tampilan yang jadi perbedaan block elemen dengan inline elemen tidaklah mutlak. Dengan memakai CSS, kita dapat mengubah tampilan block elemen ‘seakan-akan’ jadi inline elemen dan sebaliknya. Tetapi sebab tujuan HTML bukanlah untuk tampilan, tetapi untuk membuat struktur halaman web, kita disarankan tidak berkonsentrasi di dalam tampilan, tetapi di dalam struktur. Untuk menangani tampilan dari web, disarankan memakai CSS.

Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

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