Setiap elemen pada HTML memiliki tampilan Default tergantung dari tipe elemen itu sendiri. Terdapat dua jenis tampilan pada elemen HTML yaitu Block dan Inline.
Elemen Block
Elemen Block (Block-Level) pada HTML selalu diawali dengan baris baru.Elemen <div> merupakan elemen Block-Level.
Contoh
<div>Halo</div>
<div>Semuanya</div>
Berikut adalah beberapa elemen HTML yang merupakan kategori Block-Level Element:
- <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>
Inline Element
Inline Element pada HTML tidak diawali dengan baris baru.Teks didalam elemen <span> merupakan Inline Element.
Contoh
<span>Halo</span>
<span>Semuanya</span>
Berikut adalah beberapa elemen HTML yang merupakan kategori Inline Element.
- <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>
Elemen <div>
Elemen <dif> dapat kalian gunakan sebagai kontainer (tempat) untuk elemen lain pada HTML.Elemen <div> tidak memiliki atribut khusus, tetapi, kalian dapat menggunakan atribut style, class, dan id.
Ketika digunakan bersamaan dengan CSS, elemen <div> dapat digunakan untuk mengatur tampilan konten didalamnya.
Contoh
<div style="background-color:black;color:white;padding:20px;">
<h2>Indonesia</h2>
<p>Aku bangga menjadi anak Indonesia.</p>
</div>
Elemen <span>
Elemen <span> dapat kalian gunakan sebagai kontainer (tempat) meletakkan teks.Elemen <span> tidak memiliki atribut khusus, tetapi kalian dapat menggunakan atribut style, class, dan id.
Ketika digunakan bersamaan dengan CSS, elemen <span> dapat digunakan untuk mengatur tampilan teks.
Contoh
<h1>Heading itu <span style="color:red">Penting</span></h1>
Tag Group
- <div> - Untuk menentukan bagian pada dokumen HTML (Block-Level).
- <span> - Untuk menentukan bagian pada dokumen HTML (Inline).
Untuk lebih lengkapnya, kalian dapat melihat daftar lengkap Tag HTML.
Sebelumnya: Tutorial Lengkap HTML: List pada HTML - Bagian 17
Selanjutnya: Tutorial Lengkap HTML: Class pada HTML - Bagian 19
Daftar Isi: Tutorial Lengkap HTML
Sumber: https://www.w3schools.com/
Posting Komentar