Seringkali, ketika membuka laman sebuah website, kita melihat bagian tertentu teks yang diberi style warna, teks miring atau garis bawah yang akan membedakan dengan teks lainnya. Biasanya, bagian teks yang telah diberi style ini digunakan untuk menunjukkan maksud tertentu atau untuk memberikan penekanan tentang sesuatu agar mendapat fokus lebih dari visitor.
Di HTML, untuk memberi style di bagian tertentu teks dapat menggunakan elemen span atau tag <span>. Elemen span adalah salah satu elemen inline HTML yaitu elemen yang dapat digunakan di dalam element block seperti elemen p, h1, ol, ul, li dan tidak menghasilkan baris baru. Umumnya, elemen span digunakan untuk tujuan styling dengan memanfaatkan CSS. Beberapa atribut yang umum digunakan di elemen span adalah style, class dan id.
Misalnya, Anda ingin memberi style pada bagian tertentu teks pada paragraf (tag <p>). Anda dapat membungkus bagian teks yang akan diberi style dengan tag <span> dan kemudian menggunakan CSS untuk memberlakukan style, misalnya memberi warna, membuat teks menjadi miring, memberi garis bawah dan lain sebagainya. Berikut ini contoh sederhana menggunakan elemen inline span di elemen block p.
Baca artikel Menggunakan Elemen p Di HTML
<!DOCTYPE html> <html> <body> <h2>Elemen span</h2> <p>Ketika keluar rumah, bapak memakai <span style="color:blue;font-style:italic;font-weight:bold;">kemeja biru</span> dan ibu memakai <span style="color:red;font-style:italic;font-weight:bold;text-decoration:underline;">blazer merah</span>.</p> </body> </html>
Hasil menjalankan kode HTML di web browser adalah sebagai berikut:
