Tutorial HTML <noscript>
HTML noscript Tag - belajar html noscript. Element noscript mempunyai definisi sebagai konten alternatif, dimana jika user / pengunjung blog / website mematikan fungsi javascript pada browser atau browser yang digunakan tidak mendukung penggunaan javascript, maka element
<noscript> akan menjalankan fungsinya, yang disesesuaikan lagi dengan apa yang ditulis didalam element noscript itu sendiri.
Element
<noscript>, akan sangat berguna untuk pemilik blog/website yang dalam pengoperasian / penyajian sebuah konten terkait dengan penggunaan javascript.Contoh HTML <noscript>
Contoh berikut untuk peletakannya didalam html
<head>...</head>, Perlu diketahui jika element <noscript> diletakan didalam element head ada beberapa element yang diperbolehkan dan berjalan baik untuk browser yaitu :<meta><link>, dan<style>
Contoh dengan element
<meta><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<noscript>
<meta content='0;url=https://example.com/' http-equiv='refresh'/>
</noscript>
</head>
<body>
<p>isi kontent</p>
</body>
</html>
Contoh diatas menjelaskan halaman akan melakukan redirect url yang telah ditentukan. Hanya bekerja jika javascript pada browser tidak aktif.
Tips : Jika cara ini digunakan, disarankan tidak menambahkan element
Hal tersebut dikarenakan halaman akan melakukan redirect kehalaman / url yang telah ditentukan.<style> dan <link> kedalam element <noscript> dan juga tidak usah menambahkan element <noscript>...</noscript> lainnya.Contoh dengan element
<link><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<noscript>
<link rel="stylesheet" href="css/no-script.css" />
</noscript>
</head>
<body>
<p>isi kontent</p>
</body>
</html>
Contoh diatas menjelaskan, jika javascript browser terditeksi tidak aktif, maka css ekternal akan aktif.
Contoh dengan element
<style><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<noscript>
<style>
.js-only {
display:none !important;
}
</style>
</noscript>
</head>
<body>
<article>
<p>isi konten</p>
<button class="js-only" onclick="alert('alert');">Test Javascript</button>
<div class="js-only" id="dom-content">element DIV</div>
</article>
</body>
</html>
Contoh diatas menjelaskan, jika javascript browser terditeksi tidak aktif, maka element html yang mempunyai
className js-only akan tidak terlihatContoh HTML <noscript>
Contoh berikut peletakannya didalam html
<body>...</body>. Untuk penulisan didalam <body>...</body> penulisan bisa diisi dengan element apa saja, kecuali javascript ya.Sebagai catatan : walaupun semua element bisa diterapkan, tapi disarankan tidak menerapkan html
<link/> dan <style>...</style> didalam element <body>...</body>, walaupun dalam penerapannya browser dapat dengan baik membacanya, tapi dalam penulisan html yang baik dan benar serta memenuhi standart validasi html5, hal tersebut tidak benar.Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#info-javascript {
padding :10px;
background : beige;
border : 1px solid silver;
}
</style>
</head>
<body>
<article>
<p>isi konten</p>
</article>
<noscript>
<div id="info-javascript">
<h3>Maaf bowser anda javascript nya tidak aktif</h3>
<p>Mohon aktifkan pengaturan javascript pada browser yang digunakan</p>
<p>Atau gunakan browser lainnya</p>
<p>Terimakasih</p>
</div>
</noscript>
</body>
</html>
Contoh diatas menjelaskan element
<div id="info-javascript">...</div> secara default tidak akan terlihat. Tetapi jika javascript browser terditeksi tidak aktif, maka element <div id="info-javascript">...</div> akan terlihat.
Demo penggunaan HTML <noscript>
Maaf untuk tutorial kali ini saya tidak menyediakan live demo editor
Untuk melihat langsung fungsi dari element
<noscript> ini, silahkan matikan javascript pada browser anda, dan akses kembali blog ini, maka akan terlihat perbedaan tampilan blog ini, atau anda juga bisa melihat box dibawah ini akan terlihat text tambahanSilahkan matikan javascript pada browser anda :