HTML Referenca elementov

HTML Referenca elementov predstavlja spisek/tabelo vseh elementov in oznak v HTML. Na vrhu tabele se nahaja iskalnik, tako da lahko iskani niz najdemo hitreje. HTML oznake so začetni in končni del HTML elementa. Začne se s simbolom < in konča s simbolom >. Vse, kar je zapisano znotraj simbolov, se imenuje oznaka. HTML element je sestavljen in začetnih in zaključnih oznak ter tega, kar je znotraj teh oznak. Običajno je sestavljen iz neke strukture, ki se uporablja za definiranje ustreznih oznak. HTML atributi se uporabljajo za definiranje značaja HTML elementa. Vedno se postavi v začetno oznako elementa. Na splošno zagotavlja dodaten stil/atribut elementu.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
  <meta charset="UTF-8">
  <title>HTML elementi — splošen uvod</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <!-- 1) Struktura dokumenta -->
  <header>
    <h1>HTML elementi – splošen primer</h1>
    <nav>
      <a href="#besedilo">Besedilo</a> |
      <a href="#seznami">Seznami</a> |
      <a href="#tabele">Tabele</a> |
      <a href="#mediji">Mediji</a> |
      <a href="#vdelava">Vdelava</a> |
      <a href="#podrobnosti">Podrobnosti</a>
    </nav>
  </header>

  <main>
    <!-- 2) Besedilo in inline elementi -->
    <section id="besedilo">
      <h2>Besedilo in inline elementi</h2>
      <p contenteditable="true">
        To je <strong>krepko</strong>, <em>poudarjeno</em>, <mark>označeno</mark> in <small>manjše</small> besedilo.
        Kratek citat z <code><q></code>: <q>Primer kratkega citata.</q>
      </p>
      <p>Daljši citat z <code><blockquote></code>:</p>
      <blockquote cite="https://example.com">
        “Dobro strukturiran primer pomaga razumeti elemente v kontekstu.”
      </blockquote>
      <p>
        Kratica z <code><abbr></code>: <abbr title="HyperText Markup Language">HTML</abbr>.
        Vrstica kode z <code><code></code>: <code><div>Primer</div></code>.
      </p>
      <hr>
    </section>

    <!-- 3) Seznami -->
    <section id="seznami">
      <h2>Seznami</h2>
      <h3>Neurejeni (ul)</h3>
      <ul contenteditable="true">
        <li>Točka A</li>
        <li>Točka B</li>
      </ul>

      <h3>Urejeni (ol)</h3>
      <ol contenteditable="true">
        <li>Korak 1</li>
        <li>Korak 2</li>
      </ol>

      <h3>Opisni (dl)</h3>
      <dl>
        <dt>HTML</dt>
        <dd>Označevalni jezik za strukturo dokumentov.</dd>
        <dt>CSS</dt>
        <dd>Slog in postavitev.</dd>
      </dl>
      <hr>
    </section>

    <!-- 4) Tabele -->
    <section id="tabele">
      <h2>Tabele</h2>
      <table border="1" cellpadding="6" cellspacing="0">
        <caption>Osnovna tabela</caption>
        <thead>
          <tr>
            <th scope="col"><abbr title="Identifikator">ID</abbr></th>
            <th scope="col">Ime</th>
            <th scope="col">Opis</th>
          </tr>
        </thead>
        <tbody contenteditable="true">
          <tr>
            <th scope="row" id="r1">1</th>
            <td headers="r1">Primer</td>
            <td headers="r1">Vrstica z glavo (th) in podatki (td).</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th scope="row" colspan="3">Noga tabele</th>
          </tr>
        </tfoot>
      </table>
      <hr>
    </section>

    <!-- 5) Mediji (slika, figure, video) -->
    <section id="mediji">
      <h2>Mediji</h2>
      <figure>
        <img src="demo/smesko1.svg" alt="Smeško – ilustracija" width="160" height="160">
        <figcaption>Slika z napisom (figure/figcaption).</figcaption>
      </figure>

      <p>Video (muted + controls):</p>
      <video controls muted preload="metadata" width="320" poster="demo/smesko1.svg">
        <source src="video/website.mp4" type="video/mp4">
        Vaš brskalnik ne podpira videa.
      </video>
      <hr>
    </section>

    <!-- 6) Vdelava (iframe) -->
    <section id="vdelava">
      <h2>Vdelava (iframe)</h2>
      <p>
        <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Odpri example.com</a>
      </p>
      <iframe src="https://www.example.com" title="Vdelana stran example.com" width="420" height="240" loading="lazy" 
        referrerpolicy="no-referrer">
      </iframe>
      <hr>
    </section>

    <!-- 7) Podrobnosti / povzetek -->
    <section id="podrobnosti">
      <h2>Podrobnosti</h2>
      <details>
        <summary>Klikni za dodatne informacije</summary>
        <p contenteditable="true">Ta vsebina se lahko prikaže ali skrije. Uredi me in preizkusi.</p>
      </details>
    </section>
  </main>

  <footer>
    <p>&copy; Primer referenc elementov (brez CSS/JS) — prilagojeno za vadnico.</p>
  </footer>

</body>
</html>

REZULTAT

Tip	Opis	Primer
Struktura
<!DOCTYPE>	Določa vrsto HTML dokumenta.	GLEJ PRIMER
<article>	Določa člen.	GLEJ PRIMER
<aside>	Določa vsebino poleg vsebine strani.	GLEJ PRIMER
<body>	Določa telo dokumenta.	GLEJ PRIMER
<div>	Določa razdelek v dokumentu.	GLEJ PRIMER
<footer>	Določa nogo HTML dokumenta ali razdelek.	GLEJ PRIMER
<h1> do <h6>	Določa naslove v HTML dokumentu.	GLEJ PRIMER
<head>	Vsebuje metapodatke/informacije za HTML dokument.	GLEJ PRIMER
<header>	Določa glavo za HTML dokument ali razdelek.	GLEJ PRIMER
<hgroup>	Določa glavo in povezano vsebino.	GLEJ PRIMER
<html>	Določa koren HTML dokumenta.	GLEJ PRIMER
<main>	Določa glavno vsebino dokumenta.	GLEJ PRIMER
<nav>	Oznaka <nav> določa niz navigacijskih povezav.	GLEJ PRIMER
<section>	Oznaka <section> določa razdelek v HTML dokumentu.	GLEJ PRIMER
Besedilo
<!-- komentar -->	Določa komentar.	GLEJ PRIMER
<abbr>	Določa kratico.	GLEJ PRIMER
<b>	Oznaka <b> naredi besedilo krepko.	GLEJ PRIMER
<bdi>	Izolira del besedila, ki je morda oblikovan v drugačni smeri od drugega besedila zunaj njega.	GLEJ PRIMER
<bdo>	Preglasi trenutno smer besedila.	GLEJ PRIMER
<blockquote>	Določa razdelek, ki je citiran iz drugega vira.	GLEJ PRIMER
<br>	Oznaka <br> vstavi enojni prelom vrstice.	GLEJ PRIMER
<cite>	Oznaka <cite> določa naslov ustvarjalnega dela in je običajno prikazana v ležečem tisku.	GLEJ PRIMER
<code>	Oznaka <code> se uporablja za določanje dela računalniške kode.	GLEJ PRIMER
<dfn>	Oznaka <dfn> pomeni element definicije.	GLEJ PRIMER
<em>	Oznaka <em> se uporablja za definiranje označenega besedila.	GLEJ PRIMER
<hr>	Oznaka <hr> določa tematski prelom na strani, ki je viden kot črta.	GLEJ PRIMER
<i>	Oznaka <i> določa del besedila z alternativno obliko.	GLEJ PRIMER
<kbd>	Oznaka <kbd> se uporablja za definiranje vnosa s tipkovnico, vsebina je prikazana v monospace pisavi.	GLEJ PRIMER
<mark>	Oznaka <mark> določa označeno besedilo.	GLEJ PRIMER
<p>	Določa odstavek.	GLEJ PRIMER
<pre>	Oznaka <pre> določa vnaprej oblikovano besedilo.	GLEJ PRIMER
<q>	Oznaka <q> definira kratek citat.	GLEJ PRIMER
<s>	Oznaka <s> določa besedilo, ki je prikazano s črto skozi besedilo.	GLEJ PRIMER
<samp>	Oznaka <samp> se uporablja za definiranje izhoda računalniškega programa.	GLEJ PRIMER
<small>	Oznaka <small> določa manjše besedilo.	GLEJ PRIMER
<strong>	Oznaka <strong> se uporablja za definiranje besedila in je običajno prikazana krepko.	GLEJ PRIMER
<time>	Določa določen čas, ali datum in čas.	GLEJ PRIMER
<u>	Oznaka <u> predstavlja besedilo, ki je prikazano s podčrtajem.	GLEJ PRIMER
<var>	Definira spremenljivko.	GLEJ PRIMER
<wbr>	Oznaka <wbr> določa, kje naj se besedilu doda prelom vrstice.	GLEJ PRIMER
Seznami
<dd>	Določa vrednost/opis izraza na opisnem seznamu.	GLEJ PRIMER
<dl>	Določa opisni seznam.	GLEJ PRIMER
<dt>	Definira ime na opisnem seznamu.	GLEJ PRIMER
<li>	Določa element seznama.	GLEJ PRIMER
<ol>	Določa urejen seznam.	GLEJ PRIMER
<ul>	Določa neurejen seznam.	GLEJ PRIMER
Tabele
<caption>	Določa naslov tabele.	GLEJ PRIMER
<col>	Podaja lastnosti stolpcev za vsak stolpec znotraj <colgroup> elementa.	GLEJ PRIMER
<colgroup>	Podaja skupino enega ali več stolpcev v tabeli za oblikovanje.	GLEJ PRIMER
<table>	Določa tabelo.	GLEJ PRIMER
<tbody>	Združi vsebino telesa v tabelo.	GLEJ PRIMER
<td>	Določa celico v tabeli.	GLEJ PRIMER
<tfood>	Združi vsebino noge v tabelo.	GLEJ PRIMER
<th>	Določa celico glave v tabeli.	GLEJ PRIMER
<thead>	Združi vsebino glave v tabelo.	GLEJ PRIMER
<tr>	Določa vrstico v tabeli.	GLEJ PRIMER
Obrazci
<button>	Določa gumb, ki ga je mogoče klikniti.	GLEJ PRIMER
<datalist>	Podaja seznam vnaprej določenih možnosti za kontrolnike vnosa.	GLEJ PRIMER
<fieldset>	Združuje povezane elemente v obliko.	GLEJ PRIMER
<form>	Definira HTML obrazec za uporabniški vnos.	GLEJ PRIMER
<input>	Definira vnosni nadzor.	GLEJ PRIMER
<label>	Definira oznako za <input> element.	GLEJ PRIMER
<legend>	Določa napis za <fieldset> element.	GLEJ PRIMER
<meter>	Določa skalarno meritev znotraj znanega območja (merilnik).	GLEJ PRIMER
<optgroup>	Določa skupino povezanih možnosti na spustnem seznamu.	GLEJ PRIMER
<option>	Določi možnost na spustnem seznamu.	GLEJ PRIMER
<output>	Določa rezultat izračuna.	GLEJ PRIMER
<progress>	Predstavlja napredek naloge.	GLEJ PRIMER
<select>	Določa spustni seznam.	GLEJ PRIMER
<textarea>	Oznaka <textarea> določa kontrolnik za več vrstični vnos besedila.	GLEJ PRIMER
Mediji
<area>	Določa območje znotraj slikovnega zemljevida.	GLEJ PRIMER
<audio>	Določa vdelano zvočno vsebino.	GLEJ PRIMER
<canvas>	Uporablja se za risanje grafike, sproti, prek skriptov (običajno JavaScript).	GLEJ PRIMER
<embed>	Definira vsebnik za zunanjo aplikacijo.	GLEJ PRIMER
<iframe>	Določa okvir v vrstici.	GLEJ PRIMER
<img>	Določa sliko.	GLEJ PRIMER
<map>	Določa zemljevid slike.	GLEJ PRIMER
<object>	Definira vsebnik za zunanjo aplikacijo.	GLEJ PRIMER
<picture>	Oznaka <picture> nam omogoča večjo prilagodljivost pri definiranju slik.	GLEJ PRIMER
<source>	Definira več medijskih virov za medijske elemente (<video> in <audio>).	GLEJ PRIMER
<svg>	Definira vsebnik za grafiko SVG.	GLEJ PRIMER
<track>	Določa besedilne sledi za medijske elemente (<video> in <audio>).	GLEJ PRIMER
<video>	Oznaka <video> se uporablja za vstavljanje videa v dokument.	GLEJ PRIMER
Skripti in viri
<link>	Določa razmerje med dokumentom in zunanjim virom (najpogosteje se uporablja za povezavo do slogovnih listov).	GLEJ PRIMER
<noscript>	Definira nadomestno vsebino za uporabnike, ki ne podpirajo skriptov na strani odjemalca.	GLEJ PRIMER
<script>	Definira skript na strani odjemalca.	GLEJ PRIMER
<style>	Določa informacije o slogu za dokument.	GLEJ PRIMER
<template>	Definira vsebnik za vsebino, ki naj bo skrit, ko se stran naloži.	GLEJ PRIMER
Meta/Head
<base>	Poda osnovni URL za vse relativne URL-je v HTML dokumentu.	GLEJ PRIMER
<meta>	Določa metapodatke o HTML dokumentu.	GLEJ PRIMER
<title>	Določi naslov za dokument.	GLEJ PRIMER
Splošno
<a>	Določa hiperpovezavo.	GLEJ PRIMER
<address>	Določa kontaktne podatke za avtorja HTML dokumenta.	GLEJ PRIMER
<data>	Doda strojno-berljiv prevod dane vsebine.	GLEJ PRIMER
<del>	Oznaka <del> določa besedilo, ki se izbriše iz dokumenta.	GLEJ PRIMER
<details>	Določa dodatne podrobnosti, ki si jih lahko uporabnik ogleda ali skrije.	GLEJ PRIMER
<dialog>	Določa pogovorno okno.	GLEJ PRIMER
<figcaption>	Določa napis za <figure> element.	GLEJ PRIMER
<figure>	Določa samostojno vsebino.	GLEJ PRIMER
<ins>	Oznaka <ins> določa besedilo, ki je bilo vstavljeno v dokument.	GLEJ PRIMER
<maxlength>	Atribut <maxlength> določa največjo dolžino področja besedila.	GLEJ PRIMER
<menu>	Določa neurejen seznam.	GLEJ PRIMER
<rp>	Določa kanj naj se prikaže v brskalnikih, ki ne podpirajo opomb <ruby>.	GLEJ PRIMER
<rt>	Določa razlago znakov (za vzhodnoazijsko tipografijo).	GLEJ PRIMER
<ruby>	Določa opombo v obliki rubina (za vzhodnoazijsko tipografijo).	GLEJ PRIMER
<span>	Oznaka <span> je vdelan vsebnik, ki se uporablja za označevanje dela besedila ali dokumenta.	GLEJ PRIMER
<sub>	Oznaka <sub> določa besedilo pod indeksom.	GLEJ PRIMER
<summary>	Določa viden naslov za <details> element.	GLEJ PRIMER
<sup>	Oznaka <sup> določa besedilo nad indeksom.	GLEJ PRIMER