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.
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.
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.
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
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.
Tag span merupakan salah satu elemen yang penting dalam struktur halaman web. Elemen ini memiliki peran dalam menyusun dan mengelompokkan konten teks atau elemen lain dalam dokumen HTML. Tag span, meskipun tidak terlihat langsung di halaman, memainkan peran yang signifikan dalam pengelolaan elemen-elemen yang ingin diperlakukan dengan cara tertentu. Salah satu kekuatan utama tag span terletak pada kemampuannya untuk mengelompokkan elemen-elemen dalam satu kesatuan tanpa merubah struktur tata letak atau alur dokumen secara keseluruhan.
Tag span biasanya digunakan untuk memberikan penandaan pada bagian tertentu dari konten agar dapat diberikan perlakuan khusus, baik itu dalam bentuk penataan visual atau pemrosesan lain. Elemen ini berfungsi sebagai pembungkus yang tidak mempengaruhi tampilan langsung, namun memberikan ruang bagi pengembang untuk mengaplikasikan gaya atau manipulasi lainnya pada bagian-bagian konten yang ingin dikelompokkan bersama.
Salah satu aspek yang menonjol dari penggunaan tag span adalah fleksibilitasnya. Tag ini tidak memiliki gaya atau atribut visual bawaan, sehingga memberi kebebasan penuh bagi pengembang untuk mendesain tampilan sesuai dengan kebutuhan. Dengan kata lain, tag span hanya bertugas sebagai pembungkus atau elemen yang mengelompokkan bagian-bagian tertentu dari teks atau elemen lainnya untuk memudahkan manipulasi lebih lanjut, tanpa mengubah struktur semantik atau logika dokumen HTML secara keseluruhan.
Berbeda dengan elemen-elemen lain seperti div yang sering kali digunakan untuk tujuan pemisahan atau pembagian elemen dalam sebuah dokumen, tag span lebih sering digunakan untuk mengelompokkan elemen-elemen yang tidak memerlukan pembagian tata letak besar. Elemen div cenderung lebih umum digunakan untuk struktur yang membutuhkan pemisahan antar bagian, seperti pembagian halaman menjadi bagian header, footer, dan konten utama. Sebaliknya, tag span lebih cocok digunakan untuk pengelompokkan kecil, misalnya untuk memberikan gaya pada bagian teks tertentu dalam satu paragraf atau untuk menambahkan atribut yang hanya berlaku pada sebagian kecil dari elemen teks.
Selain itu, tag span sering dipakai bersamaan dengan atribut gaya seperti warna, ukuran huruf, jenis huruf, dan elemen-elemen lain yang berhubungan dengan tampilan visual. Atribut-atribut ini tidak mempengaruhi struktur dokumen HTML secara keseluruhan, tetapi cukup memberikan perubahan pada bagian elemen yang dibungkus dengan tag span. Dalam hal ini, pengelompokkan elemen menjadi lebih efisien karena tidak perlu menambah tag atau elemen lain yang bisa mengubah susunan halaman secara keseluruhan.
Penggunaan tag span juga sangat relevan dalam konteks aksesibilitas dan manipulasi dinamis pada halaman web. Pengelompokan elemen-elemen yang memiliki sifat atau atribut serupa memungkinkan pengembang untuk memberikan perhatian khusus pada bagian tersebut, misalnya dalam hal pengaturan warna atau interaktivitas. Dengan cara ini, konten yang ada di dalam tag span dapat diproses lebih lanjut untuk kebutuhan seperti animasi, efek transisi, atau pemberian fokus secara dinamis ketika pengguna berinteraksi dengan elemen tersebut.
Tidak hanya itu, tag span juga memberikan manfaat besar dalam hal konsistensi. Ketika elemen-elemen di dalam sebuah halaman web memiliki kebutuhan untuk diperlakukan dengan cara tertentu, misalnya dengan cara memberikan warna tertentu atau font khusus, tag span menjadi cara yang efisien untuk memastikan bahwa elemen-elemen tersebut diperlakukan dengan cara yang sama tanpa perlu menambah tag-tag baru atau merubah struktur yang sudah ada. Hal ini membuat kode menjadi lebih bersih, terstruktur, dan lebih mudah dipelihara dalam jangka panjang.
Secara keseluruhan, tag span merupakan salah satu elemen yang sangat berguna dalam pengelolaan elemen-elemen dalam halaman web. Meskipun peranannya terkesan sederhana dan tidak mencolok, penggunaan tag span dapat memberikan kemudahan yang besar dalam pengelompokkan elemen, pengaturan gaya, serta manipulasi dinamis pada halaman web. Ketika digunakan dengan tepat, tag span dapat memberikan pengaruh besar pada pengalaman pengguna dan mempermudah pengembangan aplikasi web yang lebih kompleks.
Selain itu, penggunaan tag span juga sangat relevan dalam pengembangan halaman web yang responsif. Tag span memungkinkan pengembang untuk memberikan gaya atau manipulasi yang hanya diterapkan pada bagian-bagian tertentu dari halaman, tanpa perlu merubah keseluruhan tampilan. Hal ini membuat tag span sangat cocok untuk kebutuhan desain responsif yang memerlukan perubahan tampilan berdasarkan ukuran layar atau perangkat yang digunakan.
Penggunaan tag span dalam pengelompokkan elemen HTML juga sejalan dengan prinsip-prinsip pengembangan halaman web yang efisien dan terstruktur dengan baik. Dengan memastikan bahwa elemen-elemen tertentu dikelompokkan dengan cara yang tepat, tag span memungkinkan pengembang untuk memberikan perhatian yang lebih besar pada elemen-elemen tersebut tanpa mengubah keseluruhan struktur atau tata letak halaman. Prinsip ini sangat penting dalam pengembangan halaman web yang mudah dikelola dan diperbarui, serta dapat menangani berbagai macam kebutuhan desain dan fungsionalitas.
Selain itu, tag span juga sering digunakan dalam konteks integrasi dengan teknologi lainnya, seperti JavaScript, untuk melakukan manipulasi dinamis pada elemen yang telah dikelompokkan. Dalam hal ini, tag span berfungsi sebagai titik fokus untuk mengakses dan memodifikasi bagian-bagian tertentu dari konten web, memberikan fleksibilitas yang lebih besar dalam hal pengolahan data atau interaktivitas. Sebagai contoh, pengembang dapat menggunakan tag span untuk menangani perubahan teks, warna, atau efek lainnya yang terjadi saat pengguna berinteraksi dengan halaman.
Berdasarkan hal-hal tersebut, dapat disimpulkan bahwa tag span merupakan elemen yang sangat penting dalam pengelolaan dan manipulasi elemen-elemen dalam dokumen HTML. Meskipun tampaknya sederhana dan tidak mempengaruhi struktur halaman secara langsung, tag span memberikan banyak manfaat dalam hal pengelompokan, penataan gaya, dan manipulasi dinamis. Dengan pemahaman yang baik tentang cara kerja tag span, pengembang dapat membuat halaman web yang lebih terstruktur, efisien, dan mudah untuk dikelola dalam jangka panjang. Penggunaan tag span dengan bijaksana memungkinkan pengembangan halaman web yang tidak hanya fungsional, tetapi juga mudah disesuaikan dengan berbagai kebutuhan desain dan fungsionalitas yang terus berkembang.
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.
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.
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.
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.
Apa yang dimaksud dengan tag span pada dokumen html?
BalasHapusElemen 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.
HapusApa perbedaan antara tag div dan tag span pada dokumen html?
BalasHapusTag 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.
HapusApa perbedaan antara tag span dan tag p pada dokumen html?
BalasHapusSpan 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