5 Fitur HTML yang Mungkin Tidak Anda Ketahui

Untuk sebuah bahasa sangat sederhana dan mudah dipelajari, HTML pasti menawarkan jumlah fitur bermanfaat yang tak terduga, banyak di antaranya yang kebanyakan dari kita bahkan tidak tahu. Sulit untuk mengikuti perkembangan zaman dan Anda mungkin berpikir begitu “Anda mungkin tidak tahu” artikel harus tentang tag terbaru, HTML juga memiliki beberapa fitur yang cukup membantu yang sudah ada untuk sementara waktu.

Dari memeriksa ejaan hingga menambahkan pintasan keyboard, dalam artikel ini, saya akan menunjukkan kepada Anda lima fitur HTML yang kurang dikenal.

1. Periksa ejaan saat Anda mengetik

Itu cek ejaan atribut meminta browser untuk memeriksa ejaan saat pengguna mengetik elemen. Atribut ini bersifat global, artinya, Anda dapat menambahkannya ke tag HTML apa pun.

Namun, itu hanya bekerja pada elemen yang bisa ambil input teks. Mendunia itu bermanfaat karena bisa diwarisi oleh elemen anak. Misalnya, tambahkan ke a

menandai dan semua elemen turunannya yang mengambil input teks akan mewarisi atribut ini.

