Ads by Yasya El Hakim
Tutorial Lengkap HTML: Block pada HTML - Bagian 18

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> 
See the Pen 77. Block Div by Yasya El Hakim (@elhakimyasya) on CodePen.

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>
See the Pen 78. Inline Span by Yasya El Hakim (@elhakimyasya) on CodePen.

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>
See the Pen 79. Div Capital by Yasya El Hakim (@elhakimyasya) on CodePen.

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>
See the Pen 80. Span Red by Yasya El Hakim (@elhakimyasya) on CodePen.

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/

0Komentar

Sebelumnya Selanjutnya