Trend Terkini dalam HTML

Artikel ini menerangkan trend terkini dalam HTML.

Ini menerangkan tag-tag yang telah ditambah agak baru-baru ini dalam HTML5.

YouTube Video

Trend 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 boleh digunakan semula tetapi kekal tersembunyi sehingga diaktifkan melalui JavaScript.

• Dengan menggunakan tag <template>, anda boleh membuat komponen UI yang boleh digunakan semula secara dinamik, seperti kad atau item senarai. Ia juga membantu mengurangkan penduaan kod dan meningkatkan kebolehpeliharaan dalam aplikasi berskala besar.

• Dalam contoh ini, mengklik butang 'Gunakan Templat' akan memaparkan kandungan 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> bertindak sebagai pemegang tempat dalam komponen web untuk memaparkan kandungan yang dihantar dari elemen induk.
  • Jika tiada kandungan disediakan untuk slot, kandungan alternatif (kandungan lalai yang ditulis terus di dalam tag <slot>) akan dipaparkan.
• Dalam contoh ini, slot yang dinamakan (header dan footer) ditakrifkan di dalam elemen <template>.
• <my-element> adalah elemen HTML tersuai yang ditakrifkan oleh pengguna. Atribut slot pada tag <p> di dalam elemen ini menentukan nama slot dan kandungan 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 tetingkap interaktif seperti modal atau pop-up. Anda boleh mengawal pembukaan dan penutupan menggunakan JavaScript.

• Dalam contoh ini, mengklik butang 'Buka Dialog' akan memaparkan dialog.

Atribut inputmode bagi tag <input>

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

• Atribut inputmode bagi tag <input> menentukan jenis papan kekunci maya yang dipaparkan pada peranti sentuh, meningkatkan pengalaman pengguna. Sebagai contoh, inputmode="tel" memaparkan papan kekunci angka untuk input nombor telefon.
• Atribut inputmode hanya untuk melaraskan paparan papan kekunci maya dan tidak mengesahkan kandungan input. Untuk mengenakan sekatan input, anda perlu menggunakan atribut type atau pengesahan JavaScript.
• Oleh kerana tidak semua pelayar dan peranti menyokong sepenuhnya, adalah lebih baik untuk menyediakan alternatif yang sesuai.
• Atribut inputmode boleh mengambil nilai berikut. Setiap nilai digunakan untuk memaparkan jenis input tertentu atau papan kekunci maya.

Atribut theme-color bagi 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 bagi tag <meta> digunakan untuk menyesuaikan warna bar alamat dan UI dalam pelayar mudah alih yang serasi.
• Sebagai contoh, ia boleh bertukar antara mod gelap dan mod terang dengan menggunakan atribut media.

Tag dan atribut ini adalah kemajuan daripada HTML5 dan telah menjadi elemen penting dalam pembangunan web moden. Adalah disarankan untuk memeriksa sokongan pelayar tertentu dan keserasian semasa menggunakannya.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video