Aktuelle Trends in HTML

Dieser Artikel erklärt die aktuellen Trends in HTML.

Dies erklärt Tags, die relativ neu in HTML5 hinzugefügt wurden.

YouTube Video

Aktuelle 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>

• Das <template>-Tag wird verwendet, um wiederverwendbare HTML-Abschnitte zu definieren, die bis zur Aktivierung über JavaScript verborgen bleiben.

• Durch die Verwendung des <template>-Tags können Sie dynamisch wiederverwendbare UI-Komponenten erstellen, wie z. B. Karten oder Listenelemente. Es hilft auch, Code-Duplikationen zu reduzieren und die Wartbarkeit in groß angelegten Anwendungen zu verbessern.

• In diesem Beispiel zeigt der Klick auf die Schaltfläche 'Vorlage verwenden' den Inhalt des <template>-Tags an.

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

• Das <slot>-Tag fungiert als Platzhalter innerhalb einer Webkomponente, um Inhalte anzuzeigen, die vom übergeordneten Element übergeben werden.
  • Wenn für einen Slot kein Inhalt bereitgestellt wird, wird Fallback-Inhalt (der Standardinhalt, der direkt im <slot>-Tag geschrieben ist) angezeigt.
• In diesem Beispiel sind benannte Slots (header und footer) innerhalb des <template>-Elements definiert.
• <my-element> ist ein benutzerdefiniertes, individuelles HTML-Element. Das slot-Attribut im <p>-Tag innerhalb dieses Elements gibt den Slot-Namen und den einzufügenden Inhalt an.

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

• Das <dialog>-Tag wird verwendet, um interaktive Fenster wie Modale oder Pop-ups zu definieren. Sie können das Öffnen und Schließen mit JavaScript steuern.

• In diesem Beispiel öffnet ein Klick auf die Schaltfläche 'Dialog öffnen' den Dialog.

inputmode-Attribut des <input>-Tags

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

• Das inputmode-Attribut des <input>-Tags gibt die Art der virtuellen Tastatur an, die auf Touch-Geräten angezeigt wird, und verbessert so die Benutzererfahrung. Zum Beispiel zeigt inputmode="tel" eine numerische Tastatur für die Eingabe von Telefonnummern an.
• Das inputmode-Attribut dient nur zur Anpassung der Anzeige der virtuellen Tastatur und überprüft nicht den eingegebenen Inhalt. Um Eingabebeschränkungen durchzusetzen, müssen Sie das type-Attribut oder eine JavaScript-Validierung verwenden.
• Da nicht alle Browser und Geräte dies vollständig unterstützen, ist es am besten, entsprechende Fallbacks vorzubereiten.
• Das inputmode-Attribut kann die folgenden Werte annehmen. Jeder Wert wird verwendet, um einen bestimmten Eingabetyp oder eine virtuelle Tastatur anzuzeigen.

Attribut theme-color des <meta>-Tags

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

• Das Attribut theme-color des <meta>-Tags wird verwendet, um die Farbe der Adressleiste und der Benutzeroberfläche in kompatiblen mobilen Browsern anzupassen.
• Zum Beispiel kann es mit dem Attribut media zwischen dem Dunkel- und dem Hellmodus wechseln.

Diese Tags und Attribute sind Weiterentwicklungen von HTML5 und haben sich zu wesentlichen Elementen der modernen Webentwicklung entwickelt. Es wird empfohlen, die Unterstützung und Kompatibilität spezifischer Browser zu überprüfen, wenn sie verwendet werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video