tRikSonic
Tema
  • Original
  • Translate

HTML noscript Tag

Terakhir diperbarui : 23 Mei 2018 - 09.49

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.
HTML noscript
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 :
  1. <meta>
  2. <link>, dan
  3. <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 <style> dan <link> kedalam element <noscript> dan juga tidak usah menambahkan element <noscript>...</noscript> lainnya.
Hal tersebut dikarenakan halaman akan melakukan redirect kehalaman / url yang telah ditentukan.

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 terlihat

Contoh 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 tambahan
Silahkan matikan javascript pada browser anda :
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.