Тег <template> в HTML

9 червня 2022 р.356

Зміст

Елемент <template> є механізмом для зберігання вмісту на стороні клієнта, який не відображається в процесі завантаження сторінки, але згодом може бути заповнено за допомогою JavaScript.

Вміст <template> — це шаблон для фрагмента HTML, який може бути клонований та вставлений у документ через скрипти. Зазвичай застосовується для елементів з структурою, що повторюється, на кшталт списків, таблиць, списків <select> та ін.

Синтаксис

Всередині <template> розташовуються порожні елементи, що утворюють потрібний шаблон. Повторення цих елементів та їх заповнення вмістом беруть на себе скрипти.

field-label-above">

Закриваючий тег

Обов'язковий.

Атрибути

Для цього елемента доступні універсальні атрибути та події.

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>template</title> <style> table { width: 100%; border-collapse: collapse; } 
td, th { padding: 4px; border: 1px solid #333; }
</style>
</head>
<body> <table> <thead> <tr> <th>Твердість за Моосом</th> <th>Еталонний мінерал</th> <th>Оброблюваність</th>
</tr>
</thead> <tbody> <template id="row"> <tr><td><td><td>
</template>
</tbody>
</table> <script> var data=[ { hardness: 1, mineral: 'Тальк', workability: 'Дряпається нігтем'}, { hardness: 2, mineral: 'Гіпс', workability: 'Дряпається нігтем'}, { hardness: 3, mineral: ' Кальцит', workability: 'Дряпається міддю'}, { hardness: 4, mineral: 'Флюорит', workability: 'Легко дряпається ножем, віконним склом'}, { hardness: 5, mineral: 'Апатит', workability: 'Зі зусиллям дряпається ножем, шибкою'}, { hardness: 6, mineral: 'Ортоклаз', workability: 'Дряпає скло. Обробляється напилком'}, { hardness: 7, mineral: 'Кварц', workability: 'Піддається обробці алмазом, дряпає скло'}, { hardness: 8, mineral: 'Топаз', workability: 'Піддається обробці алмазом, дряпає скло' , { hardness: 9, mineral: 'Корунд', workability: 'Піддається обробці алмазом, дряпає скло'}, { hardness: 10, mineral: 'Алмаз', workability: 'Дряпає скло'} 
]; var template=document.querySelector('#row'); for (var i=0; i < data.length; i++) { var mohs=data[i]; var clone=template.content.cloneNode(true); var cells=clone.querySelectorAll('td'); cells[0].textContent=mohs.hardness; cells[1].textContent=mohs.mineral; cells[2].textContent=mohs.workability; template.parentNode.appendChild(clone); }
</script>
</body>
</html>

Специфікація

Специфікація	Статус
WHATWG HTML Living Standard	Живий стандарт
HTML5	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recomm endation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
Proposed Recommendation (Запропонована рекомендація ) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
Working Draft (Робочий проект) — зріліша версія чернетки після обговорення та внесення поправок для розгляду спільнотою. li>
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Особняк ом стоїть живий стандарт HTML (Living) — він не дотримується традиційної нумерації версій, оскільки перебуває у постійній розробці та оновлюється регулярно.

Браузери


	13	26	15	7.1	22


4.4	22	36	8	9.2

Браузери

У таблиці браузерів застосовуються такі позначення.

— елемент повністю підтримується браузером;
— елемент браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або елемент підтримується з застереженнями.

Число вказує версію браузреа, починаючи з який елемент підтримується.

Документ