HTML Atributi in Referenca

HTML atributi so dodatni parametri, ki jih dodajamo HTML elementom, da nadzorujemo njihovo vedenje, videz ali vsebino. Medtem ko elementi določajo kaj je na strani (npr. naslov, odstavek, slika), atributi določajo kako se ti elementi obnašajo ali izgledajo.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>HTML atributi — splošen uvod</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <section id="global">
        <h2>Globalni atributi</h2>
        <p id="uvod" class="poudarek" title="Namig ob lebdenju" lang="sl" dir="ltr" data-topic="reference" translate="no">
            To je odstavek z <code>id</code>, <code>class</code>, <code>title</code>, <code>lang</code>, 
            <code>dir</code>, <code>data-*</code> in <code>translate</code>.
        </p>
        <p hidden>Ta vsebina je skrita z <code>hidden</code>.</p>
    </section>
    
    <hr>

    <section id="links">
        <h2>Povezave in varnost</h2>
        <p>
            <a href="https://vadnica.org/" rel="noopener noreferrer" target="_blank" hreflang="en" referrerpolicy="no-referrer">
                Zunanja povezava (nov zavihek, brez referer-ja)
            </a>
        </p>
    </section>
    
    <hr>
    
    <section id="images">
        <h2>Slike (responsive)</h2>
        <img src="icons/smiley-1.svg" alt="Smeško – preprosta ilustracija" width="256" height="256" 
             srcset="icons/smiley-1.svg 256w, icons/smiley-1.svg 512w" sizes="(max-width: 480px) 256px, 256px">
        <p>Uporaba <code>srcset</code>/<code>sizes</code> za primer — brskalnik izbere najprimernejši vir.</p>
    </section>
    
    <hr>
    
    <section id="media">
        <h2>Mediji</h2>
        <video controls muted preload="metadata" width="320" poster="icons/smiley-1.svg">
            <source src="video/website.mp4" type="video/mp4">
            <track kind="subtitles" srclang="en" label="English" src="media/subs.vtt" default>
            Vaš brskalnik ne podpira videa.
        </video>
        <p>
            Atributi: <code>controls</code>, <code>muted</code>, <code>preload</code>, <code>poster</code>, 
            <code>src</code> (video/website.mp4), sledi <code>track</code> 
            (<code>kind</code>/<code>srclang</code>/<code>label</code>).
        </p>
    </section>
    
    <hr>
    
    <section id="forms">
        <h2>Obrazci</h2>
        <form action="/poslji" method="post">
            <label for="ime">Ime</label>
            <input id="ime" name="ime" type="text" placeholder="Vnesi ime" required autofocus>
            
            <br><br>
            
            <label for="eposta">E-pošta</label>
            <input id="eposta" name="eposta" type="email" placeholder="ime@domena.si" required>
            
            <br><br>
            
            <label for="kolicina">Količina (1–10)</label>
            <input id="kolicina" name="kolicina" type="number" min="1" max="10" value="1">
            
            <br><br>
            
            <label for="barva">Barva</label>
            <input id="barva" name="barva" type="color" value="#ff9900">
            
            <br><br>
            
            <label for="datoteka">Datoteka</label>
            <input id="datoteka" name="datoteka" type="file" multiple>
            
            <br><br>
            
            <label>
            <input type="checkbox" name="pogoji" required> Strinjam se s pogoji
            </label>
            
            <input type="text" name="info" value="Samo za branje" readonly>
            <input type="text" name="onemogoceno" value="Onemogočeno" disabled>
            
            <button type="submit" hidden>Pošlji</button>
        </form>
    </section>
    
    <hr>
    
    <section id="tables">
        <h2>Tabele</h2>
        <table border="1" cellpadding="6" cellspacing="0" width="100%">
            <caption>Primer z glavo (thead), telesom (tbody) in nogo (tfoot)</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>
            <tr>
                <th scope="row" id="r1">1</th>
                <td headers="r1">Primer</td>
                <td headers="r1">Vrstica z uporabo <code>scope</code>/<code>headers</code>.</td>
            </tr>
            </tbody>
            
            <tfoot>
            <tr>
                <th scope="row" colspan="3">Opomba</th>
            </tr>
            </tfoot>
        </table>
    </section>
    
    <hr>
    
    <section id="external">
        <h2>Skripti in slogi</h2>
        <p>Za zunanje vire se pogosto uporabljajo atributi <code>src</code>, <code>async</code>, <code>defer</code>, 
           <code>integrity</code>, <code>crossorigin</code>, <code>type</code> in <code>media</code>.</p>
    </section>
        
    <hr>
        
    <section id="notes">
        <h2>Opombe</h2>
        
        <ul>
            <li>Boolean atributi (npr. <code>hidden</code>, <code>disabled</code>, <code>required</code>, 
                <code>muted</code>) nimajo vrednosti — prisotnost pomeni true.</li>
            <li>Uporabljajte opisne <code>alt</code> za slike in ustrezne glave (<code>th</code> + 
                <code>scope</code>/<code>headers</code>) za tabele zaradi dostopnosti.</li>
            <li>Pri <code>target="_blank"</code> je priporočljiv <code>rel="noopener noreferrer"</code> 
                (varnost/zasebnost).</li>
        </ul>
    </section>
