tRikSonic

HTML span Tag

Terakhir diperbarui : 24 Mei 2018 - 11.45

Tutorial HTML <span>

HTML span - Belajar html span. HTML <span> adalah tag html yang bersifat inline atau sebuah element yang tidak membentuk garis baru dan masih terikat dengan element sebelumnya.
HTML <span> biasaya di gunakan untuk mempemudah pada pemberian gaya style baik secara inline ataupun melalui attribute class ataupun attribute lainnya dengan tujuan agar tidak mengganggu element yang lain.
Selain penggunaan nya untuk pemberian gaya style, element ini juga sering digunakan sebagai wadah dan kontrol dari penggunaan javascript.
background html

Contoh HTML <span>

<h2>Tutorial Belajar <span>HTML</span> Dasar</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<h2>Tutorial Belajar <span>HTML</span> Dasar</h2>

</body>
</html>

Contoh HTML <span>

<h2>Tutorial Belajar <span style="color:red;">HTML</span> Dasar</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<h2>Tutorial Belajar <span style="color:red;">HTML</span> Dasar</h2>

</body>
</html>

Contoh HTML <span>

<style>
.demo {
    color: #ff861c;
    text-shadow: 2px 0px 1px #333333;
}
</style>

<h2>Tutorial Belajar <span class="demo">HTML</span> Dasar</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.demo {
    color: #ff861c;
    text-shadow: 2px 0px 1px #333333;
}
</style>
</head>
<body>

<h2>Tutorial Belajar <span class="demo">HTML</span> Dasar</h2>

</body>
</html>

Contoh HTML <span>

<h2 style="color:blue;">
  Tutorial Belajar <span style="color:red;">HTML</span> Dasar
</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<h2 style="color:blue;">
  Tutorial Belajar <span style="color:red;">HTML</span> Dasar
</h2>

</body>
</html>

Contoh HTML <span>

<style>
.demo {
    font-size : 130%;
}
.demo:after {
    content :"5";
    color : blue;
    font-size : 150%;
}
</style>

<h2>
  Tutorial Belajar <span class="demo">HTML</span>
</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.demo {
    font-size : 130%;
}
.demo:after {
    content :"5";
    color : blue;
    font-size : 150%;
}
</style>
</head>
<body>

<h2>
  Tutorial Belajar <span class="demo">HTML</span>
</h2>

</body>
</html>

Contoh HTML <span>

<h2>
  Tutorial Belajar <span id="demo">HTML</span>
</h2>

<button onclick="test();">Klik button ini</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
span {
   color : red;
}
span.active {
   color : blue;
}
</style>
</head>
<body>

<h2>
  Tutorial Belajar <span id="demo">HTML</span>
</h2>

<button onclick="test();">Klik button ini</button>

<script>
function test(){
   var el = document.getElementById("demo");
   el.innerHTML = "CSS";
   el.className = "active";
}
</script>

</body>
</html>

Global Attributes:

Element <span> mencakup Global Attributes HTML.

Event Attributes:

Element <span> mencakup Event Attributes HTML.

Browser Support :

Desktop

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <span>, mempunyai nilai default :
/* none */
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.