Sebelumnya, kita sudah membahas cara membuat link internal di HTML. Selanjutnya kita bahas apa perbedaan block element dan inline element HTML. Berikut pembahasan AneIqbal selengkapnya.
Block Element dan Inline Element
Tag HTML ada 2 jenis, yakni block dan inline. Perbedaannya adalah pada tampilannya di web browser.
Block akan membuat baris baru dan memisahkan diri dari tag di sekitarnya. Sedangkan inline tidak membuat baris baru dan menyatu dengan tag di sekitarnya.
Kita bahas satu per satu. Mulai dari block element.
Block element
Tag HTML yang berjenis block element akan memisahkan diri dari tag di sekitarnya. Jadi halaman HTML akan menjadi terbagi-bagi, atau menjadi blok.
Contoh tag berjenis block, yakni: tag paragraf <p>, tag list (<ul>, <ol>, atau <dl>), dan heading (<h1> s/d <h6>).
Block element akan ditampilkan terpisah dari tag sebelum dan sesudahnya dengan berpindah baris baru. Dan biasanya, ada spasi antara tag sesudah dan sebelumnya.
Kita coba koding HTMLnya.
<!DOCTYPE html>
<html>
<head>
<title>Perbedaan block element dan inline element</title>
</head>
<body>
<h1>Ini adalah element h1</h1>
<p>Ini adalah element p</p>
<ul>
<li>Dan ini adalah elemen ul</li>
<li>Dan ini adalah elemen ul juga</li>
</ul>
</body>
</html>
Simpan dengan nama block-elemen.html. Kalau dijalankan, hasilnya akan seperti ini:
Dari gambar di atas kita bisa lihat bahwa block element akan terpisah dari tag di sekitarnya (membuat blok) dan membuat baris baru. Terlihat juga ada jarak di antara bloknya.
Inline element
Kalau tag berjenis inline element, tidak akan membuat blok sendiri, tidak terpisah dari tag di sekitarnya. Tag jenis ini akan menyatu dengan tag yang ada di sekitarnya. Juga, tidak membuat baris baru.
Contoh tag berjenis inline, yakni: tag <em>, tag <i>, dan tag <b>.
Kita coba buat file HTML dengan nama inline-element.html. Seperti ini kodenya.
<!DOCTYPE html>
<html>
<head>
<title>Perbedaan block element dan inline element</title>
</head>
<body>
<em>Ini adalah elemen em</em>
<b>Ini adalah element b</>
<i>Ini adalah element i</i>
</body>
</html>
Hasilnya akan seperti ini:
Terlihat kan perbedaannya dengan block element. Inline element akan saling menyatu dan tidak terpisah-pisah, tidak membentuk blok, dan tidak membuat baris baru. Dia akan mengikuti alur dari tag-tag yang ada di sekitarnya.
Itulah perbedaan block element dan inline element.
Tampilan perbedaan dari kedua jenis tag tersebut tidaklah mutlak karena dapat diubah oleh CSS. Misalnya, block element menjadi inline element, inline element menjadi block element.
Namun, Karena HTML digunakan untuk menyusun struktur halaman web, secara struktur begitulah perbedaan block element dan inline element.
Setelah itu kita akan bahas beberapa cara formating atau memanipulasi teks di HTML. Manipulasi teks itu seperti teks miring, bercetak tebal, bergaris bawah, teks bercoret, teks quote, dan lainnya.
Pertama-tama, kita akan bahas cara membuat tulisan miring di HTML terlebih dahulu.