</body>
</html>

REZULTAT

V tem pregledu boste našli:

Globalne atribute: Atribute, ki jih lahko uporabite pri skoraj vseh elementih (npr. class, id, style).
Atribute dogodkov: Atribute, ki omogočajo interakcijo z JavaScriptom (npr. onclick, onload).
Specifične atribute: Atribute, ki veljajo samo za določene elemente (npr. src za slike, href za povezave).
Hitro referenco: Kratek seznam vseh standardnih HTML elementov.

Uporabite to stran kot hitri priročnik (cheat sheet) med razvojem. Vsak atribut je opisan s kratkim opisom in praktičnim primerom, da boste takoj vedeli, kako ga uporabiti.

Iskanje: Označi zadetke Najdeno: -

Globalni atributi (veljajo za vse elemente)

Ti atributi lahko uporabite pri skoraj vseh HTML elementih.

Atribut	Opis	Primer
`accesskey`	Določi bližnjico na tipkovnici za dostop do elementa.	`<a href="..." accesskey="s">Spletna stran</a>`
`class`	Določi enega ali več razredov za CSS ali JavaScript.	`<div class="box highlight">Vsebina</div>`
`contenteditable`	Določi, ali lahko uporabnik ureja vsebino elementa.	`<p contenteditable="true">Uredi me</p>`
`dir`	Določi smer besedila (levo-desno ali desno-levo).	`<p dir="rtl">Besedilo v arabščini</p>`
`draggable`	Določi, ali je mogoče element vleči.	`<div draggable="true">Vleci me</div>`
`hidden`	Skrije element pred prikazom.	`<p hidden>Skrito besedilo</p>`
`id`	Določi edinstven identifikator za element.	`<h1 id="naslov">Glavni naslov</h1>`
`lang`	Določi jezik vsebine elementa.	`<html lang="sl">...</html>`
`spellcheck`	Določi, ali naj bo omogočen preverjanje črkovanja.	`<textarea spellcheck="false"></textarea>`
`style`	Določi in-line CSS stile za element.	`<p style="color: blue; font-size: 16px;">Stilirano</p>`
`tabindex`	Določi vrstni red fokusiranja s tipko Tab.	`<a href="#" tabindex="1">Prva povezava</a>`
`title`	Določi dodatne informacije (prikazane ob premiku miške).	`<img src="slika.jpg" title="Opis slike">`
`translate`	Določi, ali naj se vsebina prevaja.	`<p translate="no">Ne prevajaj</p>`
`data-*`	Omogoča shranjevanje poljubnih podatkov v elementu.	`<div data-user-id="123">Uporabnik</div>`

