Marcar <modelo> em HTML

Neste post, falaremos sobre template de Tag com exemplos . Aspiramos a atender às demandas de aprendizagem.

A tag <template> em HTML é um elemento especial usado para declarar o conteúdo que não é renderizado pelo navegador até que seja instanciado pelo JavaScript. Ele permite que você defina um bloco reutilizável de HTML que pode ser usado em todo o seu site sem a necessidade de copiar e colar o mesmo código.

O conteúdo dentro de uma tag <template> não é exibido na página da Web, mas usado como um modelo que pode ser clonado e inserido no DOM dinamicamente em tempo de execução. Isso o torna uma maneira eficiente de gerenciar e gerar conteúdo dinâmico, especialmente para aplicativos da Web que dependem muito de JavaScript. A tag <template> é suportada por todos os navegadores modernos e pode ser estilizada usando CSS.

Em HTML, Tag <template> consiste em duas partes. Normalmente, o conteúdo aparece dentro das tags de abertura <template> e fechamento de </template> .

Veja a seguir um exemplo de como usar a tag HTML <template> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading.</h1>
<p>
<q>It is during our darkest moments that we must focus to see the light.</q>
-Aristotle
</p>
<template>
<h2>This is a second heading.</h2>
<p>
"Many of life's failures are people who did not realize how close they were to success when they gave up."
-Thomas A. Edison
</p>
</template>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Com JavaScript, aqui está um exemplo de uma tag HTML <template> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
<script>
function useTemplate() {
var myTemplate = document.getElementById('Temp');
normalContent = document.getElementById('cont');
clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
</script>
</head>
<body>
<template id="Temp">
<p>This is the content placed inside the template tag</p>
</template>
<div id="cont">
<p>Hello welcome to Mr Examples</p>
</div>
<button onclick="useTemplate();">Click to see more content</button>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para criar um modelo reutilizável para uma lista de itens:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>List of Items Template</title>
<style>
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>List of Items</h1>
<ul>
{{#each items}}
<li>{{this}}</li>
{{/each}}
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de modelo para uma caixa de diálogo modal:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<template id="modal-template">
<div class="modal-overlay">
<div class="modal-content">
<h2>Modal Title</h2>
<p>Modal content goes here</p>
<button class="modal-close-btn">Close</button>
</div>
</div>
</template>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode criar listas dinâmicas de itens usando documentos HTML e JavaScript com a tag <template> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<title>Example of the template tag</title>
</head>
<body>
<h1>Items</h1>
<ul id="items-list"></ul>
<template id="item-template">
<li>
<span class="item-name"></span>
<span class="item-price"></span>
</li>
</template>
<script>
 var itemTemplate = document.getElementById('item-template');
 var items = [
 { name: 'Item 1', price: '$5.99' },
 { name: 'Item 2', price: '$9.99' },
 { name: 'Item 3', price: '$12.99' }
 ];
 var itemsList = document.getElementById('items-list');
 for (var i = 0; i < items.length; i++) {
 var itemClone = itemTemplate.content.cloneNode(true);
 itemClone.querySelector('.item-name').innerText = items[i].name;
 itemClone.querySelector('.item-price').innerText = items[i].price;
 itemsList.appendChild(itemClone);
 }
 </script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo a seguir mostra como os estilos CSS podem ser adicionados:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<title>Example of the template tag</title>
<style>
#items-list {
list-style: none;
padding: 0;
}
#items-list li {
border: 1px solid gray;
padding: 10px;
margin-bottom: 10px;
}
#items-list .item-name {
font-weight: bold;
}
#items-list .item-price {
color: green;
}
</style>
</head>
<body>
<h1>Items</h1>
<ul id="items-list"></ul>
<template id="item-template">
<li>
<span class="item-name"></span>
<span class="item-price"></span>
</li>
</template>
<script>
var itemTemplate = document.getElementById('item-template');
var items = [
{ name: 'Item 1', price: '$5.99' },
{ name: 'Item 2', price: '$9.99' },
{ name: 'Item 3', price: '$12.99' }
];
var itemsList = document.getElementById('items-list');
for (var i = 0; i < items.length; i++) {
var itemClone = itemTemplate.content.cloneNode(true);
itemClone.querySelector('.item-name').innerText = items[i].name;
itemClone.querySelector('.item-price').innerText = items[i].price;
itemsList.appendChild(itemClone);
}
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca <modelo> Em HTML:

Usos de modelos de tags

