Recente trends in HTML

Dit artikel legt de recente trends in HTML uit.

Dit legt tags uit die relatief recent aan HTML5 zijn toegevoegd.

YouTube Video

Recente trends in HTML

<template> Tag

 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>

• De <template> tag wordt gebruikt om herbruikbare HTML-fragmenten te definiëren die verborgen blijven totdat ze via JavaScript worden geactiveerd.

• Door de <template>-tag te gebruiken, kunt u dynamisch herbruikbare UI-componenten maken, zoals kaarten of lijstitems. Het helpt ook om code duplicatie te verminderen en de onderhoudbaarheid in grootschalige applicaties te verbeteren.

• In dit voorbeeld toont het klikken op de knop 'Sjabloon gebruiken' de inhoud van de <template>-tag.

<slot>-tag

 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>

• De <slot>-tag fungeert als een tijdelijke aanduiding binnen een webcomponent om inhoud weer te geven die wordt doorgegeven vanuit het ouder-element.
  • Als er geen inhoud wordt verstrekt voor een slot, wordt de fallback-inhoud (de standaardinhoud die rechtstreeks in de <slot>-tag is geschreven) weergegeven.
• In dit voorbeeld worden benoemde slots (header en footer) gedefinieerd binnen het <template>-element.
• <my-element> is een door de gebruiker gedefinieerd aangepast HTML-element. Het slot-attribuut op de <p>-tag binnen dit element specificeert de slotnaam en de inhoud die in het slot moet worden ingevoegd.

<dialog> Tag

 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>

• De <dialog> tag wordt gebruikt om interactieve vensters zoals modals of pop-ups te definiëren. Je kunt het openen en sluiten beheren met JavaScript.

• In dit voorbeeld opent het klikken op de knop 'Dialoog openen' de dialoog.

inputmode-attribuut van de <input>-tag

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

• Het inputmode-attribuut van de <input>-tag specificeert het type virtueel toetsenbord dat wordt weergegeven op touch-apparaten, wat de gebruikerservaring verbetert. Bijvoorbeeld, inputmode="tel" toont een numeriek toetsenbord voor het invoeren van telefoonnummers.
• Het inputmode-attribuut is alleen bedoeld om de weergave van het virtuele toetsenbord aan te passen en valideert de invoerinhoud niet. Om invoerbeperkingen af te dwingen, moet u het type-attribuut of JavaScript-validatie gebruiken.
• Aangezien niet alle browsers en apparaten dit volledig ondersteunen, is het het beste om geschikte fallbacks voor te bereiden.
• Het inputmode-attribuut kan de volgende waarden aannemen. Elke waarde wordt gebruikt om een specifiek invoertype of virtueel toetsenbord weer te geven.

theme-color-attribuut van de <meta>-tag

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)">

• Het theme-color-attribuut van de <meta>-tag wordt gebruikt om de kleur van de adresbalk en gebruikersinterface in compatibele mobiele browsers aan te passen.
• Het kan bijvoorbeeld schakelen tussen donkere modus en lichte modus door gebruik te maken van het media-attribuut.

Deze tags en attributen zijn verbeteringen van HTML5 en zijn essentiële elementen geworden in moderne webontwikkeling. Het wordt aanbevolen om specifieke browserondersteuning en compatibiliteit te controleren bij het gebruik ervan.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video