Tampilan Block Dan Inline

View Categories

Tampilan Block Dan Inline

Elemen HTML secara umum dapat ditampilkan dengan dua cara. Pertama yaitu secara block dan kedua secara inline.

Tampilan Block

Tag yang ditampilkan secara block akan selalu membuat baris baru pada halaman HTML dan akan mengisi lebar halaman secara penuh. Perhatikan contoh di bawah ini untuk tag div.

<div>Hello World</div>

Jalankan Contoh

Di bawah ini adalah daftar tag yang secara default akan ditampilkan secara block :

  • <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>

Tampilan Inline

Tag yang ditampilan secara inline tidak akan membuat baris baru pada dokumen HTML dan hanya memakai lebar halaman secukupnya sesuai dengan lebar elemen itu sendiri. Perhatikan contoh di bawah ini untuk tag span.

<span>Hello World</span>

Jalankan Contoh

Di bawah ini adalah daftar tag yang secara default ditampilkan secara inline :

  • <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>

Tag Div

Tag div adalah tag block yang paling banyak dipakai sebagai wadah atau container tag lain. Satu tag div biasanya dipakai untuk menampung beberapa tag-tag lain.

Cara Memakai Elemen Container

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Jalankan Contoh

Tag Span

Tag span adalah tag inline yang paling banyak dipakai sebagai wadah tag lain terutama tag dalam bentuk text.

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

Jalankan Contoh

Tutorial sebelumnya : Membuat Halaman Web Dengan HTML Dan CSS
Tutorial setelahnya : Atribut Class
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan