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.

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, Pembagian Paragraf HTML Menggunakan Tag Section, dan Mengaktifkan Kode Javascript HTML Menggunakan Tag Script.

Tag Span hampir sama seperti tag div, dimana tag div merupakan tag level blok, sedangkan span merupakan tag inline.

Tag span digunakan untuk mengelompokkan inline elemen.
Tag span tidak membuat perubahan visual melalui tag itu sendiri.
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 bold, italic, underline, 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>

<font

color="009900"

size="6">

Baris Kode Pertama

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

</font>

</br>

<font

color="009900"

size="6">

Baris Kode Kedua

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

</font>

</br>

<font

color="009900"

size="6">

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>

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>

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

Properti	Div Tag	Span Tag
Elements Types	Block-Level	Inline
Space/Width	Mengandung seluruh lebar yang tersedia	Mengambil ukuran lebar yang diperlukan saja
Examples	Headings, Paragraph, form	Attribute, image
Uses	Web-layout	container untuk beberapa teks
Attributes	Tidak diperlukan, dengan css umum, kelas	Tidak 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>

{

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>

</body>

</html>

Output:

div tag

span-tag span-tag span-tag span-tag

Referensi Tambahan:

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

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Mengelompokkan Elemen HTML Menggunakan Tag Span"

AnonimMinggu, 11 Juli 2021 pukul 20.40.00 WIB
Apa yang dimaksud dengan tag span pada dokumen html?
BalasHapus
Balasan
AnonimMinggu, 11 Juli 2021 pukul 20.43.00 WIB
Apa perbedaan antara tag div dan tag span pada dokumen html?
BalasHapus
Balasan
AnonimMinggu, 11 Juli 2021 pukul 20.46.00 WIB
Apa perbedaan antara tag span dan tag p pada dokumen html?
BalasHapus
Balasan

Tambahkan komentar

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 -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengelompokkan Elemen HTML Menggunakan Tag Span

Selamat Datang

Selamat Datang

Selamat Datang

Selamat Datang

Selamat Datang

Perbedaan Antara Tag Div dan Tag Span

6 komentar untuk "Mengelompokkan Elemen HTML Menggunakan Tag Span"

Menu Halaman Statis