html-css

HTML Block & Inline Element

Block-level Element

Elemen HTML secara historis dikategorikan sebagai elemen “tingkat blok” atau elemen “tingkat sebaris”. Karena ini adalah karakteristik presentasi, saat ini ditentukan oleh CSS di Flow Layout. Elemen tingkat Blok menempati seluruh ruang horizontal elemen induknya (wadah), dan ruang vertikal sama dengan tinggi isinya, sehingga menciptakan “blok”.

• Elemen level blok selalu dimulai pada baris baru.
• Elemen level blok selalu menggunakan lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
• Elemen level blok memiliki margin atas dan bawah, sedangkan elemen inline tidak.

Contoh:

<!-- Elemen Div ini adalah block level elemen -->
<div>ini adalah block level elemen</div>

Ini adalah Block Level Elemen HTML

• <div>

  Divisi Dokumen

• <section>

  Bagian dari halaman web

• <main>

  Berisi konten utama yang unik untuk dokumen

• <nav>

  Berisi link navigasi

• <footer>

  bagian atau halaman footer

• <header>

  bagian atau halaman header

• <form>

  Memasukan formulir

• <table>

  Tabel

• <p>

  Paragraf

• <ul>	Daftar tidak berurutan

• <pre>

  Teks yang telah diformat sebelumnya

• <li>	Daftar barang

• <ol>	daftar pesanan

• <hr>	Garis Horizontal

• <figure>

  Mengelompokkan konten media dengan keterangan

• <figcaption>

  Keterangan figur

• <address>

  Keterangan Kontak

• <textarea>

  Input data lebih dari satu baris

• <fieldset>

  Label Set bidang

• <hgroup>

  Informasi header grup

• <article>

  Isi konten

• <blockquote>

  Long (“block”) quotation

• <details>

  Menampilkan rincian konten lebih lengkap

• dll

Inline Elemen HTML

Elemen HTML (Hypertext Markup Language) secara historis dikategorikan sebagai elemen “tingkat blok” atau elemen “tingkat sebaris”. Karena ini adalah karakteristik presentasi, saat ini ditentukan oleh CSS di Flow Layout.

• Elemen sebaris(inline) tidak dimulai pada baris baru.
• Elemen sebaris(inline) hanya membutuhkan lebar sebanyak yang diperlukan.

Contoh:

<!-- Elemen span ini adalah elemen sebaris(inline)  -->
<span>ini adalah elemen inline</span>

Ini adalah Inline Elemen HTML

• <a>
• <abbr>
• <audio>
• <br>
• <button>
• <canvas>
• <code>
• <data>
• <datalist>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <label>
• <map>
• <mark>
• <object>
• <script>
• <textarea>
• <video>
• dll

This site is open source. Improve this page.