Div dan Span dalam HTML untuk belajar Front End Web Dev - Alhamdulillah kali ini penulis sedikit belajar tentang div dan span dalam HTML, seperti biasa setelah belajar penulis akan menuliskan dokumentasinya dalam blog ini yang semoga bermanfaat bagi teman-teman yang lainnya. Mohon maaf jika tulisan ini kurang sempurna, semoga teman-teman berkenan menambahi jika terdapat kekurangan dengan menuliskan tambahan pada kolom komentar dibawah.
Banyak yang mengatakan bahwa tag <div> dan <span> merupakan tag yang tidak memiliki makna apa-apa, namun kedua tag ini menjadi tag yang paling sering digunakan dalam struktur web. Tag <div> dan <span> merupakan tag pembeda yang menjadi container atau pembatas dengan struktur html lainnya, biasanya digunakan dalam menuliskan kode CSS dalam HTML, karena memang tag ini tidak memiliki style bawaan sehingga bisa dengan mudah diubag stylenya dengan menggunakan CSS. Digunakan atribut id untuk tag <div> dan class untuk tag <span> sebagai pembeda keduan tag yang satu dengan yang lainnya.
Sebelum kita menuju penerapan dari CSS pada kedua tag html ini ada baiknya jika kita melihat terlebih dahulu fungsi dari kedua tag ini, yang mana tag <div> sebagai block-line dan tag <span> sebagai in-line. Teman-teman dapat menggunakan cloud jsbin.com untuk belajar HTML, CSS dan JS karena eksekusi hasi dapat dilakukan langsung tanpa perlu menginstal program tambahan di PC teman-teman.
Tanpa kedua tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
before the div.this is some content after the div.
</body>
</html>
Hasil
before the div.this is some content after the div.
dengan tag <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
before the div.<div>this is some content</div>after the div.
</body>
</html>
Hasil
before the div.
this is some content
after the div.
dengan tag <span>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
before the div.<div>this is some content</div><span>after the div.</span>something else.
</body>
</html>
Hasil
before the div.
this is some content
after the div.something else.
Nah itulah hasil dari tag <div> dan tag <span> yang mana tag <div> yang merupakan block-line akan menjadi container line yang terdapat tag <div> dengan line lainnya, sedangkan tag <span> akan menjadi pembatas kata terdapat dalam tag yang terdapat dalam satu line.
Untuk contoh dengan CCS silakan lihat dibawah ini.
<!DOCTYPE html>
<html>
<style type="text/css">
#kalimat{
font-style: italic;
}
.miring{
font-weight: bold;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
<strong>Ini adalah <em>Sebuah</em> paragraf </strong>
</p>
<div id="kalimat">
Ini juga <span class="miring">Sebuah</span> paragraf
</div>
</body>
</html>
HasilYa demikian lah untuk artikel kali ini semoga bermanfaat. Apabila ada bertanyaan silakan tuliskan pada kolom komentar dibawah yak.
Ini adalah Sebuah paragrafIni juga Sebuah paragraf
Mantapp bang, lanjutkan!
BalasHapusIyaah
Hapus