Elemen Blok di HTML (Div & Span)

Masih bersambung dengan postingan yang lalu tentang list di html. Sekarang saya akan beri contoh kasus. Jika kita ingin membuat ouput seperti dibawah, apa yang harus kita tulis dalam script html nya.

  • Merah
  • Kuning
  • Hijau

Jika kita tulis script html nya seperti kemarin, maka hasilnya akan seperti dibawah.

  • Merah
  • Kuning
  • Hijau

Kita tidak akan mendapatkan hasil sama seperti list berwarna di atas. Jadi bagaimana solusinya? Maka dari itu sekarang penulis akan sharing masalah Elemen Blok di HTML.  Elemen ini biasanya dikenal dengan tag <div> dan <span>. Keduanya sama – sama sebagai pembatas/pem-blok/pemisah atau apapun itu. Udah mulai bingung kan?

Ya udah kita langsung ke contoh aja biar gak bingung. Perhatikan scripts html listing yang kemaren.

<ul>
	<li>Merah</li>
	<li>Kuning</li>
	<li>Hijau</li>
</ul>

jika di test hasilnya akan begini.

  • Merah
  • Kuning
  • Hijau

sedangkan yang kita perlukan adalah

  • Merah
  • Kuning
  • Hijau

sedangkan jika kita langsung menggunakan style,

<ul>
	<li><style="color: red;">Merah</style></li>
	<li><style="color: yellow;">Kuning</style></li>
	<li><style="color: green;">Hijau</style></li>
</ul>

maka hasilnya akan jadi seperti ini, kacau balau

  • Merah
  • Kuning
  • Hijau

Oleh sebab itu kita gunakan tag <span> sebagai pemblok. coba kita lihat contoh scripts dibawah ini.

<ul>
	<li><span style="color: red;">Merah</span></li>
	<li><span style="color: yellow;">Kuning</span></li>
	<li><span style="color: green;">Hijau</span></li>
</ul>

dan hasilnya pun akan seperti yang kita inginkan

  • Merah
  • Kuning
  • Hijau

Trus bedanya sama tag <div> apa? Untuk share masalah tag <div> penulis akan membaginya pada postingan selanjutnya.

2 responses to “Elemen Blok di HTML (Div & Span)

  1. Pingback: Div dan Span Part 2 | Kang Oncom's Weblog·

  2. Pingback: Kang Oncom Webblog | Journal Of Me·

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s