HTML span tag | belajar <span> element

HTML Fadlullah Fadul December 3, 2018

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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
Previous Article Next Article