Recent Trends in HTML

This article explains recent trends in HTML.

This explains tags that have been relatively recently added in HTML5.

YouTube Video

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

• The <template> tag is used to define reusable HTML fragments that remain hidden until activated via JavaScript.

• By using the <template> tag, you can dynamically create reusable UI components, such as cards or list items. It also helps reduce code duplication and improve maintainability in large-scale applications.

• In this example, clicking the 'Use Template' button displays the content of the <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>

• The <slot> tag acts as a placeholder within a web component to display content passed from the parent element.
  • If no content is provided for a slot, fallback content (the default content written directly inside the <slot> tag) will be displayed.
• In this example, named slots (header and footer) are defined within the <template> element.
• <my-element> is a user-defined custom HTML element. The slot attribute on the <p> tag inside this element specifies the slot name and the content to be inserted into the slot.

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

• The <dialog> tag is used to define interactive windows such as modals or pop-ups. You can control opening and closing using JavaScript.

• In this example, clicking the 'Open Dialog' button displays the dialog.

inputmode attribute of the <input> tag

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

• The inputmode attribute of the <input> tag specifies the type of virtual keyboard displayed on touch devices, enhancing the user experience. For example, inputmode="tel" displays a numeric keyboard for phone number input.
• The inputmode attribute is only for adjusting the virtual keyboard display and does not validate the input content. To enforce input restrictions, you need to use the type attribute or JavaScript validation.
• Since not all browsers and devices fully support this, it is best to prepare appropriate fallbacks.
• The inputmode attribute can take the following values. Each value is used to display a specific input type or virtual keyboard.

theme-color attribute of the <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)">

• The theme-color attribute of the <meta> tag is used to customize the color of the address bar and UI in compatible mobile browsers.
• For example, it can switch between dark mode and light mode by using the media attribute.

These tags and attributes are advancements from HTML5 and have become essential elements in modern web development. It is recommended to check specific browser support and compatibility when using them.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video