Block dan Inline HTML


Setiap elemen HTML memiliki nilai display default, bergantung pada jenis elemennya.

Ada dua nilai display: block dan inline.


Elemen Block-level

Elemen block-level selalu dimulai di baris baru.

Elemen block-level selalu mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).

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

Elemen <div> adalah elemen block-level.


Contoh

<div>Hello World</div>

Berikut adalah elemen block-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

Elemen inline tidak dimulai di baris baru.

Elemen inline hanya membutuhkan lebar yang diperlukan.


Contoh

<span>Hello World</span>

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 berisi elemen block-level


Elemen <div>

Elemen <div> sering digunakan sebagai wadah (container) untuk elemen HTML lainnya.

Elemen <div> tidak memiliki atribut yang diperlukan, tetapi style, class, dan id yang umum.

Saat digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengatur style blok konten.


Contoh

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London adalah ibu kota Inggris.
  Kota terpadat di Inggris Raya, dengan wilayah
  metropolitan lebih dari 13 juta penduduk.</p>
</div>

Elemen <span>

Elemen <span> adalah wadah (container) inline yang digunakan untuk menandai bagian dari teks, atau bagian dari dokumen.

Elemen <span> tidak memiliki atribut yang diperlukan, tetapi style, class, dan id yang umum.

Saat digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk mengatur style bagian teks.


Contoh

<p>Ibu saya mempunyai mata berwarna <span style="color:blue;
font-weight:bold">biru</span> dan ayah saya mempunya mata
berwarna<span style="color:darkolivegreen;font-weight:bold">
hijau gelap</span>.</p>

Ringkasan

  • Ada dua nilai display: block dan inline
  • Elemen block-level selalu dimulai pada baris baru dan menggunakan secara penuh lebar yang tersedia
  • Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar yang diperlukan
  • Elemen <div> adalah block-level dan sering digunakan sebagai wadah (container) untuk elemen HTML lainnya
  • Elemen <span> adalah wadah (container) inline yang digunakan untuk menandai bagian dari teks, atau bagian dari dokumen

Sumber referensi: w3schools

Komentar

Posting Komentar