HTML - Blok
Semua elemen HTML dapat dikategorikan menjadi dua kategori (a) Blok Elemen Level (b)Elemen Inline.
Elemen Blok
Elemen blok muncul di layar seolah-olah mereka memiliki jeda baris sebelum dan sesudahnya. Misalnya, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, dan <address> semuanya adalah elemen tingkat blok. Mereka semua memulai di baris baru mereka sendiri, dan apa pun yang mengikuti mereka akan muncul di baris barunya sendiri.
Elemen Inline
Sebaliknya, elemen sebaris dapat muncul dalam kalimat dan tidak harus muncul di baris baru sendiri. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd>, dan <var> semuanya adalah elemen inline.
Mengelompokkan Elemen HTML
Ada dua tag penting yang sering kami gunakan untuk mengelompokkan berbagai tag HTML lainnya (i) tag <div> dan (ii) tag <span>
Tag <div>
Ini adalah tag level blok yang sangat penting yang memainkan peran besar dalam mengelompokkan berbagai tag HTML lainnya dan menerapkan CSS pada sekelompok elemen. Bahkan sekarang tag <div> dapat digunakan untuk membuat tata letak halaman web di mana kita mendefinisikan bagian yang berbeda (Kiri, Kanan, Atas dll.) Dari halaman menggunakan tag <div>. Tag ini tidak memberikan perubahan visual apa pun pada pemblokiran tetapi ini memiliki arti yang lebih jika digunakan dengan CSS.
Contoh
Berikut adalah contoh sederhana dari tag <div>. Kami akan mempelajari Cascading Style Sheet (CSS) dalam bab terpisah tetapi kami menggunakannya di sini untuk menunjukkan penggunaan tag <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tag <span>
HTML <span> adalah elemen inline dan dapat digunakan untuk mengelompokkan elemen inline dalam dokumen HTML. Tag ini juga tidak memberikan perubahan visual apa pun pada blok tetapi memiliki lebih banyak arti ketika digunakan dengan CSS.
Perbedaan antara tag <span> dan tag <div> adalah bahwa tag <span> digunakan dengan elemen sebaris sedangkan tag <div> digunakan dengan elemen tingkat blok.
Contoh
Berikut adalah contoh sederhana dari tag <span>. Kita akan mempelajari Cascading Style Sheet (CSS) dalam bab terpisah tetapi kita menggunakannya di sini untuk menunjukkan penggunaan tag <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -