Praktek Elemen Block dan Inline

 

diatas adalah contoh display block dan inline beserta outputnya

Di HTML, elemen bisa ditampilkan sebagai block atau inline.

  • Elemen block (seperti paragraf <p> atau heading <h1>) selalu dimulai di baris baru dan memenuhi lebar layar yang tersedia. Misalnya, kalau kita buat dua paragraf, paragraf kedua otomatis muncul di bawah paragraf pertama.
  • Tag HTML yang termasuk dalam kategori display: block secara default, antara lain:

    1. Heading: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    2. Paragraf: <p>
    3. Divisi: <div>
    4. Daftar:
      • Tidak terurut: <ul>
      • Terurut: <ol>
      • Item daftar: <li>
    5. Formulir:
      • Formulir: <form>
      • Input teks area: <textarea>
    6. Tabel dan elemen terkait:
      • Tabel: <table>
      • Baris tabel: <tr>
      • Sel tabel header: <th>
      • Sel tabel data: <td>
    7. Konten semantik:
      • Header: <header>
      • Footer: <footer>
      • Artikel: <article>
      • Bagian: <section>
      • Navigasi: <nav>
      • Asides (keterangan sampingan): <aside>
      • Figure (gambar atau diagram): <figure>
      • Figcaption (keterangan gambar): <figcaption>
  • Elemen inline (seperti link <a> atau teks dengan <span>) tetap berada di satu baris dengan elemen lain, tidak membuat baris baru.
  • Tag HTML yang secara default termasuk dalam kategori display: inline:

    1. Teks dan Gaya Teks:

      • Link: <a>
      • Cetak tebal: <b>
      • Cetak miring: <i>
      • Penekanan teks: <em>
      • Teks tebal kuat: <strong>
      • Teks garis bawah: <u>
      • Teks kecil: <small>
      • Teks superskrip: <sup>
      • Teks subskrip: <sub>
      • Teks dengan garis tengah: <s>
    2. Elemen untuk Struktur Teks:

      • Span: <span> (digunakan untuk membungkus bagian kecil dari teks atau elemen lainnya untuk tujuan styling)
      • Gambar: <img>
      • Label dalam formulir: <label>
      • Input: <input> (kecuali <textarea>, yang merupakan elemen block)
      • Button: <button> (walaupun bisa diatur menjadi block dengan CSS)
    3. Elemen Skrip dan Multimedia:

      • Script: <script>
      • Video (jika diatur dengan gaya inline): <video>
      • Audio: <audio>

    Komentar

    Postingan Populer