Perbedaan Tag Bertipe Block Element Dengan Inline Element Dalam HTML

Tag HTML memiliki 2 jenis tipe, yaitu block element dan inline element. Pada artikel kali ini kita akan membahas perbedaan kedua jenis tipe tag HTML ini.

Pengertian Tag HTML Dengan Tipe Block Element

Tag HTML dengan tipe block element bertujuan untuk membuat tag HTML memisahkan dirinya dengan tag HTML yang ada disekitarnya, seolah-olah tag bertipe block element berada dalam sebuah kotak yang panjang.

Tag HTML yang termasuk tipe block element yaitu : <p>, <h1> sampai <h6>, <ol>, <ul>, <li>, <table>, <form>, fieldset, legend dan <div>.

Berikut ini contoh penulisan tag bertipe block element dalam HTML :
<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML</title>
</head>
<body>
    <h1>Tag Heading Level 1</h1>
    <p>Tag Paragraf</p>
    <ol>
        <li>Tag List 1</li>
        <li>Tag List 2</li>
    </ol>
</body>
</html>
Tag HTML tipe block element

Terlihat pada gambar diatas, bahwa masing-masing tag jenis block element ini akan memisahkan dirinya dengan tag yang berada disekitarnya atau ditampilkan pada baris baru.

Pengertian Tag HTML Dengan Tipe Inline Element

Berbeda dengan tag HTML bertipe block element, tag HTML dengan tipe inline elemen ini akan menyatu dengan tag yang berada disekitarnya tanpa membuat baris baru atau memisahkan dirinya dengan tag yang berada disekitarnya.

Tag HTML yang termasuk tipe inline element yaitu :<a>, <b>, <strong>, <i>, <em>, <ins>, <u>, <img>, <input>, <label> dan <span>.

Berikut ini contoh penulisan tag bertipe inline element dalam HTML :
<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML</title>
</head>
<body>
    <b>Bold</b> <i>italic</i> <u>underline</u> <span>span</span>
</body>
</html>
Tag HTML tipe inline element

Seperti yang terlihat pada gambar diatas, bahwa masing-masing tag jenis inline element ini akan menyatu dengan tag yang berada disekitarnya atau ditampilkan pada baris yang sama.

Meskipun kedua tipe tag HTML ini memiliki tampilan yang berbeda, namun dengan CSS kita dapat mengubah tampilan tipe block element menjadi inline element dan begitupun juga sebaliknya.

Berikut ini contoh kode HTML yang membuat tag bertipe block element menjadi inline element dan begitupun juga sebaliknya :
<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML</title>
<style>
h1,
p,
ol,
li {
    display: inline;
}

b,
i,
u,
span {
    display: block;
}
</style>
</head>
<body>
<fieldset>
    <legend>Tag HTML tipe block element menjadi inline element</legend>
    <h1>Tag Heading Level 1</h1>
    <p>Tag Paragraf</p>
    <ol>
        <li>Tag List 1</li>
        <li>Tag List 2</li>
    </ol>
</fieldset>
    <br/>
    <br/>
<fieldset>
    <legend>Tag HTML tipe inline element menjadi block element</legend>
    <b>Bold</b> <i>italic</i> <u>underline</u> <span>span</span>
</fieldset>
</body>
</html>
Tag HTML tipe block element menjadi inline element dan begitupun juga sebaliknya

Seperti yang terlihat pada gambar diatas, tag HTML tipe block element ditampilkan pada baris yang sama dan tag HTML tipe inline element ditampilkan pada baris yang baru. Ini karena kita mengubahnya dengan CSS, dengan cara menambahkan masing-masing tag HTML tipe block element dengan properti display: inline dan menambahkan masing-masing tag HTML tipe inline element dengan properti display: block. Jika Anda belum begitu paham dengan CSS Anda tidak perlu khawatir, karena nanti akan Saya buatkan artikel Tutorial CSS.

Kita juga bisa menambahkan didalam tag HTML tipe block element dengan tag HTML tipe block element dan inline element dan begitupun juga sebaliknya.

Berikut ini penulisan kode HTML :
<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML</title>
</head>
<body>
    <h1>Hallo Dunia!</h1>
    <p>Kali ini Saya sedang <b>Belajar HTML</b> di <a href="mas-abdi.blogspot.com">mas-abdi.blogspot.com</a></p>
</body>
</html>
Tag HTML tipe inline element dalam block element

Seperti yang terlihat pada kode HTML diatas terdapat tag dengan tipe inline element yaitu tag <b> dan <a> didalam tag tipe block element yaitu tag <p>.

Pada artikel selanjutnya kita akan membahas Cara Membuat Huruf Tebal Dalam HTML Dengan Tag b dan strong.

Comments

Popular posts from this blog

20 Template Blogger SEO Friendly dan Responsive Gratis

Cara Menginstall Phoenix OS Pada Windows 10

Cara Menghapus Antivirus Avast Dengan Benar

Cara Mengatur Posisi dan Tampilan Gambar di HTML

Cara Membuat Bootable USB Flashdisk Windows 10 Menggunakan Rufus

Cara Memblokir Akses Internet Aplikasi Windows 10 Tanpa Aplikasi Pihak Ketiga

4 Template Blogger Buatan Mas Sugeng Yang Dibagikan Secara Gratis

7 Aplikasi Pemutar Video Terbaik Untuk PC/Laptop

41 Latar Belakang Abu-abu Yang Cocok Untuk di Desain

Kumpulan Pantun Jenaka