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/