Pengecekan ejaan berfungsi semua teks jenis: teks, pencarian, url, dan e-mail. Ini juga berfungsi </code>, dan elemen yang dapat diedit</strong> (elemen dengan <code>dapat diedit</code> atribut).</p> <p>Nilainya bisa berupa string kosong, <code>benar</code>, atau <code>Salah</code>. String kosong dan <code>benar</code> akan <strong>aktifkan pemeriksa ejaan</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Ketikkan sesuatu di sini </p> </pre> <p>Dalam kode di atas, <strong>keduanya <code><div></code> dan <code><p></code> tag akan memeriksa ejaan</strong> saat pengguna mengetik di dalamnya.</p> <p>Jika pengguna memiliki <strong>menonaktifkan pemeriksaan ejaan</strong> dalam pengaturan browser, ejaan tidak akan diperiksa, <strong>bahkan jika <code>cek ejaan</code> telah ditambahkan</strong>.</p> <h4>2. Aman dari sumber daya CDN yang dikompromikan</h4> <p>Sangat umum untuk menginangi sumber daya, seperti skrip dan file stylesheet, melalui <abbr>CDN</abbr>s. Tetapi, jika <strong>CDN dikompromikan</strong>, begitu juga file yang dihosting, dan jika ada sumber daya yang diambil dikompromikan di situs web Anda, demikian juga situs Anda!</p> <p>Lihat apa yang dikatakan Jaringan Pengembang Mozilla tentang masalah:</p> <blockquote><p><q>... menggunakan CDN juga memiliki risiko, yaitu jika penyerang mendapatkan kendali atas CDN, penyerang dapat menyuntikkan konten jahat sewenang-wenang ke dalam file di CDN (atau mengganti file sepenuhnya) dan dengan demikian juga berpotensi menyerang semua situs yang mengambil file dari CDN itu.</q></p></blockquote> <p>Untuk mencegahnya, <strong>Subresource Integrity (SRI)</strong> diperkenalkan pada awal 2014 oleh W3C. Skema ini <strong>membandingkan nilai hash</strong> (hasil menerapkan fungsi hash ke input) <strong>sumber daya</strong> untuk memvalidasi itu.</p> <p>Katakanlah, ada file JavaScript di <code>https://example.com/example.js</code>. Pertama kamu <strong>menerapkan fungsi hash</strong> ke file itu, lalu <strong>tambahkan nilai hash yang dihasilkan</strong> ke <strong><code>integritas</code> atribut</strong> dari <strong><code><script></code> tag</strong> that imports <code>example.js</code> to your website.</p> <pre name="code"> <script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script> </pre> <p>Sekarang, setiap kali halaman web situs Anda dengan kode di atas harus dimuat <code>contoh.js</code>, browser <strong>pertama-tama menerapkan fungsi hash</strong>, dan memuat dan berlari <code>contoh.js</code> hanya saat itu <strong>nilai hash cocok dengan <code>integritas</code> nilai</strong>.</p> <p>Jika <strong><code>example.com</code> dikompromikan</strong> dan <strong><code>contoh.js</code> terganggu</strong> dengan kemudian nilai hash <code>contoh.js</code> tidak akan cocok dengan <strong><code>integritas</code> nilai</strong>. </p> <p>CDN paling umum sudah menyediakan <strong>SRI <code>integritas</code> nilai-nilai</strong>, tetapi Anda juga bisa membuatnya di sini.</p> <h4>3. Mengesampingkan target formulir di tombol kirim</h4> <p>Anda kemungkinan besar terbiasa dengan <strong><code>target</code> atribut</strong>, salah satu yang memutuskan <strong>di mana sumber daya hyperlink terbuka</strong>, misalnya pada halaman yang sama atau di tab baru. Anda mungkin juga tahu itu sama <code>target</code> atribut yang digunakan dalam <code><form></code> tag memutuskan <strong>di mana respons dari pengiriman formulir ditampilkan</strong>.</p> <p>Dalam salah satu konsep awal HTML5, <code>formtarget</code> didefinisikan bersama dengan empat atribut pengajuan formulir lainnya: <strong><code>formasi</code>, <code>formenctype</code>, <code>formmethod</code></strong>, dan <strong><code>formnovalidate</code></strong>. </p> <p>Atribut-atribut ini bisa <strong>digunakan dengan tombol kirim</strong>, dan mereka menimpa atribut masing - masing di <code><form></code> tag tempat tombol dimiliki.</p> <p>Jadi, ketika suatu formulir dikirimkan menggunakan tombol yang memiliki a <code>formtarget</code> atribut, itu <strong>respon ditampilkan sesuai dengan <code>formtarget</code> nilai</strong>, bukannya <code>target</code> Nilai dari <code><form></code>.</p> <pre name="code"> <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> </pre> <p>Dalam kode di atas, ketika formulir dikirimkan menggunakan tombol kirim kedua (<code>mencetak</code> ), jawabannya akan <strong>muncul dalam konteks penelusuran baru</strong>, seperti di tab baru.</p> <h4>4. Sembunyikan elemen secara semantik</h4> <p>Ketika sampai pada <strong>elemen persembunyian</strong>, kita semua melewati fase-fase yang berbeda dari elemen-elemen persembunyian: menggunakan <strong><code>opacity: 0</code>, <code>visibilitas: disembunyikan</code>, <code>tinggi: 0; lebar: 0</code>, <code>display: tidak ada</code>, <code>indentasi teks: -999px</code></strong> di file CSS kami.</p> <p>Setiap metode memiliki tujuannya, tidak ada yang berlebihan, dan tidak juga yang ini: the <strong><code>tersembunyi</code> Atribut HTML</strong>. Jika suatu elemen memiliki <code>tersembunyi</code> ditentukan di atasnya, itu akan disembunyikan.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Ini berhasil <strong>sama seperti <code>display: tidak ada;</code> Aturan CSS;</strong> elemen dengan <code>tersembunyi</code> atribut <strong>tidak diterjemahkan</strong> di halaman. Setiap skrip di dalam elemen akan dieksekusi, dan jika itu adalah kontrol bentuk, itu akan dikirimkan bersama <strong>kontrol formulir lainnya selama pengiriman formulir</strong>.</p> <p>Namun, manfaatnya <code>tersembunyi</code> apakah itu <strong>semantik sesuai</strong>, setelah semua, HTML5 adalah tentang semantik dan <code>tersembunyi</code> adalah bagian dari rombongan HTML5!</p> <p>Selain itu, ketika suatu elemen disembunyikan, itu harus terjadi <strong>tersembunyi di semua platform</strong>, bukan hanya di peramban web tetapi di pembaca layar, TV, proyektor, dll.</p> <p>Itu juga <strong>tidak tergantung gaya</strong>, bahkan jika Anda menghapus CSS penulis dari halaman, elemen tersebut akan tetap tersembunyi. Sedangkan dalam kasus <code>display: tidak ada;</code> itu tidak akan terjadi. Jadi, pikirkan <code>tersembunyi</code> sebagai <strong>versi ketat dari <code>display: tidak ada;</code></strong>.</p> <h4>5. Tambahkan pintasan keyboard</h4> <p>Itu <strong><code>kunci akses</code> atribut global</strong> sudah didefinisikan dalam HTML4 dan itu <strong>membuat pintasan keyboard</strong> dengan mana pengguna dapat mengoperasikan elemen pada halaman.</p> <p>Kombinasi tombol untuk pintasan akan <strong>tergantung pada dua hal</strong>:</p> <ol><li>itu <strong><code>kunci akses</code> nilai</strong> yang kami berikan kepada suatu elemen</li> <li>itu <strong>tombol yang ditentukan sebelumnya digunakan oleh browser</strong> untuk elemen yang sama</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Jaringan Pengembang Mozilla</figcaption></figure><p>Ambil contoh ini:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Melihat </button> </pre> <p>Di Firefox, jika Anda <strong>tekan kombinasi tombol Alt + Shift + V (atau Alt + Control + V</strong> di macOS) Anda akan mendapatkan lansiran “Lihat diklik”.</p> <p>Karena kunci browser yang ditentukan sebelumnya bervariasi untuk setiap browser dan OS, Anda disarankan <strong>beri tahu pengguna tentang kombinasi tombol</strong> digunakan untuk pintasan.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/5-img-css-properties-you-should-know.html"><img src="//savtec.org/img/images/5-img-css-properties-you-should-know.gif" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/5-img-css-properties-you-should-know.html">5 <IMG> Properti CSS Yang Harus Anda Ketahui</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html"><img src="//savtec.org/img/images_5/5-iphone-apps-to-keep-track-of-your-investments_7.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html">5 Aplikasi iPhone untuk Melacak Investasi Anda</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html"><img src="//savtec.org/img/images/5-hard-drive-formatting-and-partitioning-utilities_3.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html">5 Format Hard Drive dan Utilitas Partisi</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artikel selanjutnya</div> <div class="post-img"><a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html"> <img src="//savtec.org/img/images_6/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite_5.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html">5 Ide Windows 10 Harus Disalin Dari Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artikel sebelumnya</div> <div class="post-img"><a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html"> <img src="//savtec.org/img/images_1/5-html-elements-you-might-not-know-how-to-use.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html">5 Elemen HTML yang Mungkin Anda Tidak Tahu Cara Menggunakan</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Informasi bermanfaat dan tip pengembangan web. Pemrograman, desain web, CSS, HTML, JAVASCRIPT. Konfigurasikan dan instal ulang WINDOWS. Pembuatan situs dan aplikasi dari awal. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>