Tren Terkini dalam HTML

Artikel ini menjelaskan tren terkini dalam HTML.

Ini menjelaskan tag yang relatif baru ditambahkan pada HTML5.

YouTube Video

Tren Terkini dalam HTML

Tag <template>

 1<template id="myTemplate">
 2    <div>
 3        <p>Hello, this is a reusable template!</p>
 4    </div>
 5</template>
 6<button onclick="useTemplate()">Use Template</button>
 7<div id="container"></div>
 8<script>
 9    function useTemplate() {
10        const template = document.getElementById('myTemplate');
11        const clone = template.content.cloneNode(true);
12        document.getElementById('container').appendChild(clone);
13    }
14</script>

• Tag <template> digunakan untuk mendefinisikan fragmen HTML yang dapat digunakan ulang dan tetap tersembunyi sampai diaktifkan melalui JavaScript.

• Dengan menggunakan tag <template>, Anda dapat secara dinamis membuat komponen UI yang dapat digunakan kembali, seperti kartu atau item daftar. Ini juga membantu mengurangi duplikasi kode dan meningkatkan pemeliharaan dalam aplikasi skala besar.

• Dalam contoh ini, mengklik tombol 'Gunakan Template' akan menampilkan konten dari tag <template>.

Tag <slot>

 1<template id="myElementTemplate">
 2    <slot name="header">Default Header</slot>
 3    <main>Default Content</main>
 4    <slot name="footer">Default Footer</slot>
 5</template>
 6<my-element>
 7    <p slot="header">Header Content</p>
 8    <p slot="footer">Footer Content</p>
 9</my-element>
10<script>
11    class MyElement extends HTMLElement {
12        constructor() {
13        super();
14        const shadow = this.attachShadow({ mode: 'open' });
15        shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16        }
17    }
18    customElements.define('my-element', MyElement);
19</script>

• Tag <slot> berfungsi sebagai placeholder dalam komponen web untuk menampilkan konten yang diteruskan dari elemen induk.
  • Jika tidak ada konten yang disediakan untuk slot, maka konten cadangan (konten default yang ditulis langsung di dalam tag <slot>) akan ditampilkan.
• Dalam contoh ini, slot bernama (header dan footer) didefinisikan di dalam elemen <template>.
• <my-element> adalah elemen HTML kustom yang didefinisikan oleh pengguna. Atribut slot pada tag <p> di dalam elemen ini menentukan nama slot dan konten yang akan dimasukkan ke dalam slot.

Tag <dialog>

 1<dialog id="exampleDialog">
 2    <p>This is a dialog box.</p>
 3    <button id="closeButton">Close</button>
 4</dialog>
 5
 6<button id="openButton">Open Dialog</button>
 7
 8<script>
 9    const dialog = document.getElementById('exampleDialog');
10    const openButton = document.getElementById('openButton');
11    const closeButton = document.getElementById('closeButton');
12
13    openButton.addEventListener('click', () => dialog.showModal());
14    closeButton.addEventListener('click', () => dialog.close());
15</script>

• Tag <dialog> digunakan untuk mendefinisikan jendela interaktif seperti modal atau pop-up. Anda dapat mengontrol pembukaan dan penutupan menggunakan JavaScript.

• Dalam contoh ini, mengklik tombol 'Buka Dialog' akan menampilkan dialog.

Atribut inputmode dari tag <input>

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">

• Atribut inputmode dari tag <input> menentukan jenis keyboard virtual yang ditampilkan pada perangkat sentuh, meningkatkan pengalaman pengguna. Misalnya, inputmode="tel" menampilkan keyboard numerik untuk masukan nomor telepon.
• Atribut inputmode hanya untuk menyesuaikan tampilan keyboard virtual dan tidak memvalidasi konten masukan. Untuk menerapkan pembatasan masukan, Anda perlu menggunakan atribut type atau validasi JavaScript.
• Karena tidak semua peramban dan perangkat sepenuhnya mendukung ini, sebaiknya siapkan cadangan yang sesuai.
• Atribut inputmode dapat memiliki nilai-nilai berikut. Setiap nilai digunakan untuk menampilkan jenis masukan atau keyboard virtual tertentu.

Atribut theme-color dari tag <meta>

1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

• Atribut theme-color dari tag <meta> digunakan untuk menyesuaikan warna bilah alamat dan antarmuka di browser seluler yang kompatibel.
• Sebagai contoh, itu dapat beralih antara mode gelap dan mode terang dengan menggunakan atribut media.

Tag dan atribut ini adalah kemajuan dari HTML5 dan telah menjadi elemen penting dalam pengembangan web modern. Disarankan untuk memeriksa dukungan dan kompatibilitas browser tertentu saat menggunakannya.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video