Artikel Terbaru

4 Keunggulan Utama Bitcoin

Sebelum membicarakan tentang bitcoin, terlebih dahulu mari pahami apa yang dimaksud dengan uang. Apa sebenarnya yang dimaksud dengan uang? Pada dasarnya, uang adalah segala sesuatu yang mewakili nilai tertentu.

6 Contoh Pengelompokkan Elemen Menggunakan Tag Span pada HTML

Elemen span pada HTML secara umum merupakan inline container untuk inline elemen dan inline konten. Elemen ini digunakan untuk mengelompokkan elemen untuk pengaturan style, yang merupakan cara yang lebih baik yang dapat digunakan jika tidak terdapat elemen semantik lainnya yang tersedia. sman hampir sama seperti tag div, dimana tag div merupakan tag level blok, sedangkan span merupakan tag inline.

  1. Tag span digunakan untuk mengelompokkan inline elemen.
  2. Tag span tidak membuat perubahan visual melalui tag itu sendiri.
  3. Tag span hampir sama seperti tag div, tetapi tag div berada pada level blok, sedangkan tag span berada pada inline tag.

Sintak:
<span class=""> Beberapa Teks... </span>

Pada contoh berikut akan dibuat tiga buah contoh menggunakan bolditalicunderline, dengan warna font hijau dan tipe huruf adalah Courier New. Dengan menggunakan beberapa tag seperti <b>, <i>, <u>, dan <font> untuk setiap baris tampilan.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Tag Span

</title>

</head>

 

<body>

<h2>

Selamat Datang

</h2>

 

<!-- Baris Pertama -->

<font 

color="009900" 

size="6">

<b><u><i>

Baris Kode Pertama

</i></u></b>

</font>

 

</br>

 

<!-- Baris Kedua -->

<font 

color="009900" 

size="6">

<b><u><i>

Baris Kode Kedua

</i></u></b>

</font>

 

</br>

 

<!-- Baris Ketiga -->

<font 

color="009900" 

size="6">

<b><u><i>

Baris Kode Ketiga

</i></u></b>

</font>

</body>

 

</html>

Output:

Selamat Datang

Baris Kode Pertama
Baris Kode Kedua
Baris Kode Ketiga


Dengan menggunakan tag <span> maka dapat dikurangi penggunakan kode program dan atribut pada HTML seperti diperlihatkan padan contoh berikut.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Span

</title>

 

<style type=text/css>

span

{

color: green;

text-decoration: underline;

font-style: italic;

font-weight: bold;

font-size: 26px;

}

</style>

 

</head>

 

<body>

 

<h2>

Selamat Datang

</h2>

 

<span>

Makan Nasi Kucing

</span>

</br>

 

<span>

Makan Nasi Kucing

</span>

</br>

 

<span>

Makan Nasi Kucing

</span>

</br>

 

</body>

 

</html>

Output:

Selamat Datang

Makan Nasi Kucing
Makan Nasi Kucing
Makan Nasi Kucing




Seperti yang diketahui tag span merupakan tag baris yang membutuhkan ruang sejumlah yang diperlukan dan menyisakan ruang untuk elemen lain. Contoh berikut memperlihatkan semua elemen dari empat rentang yang akan ditampilkan pada baris yang sama karena pada setiap tag hanya membutuhkan ruang yang diperlukan dan sisa ruang atau space kosong untuk elemen lainnya.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Tag Span

</title>

</head>

 

<body>

<h2>

Selamat Datang

</h2>

 

<span 

style="background-color:powderblue;">

ELF

</span>

 

<span 

style="background-color: lightgray;">

Kontribusi

</span>

 

<span 

style="background-color: yellow;">

Artikel

</span>

 

<span 

style="background-color: lightgreen;">

Pisang

</span>

</body>

 

</html>

Output:

Selamat Datang

ELF Kontribusi Artikel Pisang


Tag span dapat digunakan untuk mengatur warna atau background warna yang merupakan bagian dari teks.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Tag Span

</title>

</head>

 

<body>

<h2>

Selamat Datang

</h2>

 

<!-- Penerapan tag span

 didalam paragraf dengan

 sytle yang berbeda-beda. -->

 

<p>

<span style="background-color:lightgreen">

Blog Elfan</span> adalah blog ilmu komputer yang<span

style="color:blue;"> dipublikasikan</span> secara pribadi<span

style= "background-color:lightblue;"> oleh pemilik blog</span> dan dibagikan untuk seluruh pembaca secara gratis.</p>

</body>

 

