Referensi Belajar HTML span tag. Tutorial dan panduan mengenai element <span>...</span>. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <span>. HTML <span> element merupakan element inline (elemen yang tidak membentuk garis baru) yang digunakan untuk mengelompokkan beberapa element yang dimaksudkan untuk memudahkan dalam pemberian style (dengan CSS). Misalnya, memudahkan untuk men-style element ketika digunakan bersama dengan global attributes, contohnya: attribute class, lang atau dir. <span> element hanya digunakan pada sebuah konten yang tidak merepresentasikan apapun, yang tidak memiliki arti semantic (semantic meaning).
<span> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
<span> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya. Contoh <span> didalam <p> element.
<p>Teks didalam paragraf, <span>Teks didalam span</span></p> Contoh 2Contoh <span> dengan CSS style.
<p>Aku cinta kamu = <span lang="en">I love you</span></p> <p>Aku rindu kamu = <span lang="en">I miss you</span></p>
[lang="en"] { color: blue; } Contoh diatas misalnya, jika kita ingin memberi style warna biru hanya untuk terjemahan berbahasa inggris (lang="en") saja. Artinya, setiap element yang memiliki attribute lang="en" akan memiliki teks berwarna biru. Hasil dari kedua contoh diatas dapat dilihat pada demo editor pada contoh lengkap dibawah ini (klik link demo editor): Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8" /> <title>Demo HTML span tag by:apacara.com</title> <style> [lang="en"] { color: blue; } </style> </head> <body> <h3>Contoh 1</h3> <p>Teks didalam paragraf, <span>Teks didalam span</span></p> <hr /> <h3>Contoh 2</h3> <p>Aku cinta kamu = <span lang="en">I love you</span></p> <p>Aku rindu kamu = <span lang="en">I miss you</span></p> </body> </html> Berikut adalah keterangan mengenai dukungan (support) dari beberapa browser.
CSS untuk element <span> yang mungkin akan diberlakukan ketika awal inisial. |