Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengelompokkan Elemen HTML Menggunakan Tag Span

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. 


6 Contoh Pengelompokkan Elemen Menggunakan Tag Span pada HTML
Ilustrasi Tag Span HTML

Sebelum memahami lebih dalam materi tentang Mengelompokkan Elemen HTML Menggunakan Tag Span, terlebih dahulu pelajari materi tentang: Membuat Teks Berukuran Kecil pada HTML Menggunakan Tag Small [klik], Pembagian Paragraf HTML Menggunakan Tag Section [klik], dan Mengaktifkan Kode Javascript HTML Menggunakan Tag Script [klik].

Tag Span 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.

Baca Juga:

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

Artikel ini didedikasikan kepada: Rafli Akbar Nugraha, Ratih Nuraisyiah, Selli Shofia Rini, Siska Sugiartiningsih, dan Syalvian Arial Malindo.

6 komentar untuk "Mengelompokkan Elemen HTML Menggunakan Tag Span"

  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

Hubungi admin melalui Wa : +62-896-2414-6106

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

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -