Ostatnio edytowany:

template

Autor: Virtual Patriot

Przeznaczenie elementu template

Element template reprezentuje fragment kodu HTML, który może zostać sklonowany przez skrypt występujący w zawartości dokumentu HTML.

Dodatkowe techniczne informacje o elemencie template

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst metadata

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Darmowy Kurs HTML</title>
    
        <template id="szablon-1">
          <ins>
            <iframe src="dynamiczna-statystyka-01.html"></iframe>
          </ins>
        </template>
    
        <script src="skrypt-01.js"></script>
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </body>
    </html>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "head". Wspomniany element "head" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst metadata, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

  • element HTML, który tworzy wewnętrzny kontekst frazowany

    Przykładowy Kod HTML

    <article>
      <h1>Mój ulubiony owoc</h1>
    
      <p>
        <template id="szablon-1">
          <ins>
            <iframe src="dynamiczna-statystyka-01.html"></iframe>
          </ins>
        </template>
        <script src="skrypt-01.js"></script>
    
        Moim ulubionym owocem jest czereśnia.
      </p>
    </article>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "p". Wspomniany element "p" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "p", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

  • element HTML, który tworzy wewnętrzny kontekst skryptowy

    Przykładowy Kod HTML

    <article>
      <template id="szablon-1">
        <ins>
          <iframe src="dynamiczna-statystyka-01.html"></iframe>
        </ins>
      </template>
      <script src="skrypt-01.js"></script>
    
      <h1>Mój ulubiony owoc</h1>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "article". Wspomniany element "article" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst skryptowy, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "article", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

  • jako element dziecko elementu colgroup, lecz tylko wtedy gdy dany element colgroup nie posiada atrybutu span

    Przykładowy Kod HTML

    <table>
      <caption>Ilość przedmiotów w magazynie</caption>
    
      <colgroup>
        <col class="styl-1">
        <col class="styl-2">
    
        <template id="szablon-1">
          <col span="2" class="styl-3">
        </template>
      </colgroup>
    
      <script src="skrypt-01.js"></script>
    
      <thead>
        <tr>
          <th>przedmiot</th>
          <th>ilość</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <th>szafa</th>
          <td>10</td>
        </tr>
    
        <tr>
          <th>stół</th>
          <td>5</td>
        </tr>
      </tbody>
    
      <tfoot>
        <tr>
          <th>suma</th>
          <td>15</td>
        </tr>
      </tfoot>
    </table>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "colgroup", dla którego wspomniany element "template" jest elementem dzieckiem. Ponadto wspomniany element "colgroup" nie posiada atrybutu "span", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "colgroup", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

kontekst wewnętrzny
zawartość metadata, jak również ewentualnie zawartość opływająca, jak również ewentualnie kontekst wewnętrzny, który jest prawidłowym kontekstem wewnętrznym dla następujących elementów HTML: ol, ul, dl, figure, ruby, object, video, audio, table, colgroup, thead, tbody, tfoot, tr, fieldset, select

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <title>Darmowy Kurs HTML</title>

    <template id="szablon-1">
      <style>body { background-color:blue; }</style>
      <ins>
        <iframe src="dynamiczna-statystyka-01.html"></iframe>
      </ins>
      <col span="2" class="styl-3">
    </template>

    <script src="skrypt-01.js"></script>
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY -->
  </body>
</html>

Kontekstem wewnętrznym przykładowego elementu "template" są różne elementy HTML, które nie są zabronionym kontekstem wewnętrznym elementu "template", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "style", element "ins" oraz element "col", jest prawidłowym kontekstem wewnętrznym dla elementu "template".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<template> ... </template>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

none

Dodatkowe domyślne reguły CSS elementu template

template {
  display:none;
}

Interpretacja elementu template

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji elementu .