Tendências Recentes em HTML

Este artigo explica as tendências recentes em HTML.

Isto explica as tags que foram adicionadas relativamente há pouco tempo no HTML5.

YouTube Video

Tendências Recentes em 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>

• A tag <template> é usada para definir fragmentos HTML reutilizáveis que permanecem ocultos até serem ativados por JavaScript.

• Usando a tag <template>, você pode criar dinamicamente componentes de interface reutilizáveis, como cartões ou itens de lista. Isso também ajuda a reduzir a duplicação de código e a melhorar a manutenção em aplicativos de grande escala.

• Neste exemplo, clicar no botão 'Usar Modelo' exibe o conteúdo da 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>

• A tag <slot> funciona como um espaço reservado dentro de um componente web para exibir conteúdo passado do elemento pai.
  • Se nenhum conteúdo for fornecido para um slot, o conteúdo alternativo (o conteúdo padrão escrito diretamente dentro da tag <slot>) será exibido.
• Neste exemplo, os slots nomeados (header e footer) são definidos dentro do elemento <template>.
• <my-element> é um elemento HTML personalizado definido pelo usuário. O atributo slot na tag <p> dentro deste elemento especifica o nome do slot e o conteúdo a ser inserido no 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>

• A tag <dialog> é usada para definir janelas interativas como modais ou pop-ups. Você pode controlar a abertura e o fechamento usando JavaScript.

• Neste exemplo, clicar no botão 'Abrir Diálogo' exibe o diálogo.

Atributo inputmode da tag <input>

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

• O atributo inputmode da tag <input> especifica o tipo de teclado virtual exibido em dispositivos de toque, melhorando a experiência do usuário. Por exemplo, inputmode="tel" exibe um teclado numérico para entrada de número de telefone.
• O atributo inputmode serve apenas para ajustar a exibição do teclado virtual e não valida o conteúdo inserido. Para aplicar restrições de entrada, você precisa usar o atributo type ou validação em JavaScript.
• Como nem todos os navegadores e dispositivos oferecem suporte completo a isso, é melhor preparar alternativas apropriadas.
• O atributo inputmode pode assumir os seguintes valores. Cada valor é usado para exibir um tipo específico de entrada ou teclado virtual.

Atributo theme-color da 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)">

• O atributo theme-color da tag <meta> é usado para personalizar a cor da barra de endereços e a interface do usuário em navegadores móveis compatíveis.
• Por exemplo, ele pode alternar entre o modo escuro e o modo claro utilizando o atributo media.

Essas tags e atributos são avanços do HTML5 e se tornaram elementos essenciais no desenvolvimento web moderno. Recomenda-se verificar o suporte a navegadores específicos e a compatibilidade ao utilizá-los.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video