Atributi dogodkov (JavaScript interakcije)

Ti atributi omogočajo reakcijo na dogodke v brskalniku.

Atribut	Opis	Primer
`onafterprint`	Sproži se po končanem tiskanju strani.	`<body onafterprint="prikaziSporocilo()">`
`onbeforeprint`	Sproži se preden se stran začne tiskati.	`<body onbeforeprint="skrijElemente()">`
`onbeforeunload`	Sproži se, ko uporabnik zapušča stran.	`<body onbeforeunload="return 'Ali ste prepričani?'">`
`onerror`	Sproži se, ko pride do napake pri nalaganju.	`<img src="slika.jpg" onerror="this.src='rezerva.jpg'">`
`onhashchange`	Sproži se, ko se spremeni del URL-ja za #.	`<body onhashchange="naloziSekcijo()">`
`onload`	Sproži se, ko se stran ali element naloži.	`<body onload="inicializiraj()">`
`onoffline`	Sproži se, ko brskalnik izgubi internetno povezavo.	`<body onoffline="prikaziOfflineOpozorilo()">`
`ononline`	Sproži se, ko brskalnik ponovno vzpostavi povezavo.	`<body ononline="prikaziOnlineSporocilo()">`
`onpageshow`	Sproži se, ko uporabnik navigira na stran.	`<body onpageshow="osveziPodatke()">`
`onresize`	Sproži se, ko uporabnik spremeni velikost okna.	`<body onresize="prilagodiPostavitev()">`

Hitri pregled elementov

Spodaj je seznam vseh standardnih HTML elementov s kratkim opisom njihove namene.

