Tutorial Belajar HTML

Perbedaan Block Element dengan Inline Element tag HTML

Written by adies

Perbedaan Block Element dengan Inline Element tag HTML
Kali ini kita akan belajar tentang tag block element dan tag inline element, sebelum kita bahas lebih jauh ketahui dulu apa itu block element dan inline element.
dalam HTML terdapat 2 jenis kelompok tag, tag bertipe block element dan tag dengan tipe inline element. Sebenarnya keduanya tidak jauh berbeda, hanya berbeda ketika di tampilkan di browser.

Block Level Element Html

Blok berarti terpisah, Tag html dengan tipe block level element, berfungsi untuk membagi halaman. Text dalam tag yang satu terpisah dengan text dalam tag yang lain. Contoh tag dalam block level element adalah tag <h1> – <h6> tag <p> tag <form> dan tag list (<ol> atau <ul>).

Contoh block level element

<!DOCTYPE html>
<html>
<head>
<title>Belajar block level element</title>
</head>
<body>
<h2>belajar Block Element HTML</h2>
<h4>phpdanmysql.com</h4>
<p>Tag p tipe block level element </p>
<ul>
<li>Tag li blok elemen</li>
<li>lihat space dari tag sebelumnya</li>
</ul>
</body>
</html>

Lihat hasil dari code html diatas, semua tag ditampilkan di baris baru, dan ada jarak space dari baris sebelumnya. inilah block element akan memisahkan diri dari tag lainnya.

Inline Level Element Html

Iniline berarti dalam garis, inline level element kebalikan dari block level element, tag tipe inline level element akan menyatu dengan tag lainnya. Tag inline tidak ada jarak space dari tag sebelumnya. Contoh dari tag inline ini adalah: <em>, <i>,<strong> dan <b>.

Contoh tag inline html

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

Lihat contoh diatas semua tag tidak ditampilkan dengan baris baru, semua text dalam tag menyatu dengan text lainnya. Inilah inline element.
Sebenarnya kita bisa manipulasi tampilan text dengan css, disini kita belajar tentang html dulu kalau cssnya akan kita pelajari setelah ini.
Lanjut ke Membuat Huruf Miring dalam HTML

About the author

adies

Ada Komentar?

×