HTML span tag | belajar <span> element

HTML span tag | belajar <span> element

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


Deskripsi
Penjelasan HTML

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).


Global Attributes
Atribut Secara Global (Keseluruhan)

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

Event Attributes
Atribut event (Peristiwa)

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

Example
Contoh HTML <span> element

Contoh 1

Contoh <span> didalam <p> element.

HTML
<p>Teks didalam paragraf, <span>Teks didalam span</span></p>
Contoh 2

Contoh <span> dengan CSS style.

HTML
<p>Aku cinta kamu = <span lang="en">I love you</span></p>
<p>Aku rindu kamu = <span lang="en">I miss you</span></p>
CSS
[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 Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!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>

SHARE