<a> - Definicija hiperpovezave
<abbr> - Kratka oblika besede ali fraze
<address> - Kontaktne informacije avtorja ali lastnika strani
<area> - Definira območje znotraj slike (image map)
<article> - Samostojna vsebina (npr. članek, objava v blogu)
<aside> - Vsebina, povezana s stranskim vsebino (npr. oglas, sidebar)
<audio> - Vdelava zvočnega zapisa
<b> - Debelo besedilo (brez poudarka pomembnosti)
<base> - Osnovni URL za vse relativne povezave na strani
<bd i> - Besedilo, ki se piše od desne proti levi (npr. hebrejščina)
<bdo> - Prekine smer besedila
<blockquote> - Dolga citata (blok citata)
<body> - Vsebina dokumenta
<br> - Vrstni preskok (samozapiralni)
<button> - Gumb za klik
<canvas> - Področje za risanje grafike z JavaScriptom
<caption> - Naslov tabele
<cite> - Naslov dela (knjiga, pesem, film)
<code> - Izsek računalniške kode
<col> - Definira lastnosti stolpca v tabeli
<colgroup> - Skupina stolpcev v tabeli
<data> - Povezava med človeškim in strojno berljivim besedilom
<datalist> - Seznam možnosti za vnosno polje
<dd> - Opis v definicijskem seznamu
<del> - Izbrisano besedilo (prečrtano)
<details> - Dodatne informacije, ki jih lahko uporabnik odpre/zapre
<dfn> - Definirana beseda
<dialog> - Pogovorno okno
<div> - Splošni kontejner (block-level)
<dl> - Definicijski seznam
<dt> - Izraz v definicijskem seznamu
<em> - Poudarjeno besedilo (italic)
<embed> - Vdelava zunanjega vsebine (npr. video, igra)
<fieldset> - Skupina povezanih elementov v obrazcu
<figcaption> - Naslov za sliko ali grafiko
<figure> - Samostojna vsebina (slika, diagram, koda) z naslovom
<footer> - Noga strani ali sekcije
<form> - Obrazec za vnos podatkov
<h1> do <h6> - Naslovi (od največjega do najmanjšega)
<head> - Glava dokumenta (metapodatki, naslov, skripte)
<header> - Uvodna sekcija strani ali sekcije
<hgroup> - Skupina naslovov
<hr> - Horizontalna črta (ločilo)
<html> - Koreninski element dokumenta
<i> - Besedilo v drugem slogu (italic, tehnični izraz)
<iframe> - Vdelana okno (inline frame)
<img> - Slika (samozapiralni)
<input> - Vnosno polje v obrazcu
<ins> - Dodano besedilo (podčrtano)
<kbd> - Vnos s tipkovnice
<label> - Označba za element obrazca
<legend> - Naslov za fieldset
<li> - Element seznama
<link> - Povezava do zunanjih virov (npr. CSS)
<main> - Glavna vsebina dokumenta
<map> - Karta slike (image map)
<mark> - Označeno besedilo (marker)
<meta> - Metapodatki dokumenta
<meter> - Merilnik (npr. diskovni prostor, glasovanje)
<nav> - Navigacijska povezava
<noscript> - Vsebina za brskalnike brez JavaScripta
<object> - Vdelana zunanjega objekta
<ol> - Urejen seznam
<optgroup> - Skupina možnosti v select
<option> - Možnost v select ali datalist
<output> - Rezultat izračuna
<p> - Odstavek
<param> - Parameter za object
<picture> - Skupina virov za sliko (responsive images)
<pre> - Predformatirano besedilo (ohrani presledke in vrstice)
<progress> - Napredek opravka
<q> - Kratek citat (inline)
<rp> - Oklepaji za brskalnike, ki ne podpirajo ruby
<rt> - Razlaga za ruby (npr. izgovorjava)
<ruby> - Ruby anotacija (npr. za azijske jezike)
<s> - Prečrtano besedilo
<samp> - Vzorec izhoda programa
<script> - Skripta (JavaScript)
<section> - Sekcija dokumenta
<select> - Padajoči seznam
<slot> - Vsebinski slot za web komponente
<small> - Manjše besedilo (npr. pravni opombi)
<source> - Vir za audio, video ali picture
<span> - Splošni kontejner (inline)
<strong> - Močan poudarek (bold)
<style> - CSS stil v dokumentu
<sub> - Podpisano besedilo (subscript)
<summary> - Povzetek za details
<sup> - Nadpisano besedilo (superscript)
<table> - Tabela
<tbody> - Vsebina tabele
<td> - Celica v tabeli
<template> - Skrita predloga za JavaScript
<textarea> - Večvrstno besedilno polje
<tfoot> - Noga tabele
<th> - Glavna celica v tabeli
<thead> - Glava tabele
<time> - Čas ali datum
<title> - Naslov dokumenta (v zavihku)
<tr> - Vrstica v tabeli
<track> - Podnapisi za video/audio
<u> - Podčrtano besedilo
<ul> - Neurejen seznam
<var> - Spremenljivka v matematičnem izrazu
<video> - Vdelava videa
<wbr> - Možnost preloma vrstice (word break opportunity)

Podroben seznam atributov

Seznam atributov, ki se uporabljajo pri specifičnih HTML elementih.