</html>

Output:

Selamat Datang

Blog Elfan adalah blog ilmu komputer yang dipublikasikan secara pribadi oleh pemilik blog dan dibagikan untuk seluruh pembaca secara gratis.



Memanipulasi javaScript menggunakan tag span: contoh berikut memperlihatkan penambahan tag span didalam paragraf dengan id="demo" yang digunakan untuk mengubah teks dengan menerapkan javaScript pada contoh program.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Selamat Datang

</h2>

 

<p>

<span 

id="demo"

style="background-color:lightgreen;">

ELF

</span>

Portal ilmu komputer

</p>

 

<!-- membuat button 

menggunakan javaScript -->

<button 

type="button" 

onclick=

"document.getElementById('demo').innerHTML =

'yohooo!!!'">

Ganti Teks!

</button>

 

</body>

 

</html>

Output:

Selamat Datang

ELFPortal ilmu komputer



Perbedaan Antara Tag Div dan Tag Span
Tag div dan tag span merupakan dua tag umum yang digunakan ketika menciptakan halaman dokumen menggunakan HTML dan menampilkan fungsi yang berbeda pada keduanya, dimana tag div berada pada level blok dan tag span pada elemen inline tag div yang menciptakan line break dan division secara default antara teks sebelum dan setelah paragraf. Tag div menciptakan kotak terisah atau container untuk semua elemen yang berada pada tag tersebut seperti teks, gambar, dan paragraf seperti diperlihatkan pada tabel 1.

Tabel 1 Tag Div vs Tag Span
PropertiDiv TagSpan Tag
Elements TypesBlock-LevelInline
Space/WidthMengandung seluruh lebar yang tersediaMengambil ukuran lebar yang diperlukan saja
ExamplesHeadings, Paragraph, formAttribute, image
UsesWeb-layoutcontainer untuk beberapa teks
AttributesTidak diperlukan, dengan css umum, kelasTidak diperlukan, dengan css umum, kelas


Tag span tidak menciptakan line break yang sama seperti tag div, teapi memungkinkan user untuk memisahkan konten tertentu dari elemen lainnya pada satu halaman atau dokumen html yang sama.

Contoh:

<html>

 

<head>

 

<title>

ELF

</title>

 

<style type=text/css>

p

{

background-color:gray;

margin: 10px;}

 

div

{

color: white;

background-color: 009900;

margin: 2px;

font-size: 25px;}

 

span

{

color: black;

background-color: gray;

margin: 5px;

font-size: 25px;}

</style>

 

</head>

 

<body>

<div > div tag </div>

<div > div tag </div>

<div > div tag </div>

<div > div tag </div>

 

<span>span-tag</span>

<span>span-tag</span>

<span>span-tag</span>

<span>span-tag</span>

</body>

 

</html>

Output:
div tag
div tag
div tag
div tag
span-tag span-tag span-tag span-tag

Komentar

  1. Apa yang dimaksud dengan tag span pada dokumen html?

    BalasHapus
    Balasan
    1. Elemen HTML SPAN merupakan wadah sebaris yang digunakan untuk menyusun konten, yang secara inheren tidak mewakili apapun. Tag ini dapat digunakan untuk mengelompokkan elemen untuk tujuan penataan sytle yang menggunakan atribut class atau id, atau karena elemen tersebut berbagi nilai tersebut, seperti lang.

      Hapus
  2. Apa perbedaan antara tag div dan tag span pada dokumen html?

    BalasHapus
    Balasan
    1. Tag span dan tag div keduanya merupakan elemen HTML generik yang mengelompokkan bagian-bagian terkait dari halaman web. Namun, kedua tag tersebut juga melayani fungsi yang berbeda, dimana tag div digunakan untuk pengaturan tingkat blok dan style elemen halaman, sedangkan tag span digunakan untuk pengaturan dan gaya sebaris saja.

      Hapus
  3. Apa perbedaan antara tag span dan tag p pada dokumen html?

    BalasHapus
    Balasan
    1. Span adalah tag sebaris, dan p adalah tag blok yang digunakan pada paragraf. Browser akan merender baris kosong yang berada dibawah paragraf, sedangkan span akan merender pada baris yang sama.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.

POIN 6, Jika ada pihak ketika yang ingin memasang iklan pada blog ini secara langsung, maka dapat menghubungi pemilik blog melalui kontak 0882 3218 8316.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

4 Contoh Program Java dan Multiple Inheritance

Perbedaan Antara int main() dan int main(void) pada Bahasa C