Jago Belajar html : Block Element dan Inline Element

Sebelumnya kamu mempelajari perbedaan antara class dan id yang berguna sebagai selector atau pemilih untuk melakukan perubahan terhadap tag dengan menggunakan css, untuk melakukan perubahan tersebut saya menggunakan tag <div> sebagai contoh untuk membuktikan perubahan terhadap tag yang diberikan atribut id dan class, nah pelajaran html kali ini akan membahas lebih dalam mengenai tag <div> yang merupakan block element dan juga tag <span> yang merupakan inline element pada html.

Mengenal block element html

Block element adalah tag yang selalu dimulai dengan baris baru (memiliki jarak) dan lebarnya memenuhi 1 halaman html, pada pembelajaran sebelumnya tag <div> yang saya gunakan lebarnya memenuhi halaman html karena block element akan selalu memenuhi lebar halaman html

Contoh block element

• <p> </p> 
• <div> </div> 
• <h1>- <h6>
• <form> 

Tag <div>

tag <div>biasanya digunakan sebagai sebagai pembagi bagian pada halaman html, seperti membuat bagian menu, header, konten, dan footer, jadi block element akan ditampilkan secara terpisah (terdapat jarak baris baru/enter) dari tag sebelum dan sesudah tag <div> yang seolah-olah setiap bagian yang berada di dalam tag <div> berada dalam sebuah kotak 

Tidak terdapat atribut untuk tag <div> tapi biasanya style atau class dan id digunakan untuk melakukan perubahan css terhadap tag <div>

Berikut penggunaan <div>

Contoh penggunaan tag div pada text editor

Hasil penggunaan tag div pada text editor

Mengenal inline element html

Berbeda dengan block element, elemen inline hanya mengambil lebar sesuai dengan yang kamu inginkan, biasanya digunakan untuk melakukan perubahan terhadap tulisan

Contoh inline element

• <span> </span>
• <a href></a>
• <img> 

tag span

Tag <span> digunakan untuk membuat seleksi terhadap beberapa teks yang berada diantara tag pembuka <span> dan tag penutup </span>, sama halnya dengan tag <div>, tag <span> menggunakan style atau class dan id untuk melakukan perubahan inline css tidak seperti tag div yang biasanya menggunakan external atau internal css untuk melakukan perubahan

Berikut penggunaan tag <span>

Contoh penggunaan tag span pada text editor

Hasil penggunaan tag span pada text editor