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 .