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.
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
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<span>, mempunyai nilai default :
/* none */