HTML

Elemen Block dan Inline di HTML: Contoh Sintak dan Cara Memakainya

Setiap elemen HTML memiliki nilai tampilan default, tergantung jenis terakhirnya. Ada dua jenis elemen tampilan, yaitu elemen block dan inline.

Elemen Blok-Level

Elemen blok-level selalu dimulai dengan baris baru dan biasanya ditambilkan secara terpisah (membentang ke kiri dan kanan sejauh mungkin).

Elemen<div> adalah elemen blok-level.

Contoh :

<!DOCTYPE html>
<html>
<body>

<div style="border: 1px solid black">Hello World</div>

<p>Elemen div merupakan elemen blok, yang tampilnya terpisah.</p>

</body>
</html>

Berikut adalah elemen blok-level di HTML:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

Elemen Inline

Elmen inline tidak seperti elemen blok-level yang memulainya dengan baris baru, elemen ini menyatu dengan tag lainnya dan hanya membutuhkan panjang lebar yang dibutuhkan.

Elemen <span> di dalam paragraf adalah elemen inline.

Contoh :

<!DOCTYPE html>
<html>
<body>

<p>Elemen span inline <span style="border: 1px solid black">Hello World</span> elemen di saping paragrap.</p>

<p>Span elemen, salah satu contoh elemen inline.</p>

</body>
</html>

Berikut adalah elemen inline di HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Catatan: Elemen inline tidak boleh berada bersama elemen blok-level!

Elemen <div>

Elemen <div> sering digunakan sebagai wadah untuk elemen HTML lainnya. Biasanya bisa berfungsi untuk mengelompokkan elemen dan tag HTML agar tampilannya lebih menarik.

Elemen <div> tidak memerlukan atribut lain, tetapi elemen beriku style, class, dan id bisa digunakan dengan elemen <div>.

Saat digunakan bersama dengan CSS, elemen <div> bisa digunakan untuk mengatur style pada blok konten:

Contoh :

<!DOCTYPE html>
<html>
<body>

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London merupakan ibu kota inggris.</p>
</div> 

</body>
</html>

Elemen <span>

Elemen <span> adalah salah satu elemen inline yang digunakan untuk menandai bagian dari teks atau bagian dari dokumen.

Elemen <span> tidak memerlukan atribut lain, tetapi elemen beriku style, class, dan id bisa digunakan dengan elemen <span>.

Saat digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk memberi style pada bagian teks:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>Contoh Elemen Span</h1>

<p>Martin punya warna rambut <span style="color:blue;font-weight:bold">hitam</span> dan ivan punya warna <span style="color:darkolivegreen;font-weight:bold">rambut </span> berwarna-warni.</p>

</body>
</html>

Rangkuman

  • Memiliki 2 tampilan elemen yaitu : Elemen Blok-level dan Inline
  • Elemen blok-level memulai dengan baris baru dan biasanya terpisah dengan tag sebelumnya dan sesudahnya
  • Elemen inline tidak memulai dengan garis baru dan biasanya menyatu dengan tag sebelum dan atau sesudahnya
  • Elemen <div> merupakan salah satu elemen blok-level dan sering digunakan sebagai wadah untuk elemen HTML
  • Elemen <span> merupakan salah satu elemen inline dan biasa digunakan untuk menandai bagian dari teks, atau bagian dari dokumen

Tag HTML

TagDeskripsi
<div>Mendefinisikan bagian dalam dokumen (level blok)
<span>Mendefinisikan bagian dalam dokumen (inline)

Hanifah Nurbaeti

Share
Tags: html