Atribut	Opis	Primer
`abbr`	Kratka oblika naslova v glavi tabele.	`<th abbr="Ime">Ime in priimek</th>`
`async`	Naloži skripto asinhrono (v ozadju).	`<script src="app.js" async>`
`autofocus`	Samodejno fokusira element ob nalaganju strani.	`<input type="text" autofocus>`
`autoplay`	Samodejno predvaja avdio ali video.	`<video src="film.mp4" autoplay>`
`cols`	Določi število vidnih stolpcev v textarea.	`<textarea cols="40">`
`controls`	Prikaže predvajalne kontrolnike za avdio/video.	`<audio src="pesem.mp3" controls>`
`crossorigin`	Določi način obravnave CORS zahtevkov.	`<script src="..." crossorigin="anonymous">`
`datetime`	Določi datum in čas za element time ali del.	`<time datetime="2024-01-15">15. januar</time>`
`default`	Označi privzeto izbrano možnost v track.	`<track src="podnapisi.vtt" default>`
`defer`	Odloži izvajanje skripte do konca nalaganja strani.	`<script src="app.js" defer>`
`dirname`	Pošlje smer besedila skupaj s podatki obrazca.	`<input type="text" name="ime" dirname="ime.dir">`
`disabled`	Onemogoči element (ni mogoče klikniti ali urejati).	`<button disabled>Ni na voljo</button>`
`for`	Poveže label z elementom obrazca ali output z vhodi.	`<label for="email">E-pošta</label>`
`headers`	Poveže celico tabele z glavnimi celicami.	`<td headers="ime">Borut</td>`
`height`	Določi višino elementa v pikslih.	`<img src="slika.jpg" height="200">`
`href`	Določi URL cilja povezave.	`<a href="https://vadnica.org">Vadnica</a>`
`hreflang`	Določi jezik ciljne strani povezave.	`<a href="..." hreflang="sl">Slovenščina</a>`
`integrity`	Preveri integriteto zunanjega vira (SRI).	`<script src="..." integrity="sha384-...">`
`kind`	Določi vrsto sledi (podnapisi, opisi, poglavja).	`<track kind="subtitles" srclang="sl">`
`label`	Določi naslov za option ali optgroup.	`<optgroup label="Evropa">`
`loop`	Ponavljajoče predvajanje zvoka ali slike.	`<audio src="pesem.mp3" loop>`
`max`	Določi največjo dovoljeno vrednost.	`<input type="number" max="100">`
`media`	Določi medijsko pogoj za vir ali povezavo.	`<link href="tisk.css" media="print">`
`multiple`	Omogoči izbor več vrednosti v input ali select.	`<select multiple>`
`muted`	Utiša avdio ali video ob predvajanju.	`<video src="film.mp4" muted>`
`name`	Določi ime elementa (za pošiljanje podatkov obrazca).	`<input type="text" name="uporabnik">`
`placeholder`	Prikaže namig v praznem vnosnem polju.	`<input type="text" placeholder="Vpiši ime...">`
`poster`	Določi naslovno sliko za video pred predvajanjem.	`<video src="film.mp4" poster="naslovnica.jpg">`
`preload`	Določi, ali in kako se avdio/video naloži vnaprej.	`<video src="film.mp4" preload="auto">`
`readonly`	Določi, da je polje samo za branje (ni mogoče urejati).	`<input type="text" readonly value="Fiksno">`
`referrerpolicy`	Določi politiko pošiljanja referrer glave pri zahtevkih.	`<a href="..." referrerpolicy="no-referrer">`
`rel`	Določi razmerje med trenutno in ciljno stranjo.	`<link rel="stylesheet" href="stil.css">`
`required`	Določi, da mora uporabnik izpolniti polje.	`<input type="email" required>`
`rows`	Določi število vidnih vrstic v textarea.	`<textarea rows="6">`
`scope`	Določi obseg glavne celice v tabeli.	`<th scope="col">Ime</th>`
`selected`	Določi privzeto izbrano možnost v select.	`<option selected>Privzeto</option>`
`sizes`	Določi velikosti za ikono ali responsive vire.	`<link rel="icon" sizes="16x16 32x32">`
`src`	Določi pot do vira (slika, skripta, avdio, video).	`<img src="slika.jpg">`
`srclang`	Določi jezik sledi (podnapisov).	`<track src="sl.vtt" srclang="sl">`
`srcset`	Določi seznam virov za responsive slike.	`<img srcset="mala.jpg 480w, velika.jpg 1024w">`
`title`	Določi dodatne informacije (prikazane ob premiku miške).	`<abbr title="HyperText Markup Language">HTML</abbr>`
`type`	Določi vrsto elementa (npr. input type, script type).	`<input type="email">`
`value`	Določi vrednost elementa (za input, option, li).	`<input type="text" value="Borut">`
`width`	Določi širino elementa v pikslih.	`<img src="slika.jpg" width="300">`
`wrap`	Določi način preloma besedila v textarea.	`<textarea wrap="hard">`