A tag <template> é empregada principalmente como um contêiner para armazenar conteúdo HTML que ficará invisível para o usuário quando a página for carregada.

As informações contidas em <template> podem ser apresentadas futuramente através de JavaScript.

É possível aplicar a Tag <template> sempre que desejar repetir o mesmo código HTML, mas somente após solicitá-lo. Caso não queira que o navegador exiba o código HTML sem a tag <template> , você deve criar o código HTML em Javascript.

Aqui estão alguns casos de uso comuns para modelos de tags :

Os modelos de marca podem ser usados para criar componentes de interface do usuário (IU) reutilizáveis, como botões, menus, formulários e caixas de diálogo. Ao definir um modelo de tag para cada componente, os desenvolvedores podem reutilizar o mesmo código em várias páginas e aplicativos, facilitando a manutenção e atualização de seus componentes de interface do usuário.
Os modelos de tag podem ser usados para exibir conteúdo dinâmico em páginas da web. Por exemplo, você pode usar um modelo de tag para exibir uma lista de produtos em um site de comércio eletrônico. Ao passar os dados do produto como um parâmetro para o modelo de tag, você pode gerar a lista dinamicamente sem precisar escrever HTML personalizado para cada produto.
Os modelos de tag podem ser usados para definir layouts de página que podem ser reutilizados em várias páginas em um aplicativo da web. Por exemplo, você pode definir um modelo de tag para um layout de duas colunas com cabeçalho e rodapé e reutilizar esse layout em várias páginas em seu aplicativo.
Os modelos de tag podem ser usados para definir elementos HTML customizados que não fazem parte da especificação HTML padrão. Isso pode ser útil para criar HTML semântico que descreva melhor o conteúdo de suas páginas da web. Por exemplo, você pode definir uma tag <product-list> personalizada que exibe uma lista de produtos em seu site.
Os modelos de tag costumam ser usados em conjunto com estruturas JavaScript, como React, Vue e Angular. Essas estruturas fornecem seus próprios mecanismos de modelagem que permitem aos desenvolvedores criar modelos de tags e definir como eles devem ser renderizados na página. Isso pode facilitar a criação de aplicativos da Web complexos que são mais modulares e fáceis de manter.

Atributos

Global

O modelo de Tag <template> aceita os Atributos Globais em HTML.

Compatibilidade do navegador

Elemento
<modelo>	26,0	13,0	22,0	8,0	15,0

Importância do modelo de tag

Os modelos de tags são um recurso importante do desenvolvimento da Web moderno por vários motivos:

Os modelos de tags facilitam a criação de componentes reutilizáveis que podem ser usados em várias páginas e aplicativos. Isso pode economizar muito tempo e esforço dos desenvolvedores, permitindo que eles escrevam o código uma vez e o reutilizem sempre que necessário.
Usando modelos de tag, os desenvolvedores podem separar a estrutura e o comportamento de seus aplicativos da Web em componentes menores e mais gerenciáveis. Isso facilita a manutenção e atualização do código ao longo do tempo, pois as alterações em um componente não afetarão a funcionalidade de outros componentes.
Os modelos de marca podem ajudar a garantir consistência no design e layout de páginas da web em um aplicativo ou site. Ao usar os mesmos modelos de tag para tipos de conteúdo semelhantes, os desenvolvedores podem garantir que as páginas tenham aparência e comportamento consistentes, proporcionando uma melhor experiência do usuário.
Os modelos de tag podem ajudar os aplicativos da Web a escalar mais facilmente, permitindo que os desenvolvedores criem componentes modulares que podem ser adicionados ou removidos conforme necessário. Isso pode facilitar a adição de novos recursos ou funcionalidades a um aplicativo sem a necessidade de reescrever grandes partes do código.
Os modelos de tags podem ser projetados com a acessibilidade em mente, facilitando a criação de aplicativos da web que podem ser usados por todos. Ao definir marcação e comportamento consistentes para componentes de interface do usuário, os desenvolvedores podem garantir que os usuários com deficiência possam interagir com seus aplicativos de maneira significativa.

Assine nosso boletim informativo abaixo para estar em contato com as informações técnicas mais recentes neste site.

Nós valorizamos o seu feedback.

Marcar <modelo> em HTML

Example:

Example:

Example:

Example:

Example:

Example:

Usos de modelos de tags

Atributos

Global

Compatibilidade do navegador

Importância do modelo de tag

Sentindo entediado?