Belajar HTML Part 17 - Elemen Blok dan Inline di HTML

Pada dasarnya, tag di dalam HTML itu ada 2 jenis tag elemen, yaitu Tag yang termasuk dalam Element Block dan Tag yang termasuk dalam Element Inline. Perbedaan antara kedua elemen tersebut terletak pada browser ketika membaca atau menampilkan dokumen.

Elemen Blok

Tag Element Block adalah tag yang bertujuan untuk membagi halaman HTML menjadi terpisah atau dengan kata lain menjadi blok. Elemen Blok ini akan di tampilkan oleh browser seolah-olah di dalam sebuah kotak. Tag Elemen Blok ini memiliki jarak spasi antara tag sebelumnya maupun tag sesudahnya.

Tag yang termasuk dalam jenis Tag Elemen Blok:

Pada contoh di bawah ini hanya menggunakan beberapa Tag Elemen blok saja:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<h1>Tag Elemen Blok</h1>

<p>Tag Heading dan Tag Paragraf akan ditampilkan memiliki jarak spasi</p>
<p>Begitu pula dengan tag Paragraf sesudahnya</p>

<ul>
<li>Tag List juga ada jarak spasi</li>
<li>Memiliki jarak yang berbeda</li>
</ul>

</body>
</html>

Hasilnya:

Elemen Inline

Elemen Inline adalah kebalikan dari Elemen Blok, yaitu Tag yang nantinya akan menyatu tidak akan dipisahkan oleh Tag sebelumnya ataupun sesudahnya. Tag Elemen Inline ini tidak memiliki jarak spasi antara tag sebelumnya maupun tag sesudahnya.

Tag yang termasuk dalam Elemen Inline:

Contoh berikut hanya menampilkan beberapa Tag Elemen Inline saja:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
<strong>Tag Elemen Inline</strong>

<i><u><b>Tag em, i, dan b adalah tag yang berjenis tag inline</b></u><i>

<b>Tidak akan dimulai di baris baru dan tidak memiliki jarak spasi dengan tag lain<b>
</p>

</body>
</html>

Hasilnya:

Elemen <div>

Tag <div> ini adalah yang termasuk Tag Elemen Blok tingkat atas, karena tag ini bisa digunakan untuk menampung dan mengelompokkan beberapa elemen menjadi satu kelompok.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
     <div class="header">
         <img src="nama_gambar.png">
        </div>
        
        <div class="menu">
         <ul>
             <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        
        <div class="sidebar">
         <img src="nama_gambar.jpg">
        </div>

        <div class="konten">
     <div id="slidercontainer">
            <h2>Heading</h2>
            <p>Paragraf</p>
        </div>
        
        <div class="footer">
         <footer>Copyright &copy; 2018 | king-octahasan</footer> 
        </div>
</body>
</html>

Hasilnya:

Elemen <span>

Elemen <span> merupakan elemen inline (elemen yang tidak membentuk baris baru). Elemen <span> digunakan untuk mengelompokkan beberapa elemen yang dimaksudkan untuk memudahkan dalam pemberian style pada CSS.

Contoh

<!DOCTYPE html>
<html>
  <head>
    <title>Title Halaman</title>
    <style>
      [lang="en"] {
        color: lightbluesky;
      }
    </style>
  </head>
  <body>
    <h3>Contoh pertama</h3>
    <p>Teks didalam paragraf, <span>Teks didalam span</span></p>

    <hr />
    <h3>Contoh kedua</h3>
    <p>Ikuti aku = <span lang="en">Follow me</span></p>
    <p>Subscribe = <span lang="en">Berlangganan</span></p>

  </body>
</html>

Hasilnya: