Blok HTML dan Elemen Sebaris


Setiap elemen HTML memiliki nilai tampilan default, tergantung pada jenis elemennya.

Ada dua nilai tampilan: blok dan sebaris.


Elemen tingkat blok

Elemen level blok selalu dimulai pada baris baru.

Elemen level blok selalu menggunakan lebar penuh yang tersedia (membentang ke kiri dan ke kanan sejauh mungkin).

Elemen level blok memiliki margin atas dan bawah, sedangkan elemen inline tidak.

Elemen <div> adalah elemen level blok.

Contoh

<div>Hello World</div>

Berikut adalah elemen level blok dalam HTML:


Elemen Sebaris

Elemen sebaris tidak dimulai pada baris baru.

Elemen sebaris hanya membutuhkan lebar sebanyak yang diperlukan.

Ini adalah elemen <span> di dalam paragraf.

Contoh

<span>Hello World</span>

Berikut adalah elemen inline dalam HTML:

Catatan: Elemen sebaris tidak boleh berisi elemen level blok!


Elemen <div>

Elemen <div>tersebut sering digunakan sebagai wadah untuk elemen HTML lainnya.

Elemen <div>tidak memiliki atribut wajib, tetapi style, classdan idbersifat umum.

Saat digunakan bersama dengan CSS, <div>elemen tersebut dapat digunakan untuk menata blok konten:

Contoh

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Elemen <span>

Elemen <span>adalah wadah sebaris yang digunakan untuk menandai bagian dari teks, atau bagian dari dokumen.

Elemen <span>tidak memiliki atribut wajib, tetapi style, classdan idbersifat umum.

Saat digunakan bersama dengan CSS, <span>elemen tersebut dapat digunakan untuk menata bagian teks:

Contoh

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

Ringkasan Bab

  • Ada dua nilai tampilan: blok dan sebaris
  • Elemen level blok selalu dimulai pada baris baru dan menggunakan lebar penuh yang tersedia
  • Elemen sebaris tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan
  • Elemen <div>adalah level blok dan sering digunakan sebagai wadah untuk elemen HTML lainnya
  • Elemen <span>adalah wadah sebaris yang digunakan untuk menandai bagian dari teks, atau bagian dari dokumen

Tag HTML

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .