Top 50 pitanja i odgovora na HTML intervjuu (2026.)

By: Emma Davis Emma Davis
Hours Ažurirano

Spremate se za HTML intervju? Dobro razmislite o pitanjima na koja biste mogli naići. Ovi intervjui su važni jer otkrivaju tehničku dubinu, pristupe rješavanju problema i praktičnu primjenu bitnih koncepata web razvoja.

Mogućnosti u HTML poslovima protežu se kroz različite domene, od početnika do viših stručnjaka s 5 ili 10 godina iskustva u tom području. Poslodavci procjenjuju tehničku stručnost, stručnost u domeni i vještine analiziranja putem pitanja i odgovora. Snažno profesionalno iskustvo, iskustvo na osnovnoj razini i svestran skup vještina pomažu kandidatima da se nose s osnovnim, naprednim i tehničkim izazovima.

Naša analiza temelji se na povratnim informacijama više od 60 tehničkih voditelja, uvidima više od 45 menadžera i razgovorima s više od 100 stručnjaka. Zajedno, ove perspektive ističu različita očekivanja i promjenjive potrebe industrije.

Pitanja i odgovori za HTML intervju

Najčešća pitanja i odgovori za HTML na intervjuu

1) Što je HTML i zašto se smatra okosnicom web razvoja?

HTML (HyperText Markup Language) je temeljni jezik weba, osmišljen za strukturiranje dokumenata i davanje značenja web sadržaju. Definira elemente poput naslova, odlomaka, poveznica, slika i multimedije, omogućujući preglednicima da ih interpretiraju i prikazuju. Razlog zašto se naziva okosnicom web razvoja je taj što svaka web stranica, bez obzira na složenost, koristi HTML za definiranje svog izgleda i sadržaja. Bez HTML-a, tehnologije poput CSS-a i JavaSkripta ne bi imala bazu za stiliziranje ili manipuliranje.

👉 Besplatno preuzimanje PDF-a: HTML pitanja za intervju

2) Objasnite razliku između HTML-a i HTML5 s primjerima.

HTML je standardni jezik za označavanje, dok je HTML5 njegova moderna, moćnija verzija predstavljena 2014. godine. HTML5 je donio semantičke elemente, multimedijsku podršku i API-je koji su eliminirali potrebu za dodacima trećih strana poput Flasha.

svojstvo HTML HTML5
Vrsta dokumenta Dugo i složeno Jednostavan:
multimedijalni Potrebni su dodaci ,
Grafika Nije izvorno podržano ,
Obrasci Ograničeni ulazi Novi unosi poput email, date
Semantičke oznake Oslanjao se na , ,

Primjer:

<video controls>
	<source src="sample.mp4" type="video/mp4">
</video>

3) Kako je organizirana osnovna struktura HTML dokumenta?

Svaki HTML dokument slijedi definiranu strukturu kako bi se osiguralo da preglednici ispravno interpretiraju sadržaj. Na vrhu je deklaracija koja specificira korištenje HTML5. element obuhvaća cijeli sadržaj, podijeljen na i . The sadrži metapodatke, naslov, poveznice na CSS i skripte, dok prikazuje vidljivi sadržaj. Na primjer:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sample Page</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>

4) Što su oznake i elementi u HTML-u? Navedite primjere.

Oznake su ključne riječi zatvorene u kutne zagrade koje upućuju preglednik kako prikazati sadržaj. Element se, međutim, odnosi na cijelu strukturu koja se sastoji od početne oznake, sadržaja i završne oznake. Na primjer:

  • Označiti: i
  • Stavka: Ovo je odlomak

Neki elementi se sami zatvaraju, kao što su i , što znači da ne zahtijevaju zatvarajuće oznake.

5) Koje vrste popisa su podržane u HTML-u i gdje se koriste?

HTML podržava tri glavne vrste popisa:

  1. Uređeni popis ( ) – stavke se prikazuju s brojevima ili slovima.
  2. Neuređeni popis ( ) – stavke se prikazuju s grafičkim oznakama.
  3. DescriptPopis iona ( ) – koristi se za pojmove i njihove definicije.

Primjer:

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
</dl>

Popisi se često koriste za navigacijske izbornike, organizaciju sadržaja i pojmove u glosaru.

6) Kako se atributi koriste u HTML-u i koji su uobičajeni primjeri?

Atributi pružaju dodatne informacije HTML elementima. Uvijek su navedeni unutar početne oznake i slijede par ime-vrijednost. Uobičajeni primjeri uključuju:

  • src u za lokaciju slike.
  • href za odredište hiperveze.
  • id i class za stiliziranje i JavaCiljanje skripti.
  • alt na slikama radi pristupačnosti.

Na primjer:

<img src="logo.png" alt="Company Logo">

7) Što su semantički HTML elementi i koje prednosti nude?

Semantički elementi jasno opisuju svoje značenje i programerima i preglednicima. Primjeri uključuju , , , i .

Prednosti:

  • Poboljšajte pristupačnost za čitače zaslona.
  • Pružite tražilicama jasnije značenje sadržaja (SEO).
  • Poboljšajte čitljivost i održivost koda.

Primjer:

<article>
	<h2>News Update</h2>
	<p>Latest update about web development trends.</p>
</article>

8) Objasnite razliku između blokovnih i linijskih elemenata s primjerima.

Elementi na razini bloka, kao što su , i , zauzimaju cijelu širinu svog spremnika i počinju u novom retku. Ugrađeni elementi, poput , i , zauzimaju samo onoliko širine koliko zahtijeva njihov sadržaj.

Tip Primjeri Karakteristike
Razina bloka , Početak u novom retku, puna širina
U redu , Tečnost unutar teksta, širina ovisi o sadržaju

9) Kako se stvaraju hiperveze i koja je razlika između apsolutnih i relativnih URL-ova?

Hiperveze se stvaraju pomoću oznake s href atribut.

  • Apsolutni URL: Sadrži punu putanju, uključujući protokol i domenu.
    Primjer: <a href="https://example.com/page.html">Visit</a>
  • Relativni URL: Odnosi se na datoteku u odnosu na trenutnu stranicu.
    Primjer: <a href="/hr/about.html">About Us</a>

Apsolutni URL-ovi su poželjniji pri povezivanju na vanjske resurse, dok su relativni URL-ovi učinkoviti unutar iste web stranice.

10) Koja je uloga oznaka i njezini atributi?

The Oznaka se koristi za prikupljanje korisničkog unosa i slanje na poslužitelj. Njena dva najvažnija atributa su:

  • akcijski – definira kamo će se podaci slati.
  • način – određuje HTTP metodu ( GET or POST ).

Primjer:

<form action="/hr/submit" method="post">
	<input type="text" name="username">
	<input type="submit">
</form>

POVEZANI ČLANCI

11) Koje su različite vrste polja za unos dostupne u HTML5 obrascima?

HTML5 je uveo nove tipove unosa kako bi poboljšao upotrebljivost i smanjio oslanjanje na JavaValidacija skripte. Uobičajene vrste uključuju:

  • Tekstualno: tekst, lozinka, e-pošta, URL, pretraga, tel.
  • Na temelju datuma i vremena: datum, lokalni datum i vrijeme, mjesec, tjedan, vrijeme.
  • Brojčano: broj, raspon.
  • Booleov: potvrdni okvir, radio.
  • Datoteka i boja: datoteka, boja.

Primjer:

<input type="email" placeholder="Enter your email">
<input type="date">
<input type="range" min="1" max="10">

Ove vrste unosa omogućuju preglednicima da prikažu optimizirane kontrole korisničkog sučelja, kao što su kalendari za datume ili alati za odabir boja, poboljšavajući korisničko iskustvo i smanjujući pogreške u obrascima.

12) Kako HTML5 semantičke oznake poput , , i razlikuju se u upotrebi?

Semantičke oznake uvedene su kako bi zamijenile generičke elementi i daju značenje strukturi stranice.

Pojam Svrha Primjer
Gornji dio, često s logotipima/navigacijom Navigacija web-lokacije
Donji dio, autorska prava ili poveznice Podnožje stranice
Logičko grupiranje povezanog sadržaja Odjeljak bloga
Neovisni sadržaj koji može stajati samostalno Novinski članak

Primjer:

<article>
	<header><h2>Breaking News</h2></header>
	<p>Details of the story...</p>
	<footer>Author: John Doe</footer>
</article>

Korištenje ovih elemenata poboljšava SEO i pristupačnost.

13) Objasnite razliku između inline CSS-a, internog CSS-a i eksternog CSS-a.

Postoje tri glavna načina primjene CSS-a na HTML:

  1. Ugrađeni CSS: Primjenjuje se izravno na elemente pomoću style atribut.
    Primjer: <p style="color:red;">Text</p>
  2. Interni CSS: Deklarisano unutar tags in the .
  3. Vanjski CSS: Povezano putem .css datoteka pomoću .
način Prednosti Nedostaci
U redu Brzo, specifično Teško za održavanje, ne može se ponovno koristiti
interni Dobro za jednu stranicu Nije moguće ponovno koristiti na više stranica
Vanjski Višekratno upotrebljivo, čisto Zahtijeva dodatno učitavanje datoteke

Najbolja praksa je koristiti vanjski CSS za održivost.

14) Što su HTML entiteti i zašto se koriste?

HTML entiteti su posebni kodovi koji se koriste za predstavljanje rezerviranih znakova, simbola ili nevidljivih znakova u HTML dokumentima. Oni osiguravaju da se znakovi poput <, > i & ispravno prikazuju umjesto da se interpretiraju kao kod.

Primjeri uobičajenih entiteta:

  • < →
  • > → >
  • & → &
  • © → ©
  • → nerazdvojivi razmak

Na primjer:

<p>Use <strong> instead of <b>.</p>

Entiteti su ključni za očuvanje čitljivosti koda i sprječavanje problema s renderiranjem.

15) Kako elementi rade, i koje su njihove prednosti i nedostaci?

The Oznaka omogućuje ugrađivanje jedne HTML stranice u drugu. Često se koristi za ugrađivanje videa, karata ili vanjskih widgeta.

Prednosti:

  • Jednostavna integracija vanjskog sadržaja kao što je YouTube ili Google karte.
  • Odvajanje sadržaja od glavne stranice.

Nedostaci:

  • Sporije učitavanje zbog dodatnih zahtjeva.
  • Sigurnosni rizici (clickjacking, cross-site scripting).
  • Nije uvijek SEO prilagođeno.

Primjer:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Moderne alternative često preporučuju API-je ili metode ugradnje s boljom kontrolom i sigurnošću.

16) Što su meta oznake u HTML-u i kako utječu na SEO?

Meta oznake su isječci informacija smješteni unutar odjeljak HTML dokumenta. Oni pružaju metapodatke o stranici, ali se ne prikazuju korisnicima.

Ključne vrste meta oznaka:

  • Description:
  • Ključne riječi (ukinuto):
  • Prikazni dio (responzivni dizajn):
  • Skup znakova:

Tražilice koriste meta opise za generiranje isječaka u rezultatima pretraživanja, što izravno utječe na klikovni postotak (CTR).

17) Koja je razlika između apsolutnih, relativnih i putanja relativnih prema korijenu u HTML poveznicama?

Linkovi se mogu pisati na tri različita načina, ovisno o referencama puta.

Tip Primjer Koristite slučaj
apsolutan https://example.com/images/pic.jpg Vanjski resursi
rođak slike/slika.jpg Isti direktorij ili poddirektorij
Korijen-relativni /imovina/slike/slika.jpg Iz korijena domene

Apsolutne putanje jamče dohvaćanje resursa, ali smanjuju prenosivost. Relativne putanje olakšavaju premještanje sadržaja, dok korijensko-relativne osiguravaju konzistentnost unutar velikih web-lokacija.

18) Kako HTML5 API-ji poput geolokacije, web pohrane i Canvas poboljšava funkcionalnost?

HTML5 je uveo API-je koji proširuju mogućnosti web aplikacija bez potrebe za dodacima.

  • API za geolokaciju: Dohvaća lokaciju korisnika (uz dopuštenje).
  • API za web pohranu: Pruža localStorage i sessionStorage za pohranu podataka ključ-vrijednost do 10 MB.
  • Canvas API-jem: Omogućuje crtanje oblika, slika i animacija izravno na web stranici.

Primjer: Lokalna pohrana

localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));

Ovi API-ji poboljšavaju interaktivnost i performanse u modernim aplikacijama.

19) Objasnite prednosti i nedostatke korištenja element za dizajn izgleda.

Tablice su se nekada koristile za raspored stranica, ali se sada ne preporučuju.

Prednosti:

  • Pruža strukturu za tablične podatke.
  • Podržano u svim preglednicima.

Nedostaci:

  • Loša dostupnost čitačima zaslona prilikom zloupotrebe.
  • Usporava renderiranje stranice.
  • Teže za održavanje u usporedbi s CSS sustavima za oblikovanje poput Flexboxa i Grida.

Najbolja vježba: Koristiti isključivo za tablične podatke (npr. rasporede, usporedbe proizvoda) i CSS za izgled.

20) Može li se više CSS klasa primijeniti na jedan HTML element? Kako se to postiže?

Da, HTML omogućuje primjenu više CSS klasa na jedan element odvajanjem razmacima u class atribut. Ova tehnika omogućuje modularne, višekratno upotrebljive stilove i izbjegava dupliciranje.

Primjer:

<p class="text-bold text-red highlight">Important Notice</p>

Ovdje, element nasljeđuje stilove iz sve tri klase. Ovaj pristup podržava komponiranost, što dizajn čini skalabilnijim i lakšim za održavanje.

21) Koja je razlika između a u HTML-u?

Oba i generički su spremnici, ali služe različitim svrhama.

  • je element na razini bloka koji se koristi za grupiranje većih dijelova sadržaja ili struktura izgleda.
  • je inline element koji se koristi za stiliziranje ili grupiranje malih fragmenata teksta.
svojstvo
prikaz Razina bloka U redu
Upotreba Raspored, kontejneri Isticanje teksta
Primjer Omatanje dijelova Riječi za stiliziranje

Primjer:

<div class="container">
	<p>This is a <span class="highlight">highlighted</span> word.</p>
</div>

22) Kako rad s elementima i gdje se koristi?

The Element u HTML5 pruža površinu za crtanje temeljenu na bitmapi, ovisnu o rezoluciji. Koristi se za prikaz grafike, animacija, grafikona, pa čak i jednostavnih igara izravno u pregledniku. JavaAPI-ji za skripte kao što su getContext("2d") omogućuju programerima crtanje oblika, putanja, slika i teksta.

Primjer:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>

Slučajevi upotrebe uključuju nadzorne ploče, vizualizacije u stvarnom vremenu i interaktivne animacije.

23) Objasnite razliku između id i class atributi u HTML-u.

Oboje id i class su atributi koji se koriste za stiliziranje i JavaCiljanje skripti, ali se razlikuju po jedinstvenosti i primjeni.

Atribut Karakteristike Primjer
id Mora biti jedinstven u dokumentu; koristi se za jedan element.
razred Može se primijeniti na više elemenata; omogućuje grupiranje.

Primjer upotrebe:

<div id="main-header">Welcome</div>
<p class="text-highlight">Hello</p>

Najbolja praksa: Koristite id za jedinstvene identifikatore i class za grupe za stiliziranje koje se mogu ponovno koristiti.

24) Što su atributi data-* u HTML5 i koje su njihove prednosti?

The data-* Atributi omogućuju programerima da pohranjuju prilagođene podatke izravno unutar HTML elemenata. Ovi atributi imaju prefiks data- nakon čega slijedi ime, što ih čini dostupnima putem JavaSkripta.

Prednosti:

  • Omogućite lagano pohranjivanje metapodataka bez utjecaja na DOM.
  • Korisno za dinamičke aplikacije, opise alata ili obradu na strani klijenta.

Primjer:

<button data-user="123" data-role="admin">Edit User</button>
<script>
	let btn = document.querySelector("button");
	console.log(btn.dataset.user); // 123
</script>

Ova značajka potiče fleksibilnost u upravljanju stanjem i dinamičkim ponašanjem.

25) Kako se osigurava dostupnost u HTML-u korištenjem ARIA uloga i atributa?

Pristupačnost u HTML-u osigurava da web aplikacije mogu koristiti osobe s invaliditetom. ARIA (Accessible Rich Internet Applications - Pristupačne bogate internetske aplikacije) uloge i atributi pružaju dodatni kontekst pomoćnim tehnologijama.

Primjeri ARIA atributa:

  • role=”navigacija” – definira navigacijske izbornike.
  • aria-label=”Zatvori” – pruža opisne oznake.
  • aria-hidden=”true” – skriva elemente od čitača zaslona.

Primjer:

<button aria-label="Close window">X</button>

Kombiniranjem semantičkog HTML-a s ARIA atributima, programeri poboljšavaju uključivost i pridržavaju se standarda pristupačnosti poput WCAG-a.

26) Koja je razlika između inline, block i inline-block elemenata?

HTML elementi se kategoriziraju na temelju ponašanja pri prikazu.

Tip Karakteristike Primjeri
U redu Ne počinjite u novom retku; samo onoliko široko koliko je širok sadržaj. ,
Blokirati Zauzmite cijelu širinu, počevši od novog retka. ,
Ugrađeni blok Ponaša se kao inline, ali dopušta svojstva bloka (visina, širina). , stilizirano

Primjer:

<span>Inline</span>
<div>Block</div>
<span style="display:inline-block; width:100px;">Inline-block</span>

27) Kako optimizirati slike u HTML-u za bolje performanse?

Optimizacija slika smanjuje vrijeme učitavanja stranice i poboljšava SEO. Strategije uključuju:

  • Korištenje modernih formata kao što su WebP or AVIF.
  • Primjena responzivnih slika s i srcset.
  • Postavljanje atributa širine i visine kako bi se izbjegli pomaci rasporeda.
  • Komprimiranje slika prije prijenosa.
  • Lijeno učitavanje pomoću loading="lazy".

Primjer:

<img src="image.webp" alt="Optimized Image" loading="lazy">

Dobro optimizirane slike poboljšavaju korisničko iskustvo i poboljšavaju rezultate Core Web Vitalsa.

28) Koji je životni ciklus HTML stranice u pregledniku?

Životni ciklus HTML stranice sastoji se od nekoliko koraka:

  1. Raščlanjivanje: Preglednik čita HTML i konstruira model objekta dokumenta (DOM).
  2. Učitavanje resursa: Dohvaćaju se povezani CSS, JS i slike.
  3. Iscrtavanje: Preglednik primjenjuje stilove i elemente izgleda.
  4. Skriptiranje: JavaSkripta izvršava i manipulira DOM-om ako je potrebno.
  5. Interakcija: Obrađuju se događaji poput klikova i pomicanja.

Razumijevanje ovog životnog ciklusa pomaže programerima da optimiziraju brzina renderiranja, minimizirajte blokirajuće skripte i osigurajte učinkovito učitavanje stranice.

29) Koje su prednosti i nedostaci korištenja semantičkog HTML-a?

Semantički HTML poboljšava značenje i dostupnost web stranica, ali ima i svoje prednosti.

Prednosti Nedostaci
Poboljšava pristupačnost za čitače ekrana. Zahtijeva učenje novih oznaka.
Poboljšava SEO pojašnjavanjem strukture. Može povećati početno vrijeme razvoja.
Lakša čitljivost i održavanje koda. Stariji preglednici mogu imati ograničenu podršku.

Sveukupno, prednosti nadmašuju nedostatke, što semantički HTML čini najboljom praksom u modernom razvoju.

30) Kako je element koji se koristi za responzivne slike?

The Element omogućuje programerima da pruže više izvora slika za različite uređaje ili razlučivosti zaslona. Koristi ugniježđene elementi s atributima kao što su media i type.

Primjer:

<picture>
	<source srcset="image-large.webp" media="(min-width: 800px)">
	<source srcset="image-small.webp" media="(max-width: 799px)">
	<img src="fallback.jpg" alt="Responsive Image">
</picture>

To osigurava da mobilni uređaji učitavaju manje slike, dok stolna računala primaju one visoke rezolucije, poboljšavajući performanse i odzivnost.

31) Koji su različiti načini ugradnje zvuka u HTML5?

HTML5 pruža element, eliminirajući potrebu za vanjskim dodacima. Podržava više formata poput MP3, OGG i WAV kako bi se osigurala kompatibilnost s više preglednika. Programeri mogu navesti više izvora unutar element, što omogućuje pregledniku da odabere prvi podržani format.

Primjer:

<audio controls>
	<source src="sound.mp3" type="audio/mpeg">
	<source src="sound.ogg" type="audio/ogg">
	Your browser does not support the audio element.
</audio>

Prednosti uključuju izvorne kontrole, automatsku reprodukciju, ponavljanje i pristupačnost s titlovima putem .

32) Kako rad s oznakama i koje su njegove prednosti?

The Element omogućuje ugrađivanje videa bez playera trećih strana. Podržani formati uključuju MP4 (H.264), WebM i Ogg. Razvojni programeri mogu dodati više izvora i atributa poput controls, autoplay, loopi poster.

Primjer:

<video controls width="600" poster="thumbnail.jpg">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.webm" type="video/webm">
	Your browser does not support the video tag.
</video>

Prednosti:

  • Uklanja ovisnost o Flashu.
  • Pruža ugrađenu pristupačnost s titlovima.
  • Nudi bolje performanse i sigurnost.

33) Koje su prednosti i nedostaci korištenja HTML obrazaca?

Obrasci su bitni za korisnički unos, ali imaju svoje prednosti i nedostatke.

Prednosti Nedostaci
Standardizirano, podržano u svim preglednicima. Ranjiv na sigurnosne rizike (npr. XSS, CSRF).
Jednostavna integracija s backend serverima. Loše dizajnirani obrasci smanjuju upotrebljivost.
Podržava validaciju i više vrsta unosa. Za sigurnu obradu podataka potreban je HTTPS.

Najbolja praksa: Koristite semantičke oznake obrazaca, validaciju na strani klijenta i poslužitelja te sigurne metode prijenosa.

34) Po čemu se validacija obrazaca na strani klijenta razlikuje od validacije na strani poslužitelja?

Validacija na strani klijenta izvodi se u pregledniku pomoću HTML5 atributa ( required, pattern ) Ili JavaSkripta. Pruža trenutnu povratnu informaciju, ali se može zaobići.

Validacija na strani poslužitelja događa se nakon što su podaci poslani poslužitelju, osiguravajući sigurnost i ispravnost.

Aspekt Na strani klijenta Na strani poslužitelja
Brzina Trenutna povratna informacija Sporije, nakon predaje
Sigurnost Može se zaobići Sigurnije
Primjer PHP, Node.js validacija

Najbolja praksa je kombinirati obje metode za optimalnu upotrebljivost i sigurnost.

35) Koja je svrha viewport meta oznaka u responzivnom dizajnu?

The viewport Meta oznaka osigurava ispravno prikazivanje web stranica na mobilnim uređajima. Prema zadanim postavkama, mnogi mobilni preglednici smanjuju stranice na računalu. Oznaka viewport omogućuje kontrolu nad skaliranjem i širinom.

Primjer:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Prednosti:

  • Osigurava responzivne izglede.
  • Sprječava probleme sa zumiranjem.
  • Poboljšava ključne web pokazatelje i upotrebljivost na malim ekranima.

Bez njega, web stranice mogu izgledati sitne i neupotrebljive na mobilnim uređajima.

36) Kako i elementi poboljšavaju HTML5 aplikacije?

: Pruža izvorni način za izradu modalnih skočnih prozora. Može se otvoriti ili zatvoriti putem JavaSkripta ( show() i close() ).

: Definira HTML fragmente koji se mogu ponovno koristiti i koji se ne prikazuju dok ih ne aktivira JavaSkripta.

Primjer:

<dialog id="myDialog">Hello!</dialog>
<template id="card">
	<div class="card">Reusable content</div>
</template>

Prednosti:

  • uklanja ovisnost o vanjskim modalnim bibliotekama.
  • omogućuje dinamičko renderiranje bez zatrpavanja DOM-a.

37) Objasnite razlike između , , and .

Skripte mogu blokirati prikazivanje stranice ako se njima ne upravlja pravilno.

Atribut Ponašanje Koristite slučaj
Blokira parsiranje HTML-a dok se izvršavanje ne završi. Mali inline skripti
Učitava se asinhrono, izvršava se odmah kada je spremno. Analitika, oglasi
Učitava se asinkrono, izvršava se nakon parsiranja HTML-a. Skripte ovisne o DOM-u

Primjer:

<script src="main.js" defer></script>

Korištenje async i defer poboljšava performanse i sprječava probleme s blokiranjem renderiranja.

38) Kako možete osigurati sigurno rukovanje obrascima u HTML-u?

Sigurnost obrazaca zahtijeva i HTML prakse i zaštitne mjere u pozadini.

Ključne prakse uključuju:

  • Uvijek koristite HTTPS za prijenos podataka.
  • Validirajte ulaze i na strani klijenta i na strani poslužitelja.
  • Koristite autocomplete="off" atribut za osjetljiva polja poput lozinki.
  • Korak po korak do prijave rel="noopener noreferrer" na vanjskim akcijama obrasca.
  • Spriječite krivotvorenje zahtjeva na više web-mjesta (CSRF) pomoću tokena.

Primjer:

<form method="post" action="/hr/secure" autocomplete="off">
	<input type="password" name="pwd" required>
</form>

Sigurni obrasci štite od curenja podataka i uobičajenih ranjivosti.

39) Koja je razlika između kolačića, localStorage i sessionStorage u HTML5?

HTML5 je uveo web-pohranu kao alternativu kolačićima.

Vrsta skladištenja Kapacitet Život Poslano putem HTTP-a?
Cookies ~4 KB Do datuma isteka Da
lokalna pohrana ~5–10 MB Trajno dok se ne izbriše Ne
Pohrana sesije ~5 MB Dok se preglednik/kartica ne zatvori Ne

Primjer:

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));

Web Storage poboljšava performanse jer se podaci ne šalju sa svakim HTTP zahtjevom.

40) Kako HTML rješava pristupačnost slika, obrazaca i multimedije?

Pristupačnost osigurava uključivost za korisnike s invaliditetom.

  • Slike: Koristiti alt atributi za čitače ekrana.
  • obrasci: Dodaj povezano s for atributi za opisivanje ulaza.
  • Multimedija: Dodajte titlove ( za videozapise) i transkripte.

Primjer:

<img src="logo.png" alt="Company Logo">
<label for="email">Email</label>
<input type="email" id="email">

Poštivanje standarda pristupačnosti (WCAG, ARIA) čini web aplikacije upotrebljivijima i pravno usklađenijima.

41) Koje su prednosti korištenja element s multimedijom?

The element se koristi unutar ili pružiti tekstualne zapise kao što su titlovi, opisi ili opisi. To poboljšava pristupačnost i upotrebljivost.

Prednosti:

  • Pomaže korisnicima s oštećenjem sluha.
  • Poboljšava SEO jer se tekst može indeksirati.
  • Poboljšava korisničko iskustvo u bučnim okruženjima.

Primjer:

<video controls>
	<source src="movie.mp4" type="video/mp4">
	<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

To osigurava da je multimedijski sadržaj dostupan široj publici.

42) Kako se contenteditable Kako atributi funkcioniraju u HTML-u?

The contenteditable Atribut omogućuje korisnicima izravno uređivanje sadržaja elementa u pregledniku bez vanjskih alata.

Primjer:

<p contenteditable="true">This paragraph is editable.</p>

Slučajevi upotrebe:

  • Uređivači u pregledniku.
  • Aplikacije za bilješke ili slične CMS-u.
  • Izrada prototipa interaktivnih značajki.

Iako je koristan, s njim se mora pažljivo rukovati jer nekontrolirane izmjene mogu predstavljati sigurnosne rizike prilikom slanja podataka na poslužitelje.

43) Koja je razlika između progresivnog poboljšanja i graciozne degradacije u HTML dizajnu?

Ovo su dva pristupa za rukovanje različitim mogućnostima preglednika.

Pristup Koncept Primjer
Progresivno poboljšanje Započnite s osnovnim HTML-om i dodajte napredne značajke za preglednike koji to podržavaju. Obrazac radi s osnovnim HTML-om, ali koristi JavaValidacija skripte ako je dostupna.
Graciozna degradacija Prvo izgradite napredne značajke i osigurajte rezervu za starije preglednike. Grafikon temeljen na platnu vraća se na statičnu sliku.

Progresivno poboljšanje je danas preferirana strategija jer osigurava univerzalni pristup.

44) Što su mikropodaci u HTML5 i kako su korisni za SEO?

Mikropodaci su način ugrađivanja strukturiranih podataka u HTML elemente pomoću atributa kao što su itemscope, itemtypei itempropTražilice ovo koriste za prikaz bogatih isječaka u rezultatima.

Primjer:

<div itemscope itemtype="https://schema.org/Book">
	<span itemprop="name">HTML Mastery</span>
	by <span itemprop="author">Jane Doe</span>
</div>

Prednosti:

  • Poboljšava vidljivost bogatim isječcima.
  • Pruža kontekst tražilicama.
  • Poboljšava CTR u rezultatima pretraživanja.

45) Koje su prednosti i nedostaci korištenja linijskih okvira ( )?

Dotakli smo se ranije, ali sažejmo prednosti i nedostatke.

Prednosti Nedostaci
Jednostavna integracija sadržaja trećih strana. Usporava performanse stranice.
Drži vanjske resurse izoliranima. Osjetljivo na klikjacking.
Korisno za ugrađivanje karata, videa. Nije SEO optimizirano, sadržaj se često ignorira.

Najbolja praksa je koristiti štedljivo i preferiraju API-je ili ugradbe koji omogućuju prilagodbu i sigurnu integraciju.

46) Kako koristite i elementi u HTML5?

Ovi elementi stvaraju odjeljke sadržaja koji se mogu sklopiti bez JavaSkripta.

Primjer:

<details>
	<summary>Click for more details</summary>
	<p>This text is revealed when expanded.</p>
</details>

Prednosti:

  • Poboljšava interakciju korisnika.
  • Poboljšava pristupačnost (prilagođeno tipkovnici i čitaču zaslona).
  • Izbjegava oslanjanje na običaje JavaSkriptna rješenja.

Ovo je posebno korisno za često postavljana pitanja ili sučelja za progresivno otkrivanje informacija.

47) Koje su ključne razlike između HTML-a i XHTML-a?

HTML i XHTML (Extensible HTML) su jezici za označavanje, ali XHTML slijedi stroža XML pravila.

svojstvo HTML XHTML
Sintaksa Fleksibilno Strogo, XML-kompatibilno
Zatvaranje oznake Izborni obavezan
Osjetljivost slučaja Nije osjetljivo na velika i mala slova Mora biti malo slovo
Rukovanje pogreškama Preglednici opraštaju Pogreške parsiranja prekidaju renderiranje

Primjer: valjano je u HTML-u, ali mora biti u XHTML-u. Danas je HTML5 uvelike zamijenio XHTML zbog svoje fleksibilnosti.

48) Koje su različite vrste doctype-ova u HTML-u i zašto su važni?

Doctype govori pregledniku koju verziju HTML-a treba koristiti.

vrste:

  1. HTML5: (jednostavno, moderno).
  2. HTML 4.01 Strogi/Prijelazni/Skup okvira.
  3. XHTML 1.0 Strogi/Prijelazni/Skup okvira.

Korištenje ispravnog doctype-a osigurava dosljedno prikazivanje u svim preglednicima. HTML5 doctype je sada standard.

49) Kako poboljšati SEO s HTML oznakama poput , <meta> i <h1>?

SEO se oslanja na pravilno semantičko strukturiranje.

  • : Definira naslov stranice, ključan za rangiranje.
  • : Pruža isječak za tražilice.
  • Naslovi ( – ): Organizirajte hijerarhiju sadržaja.
  • alt atributi na slikama: Poboljšajte vidljivost u pretraživanju slika.
  • Označavanje sheme: Pruža strukturirane podatke.

Primjer:

<title>HTML Interview Questions</title>
<meta name="description" content="Comprehensive HTML interview guide with answers.">
<h1>Top HTML Questions</h1>

50) Koje su razlike između a u HTML-u?

Iako oboje koriste href atribut, njihove se svrhe razlikuju.

Pojam Svrha Primjer
Stvara hiperveze za navigaciju između stranica. Kliknite ovdje
Definira odnose s vanjskim resursima poput CSS-a ili ikona.

The Element se nikada ne pojavljuje u tijelu stranice, a istovremeno stvara tekst ili slike na koje se može kliknuti.

🔍 Najčešća pitanja za HTML intervju sa stvarnim scenarijima i strateškim odgovorima

1) Koja je razlika između semantičkih i nesemantičkih HTML elemenata i zašto je to važno?

Što ispitivač traži: Razumijevanje semantike, pristupačnosti, SEO-a i održivosti.

Primjer odgovora:

„Semantički elementi poput , , i Prenose značenje i strukturu i preglednicima i pomoćnim tehnologijama. Poboljšavaju pristupačnost boljom navigacijom orijentirima, pomažu tražilicama da razumiju hijerarhiju sadržaja i olakšavaju održavanje koda. Nesemantički elementi poput i ne pružaju inherentno značenje te ih je najbolje rezervirati za slučajeve kada ne postoji odgovarajući semantički element. Prvo dajem prioritet semantičkim elementima, a zatim ih nadopunjujem klasama ili ARIA atributima samo kada je to potrebno.”

2) Kako biste složeni obrazac učinili pristupačnim i jednostavnim za korištenje koristeći obični HTML?

Što ispitivač traži: Savladavanje izvornih kontrola obrazaca, oznaka, ograničenja i atributa pristupačnosti.

Primjer odgovora:

„Počinjem s odgovarajućim asocijacijama, koristim odgovarajuće type atributi kao što su email, teli date, i dodajte required, mini pattern za validaciju ograničenja. Grupiram povezana polja s i Koristim aria-describedby povezati ulaze s pomoćnim tekstom i porukama o pogreškama, pružiti jasne placeholder tekst bez zamjene oznaka i omogući autocomplete žetoni poput given-name i address-line1Oslanjam se na izvorne poruke za validaciju, ali ih nadopunjujem pristupačnim sažecima pogrešaka koji se fokusiraju na prvo nevažeće polje.

3) Objasnite kako biste isporučili responzivne slike s optimalnim performansama.

Što ispitivač traži: Praktična upotreba , sizesi .

Primjer odgovora:

"Korostim s srcset pružiti više rezolucija i sizes atribut koji odražava stvarnu iscrtanu širinu izgleda. Za umjetnički smjer, omotavam slike u s medijski uvjetovanim elementi. Uvijek uključujem intrinzične width i height kako bi se rezervirao prostor i smanjio pomak rasporeda, i smatram loading="lazy" za slike ispod pregiba. Gdje je to prikladno, poslužujem moderne formate poput AVIF-a ili WebP-a s rezervnim opcijama.

4) Naslijeđena stranica koristi tablice za raspored i nije pristupačna. Kako pristupate njenom refaktoriranju?

Što ispitivač traži: Strategija migracije, upravljanje rizicima i testiranje.

Primjer odgovora (koristi obaveznu frazu #1):

„U svojoj prethodnoj ulozi zamijenio sam strukture temeljene na tablicama semantičkim kontejnerima kao što su , , i CSS Grid za raspored. Migrirao sam u slojevima kako bih smanjio rizik, mapirajući svako područje tablice na semantičke odjeljke i validirajući pomoću HTML validatora i aXe-a. Dodao sam odgovarajuće razine naslova, orijentire i redoslijed fokusa tipkovnice. Provjerio sam paritet vizualnim regresijskim testovima i poboljšao performanse uklanjanjem slika razmaka i zastarjelih atributa.

5) Kako defer i async na differ, and why should HTML authors care?

Što ispitivač traži: Razumijevanje ponašanja pri renderiranju i blokiranju.

Primjer odgovora:

"async preuzima i izvršava skriptu čim postane dostupna, što može uzrokovati izvršavanje izvan redoslijeda. defer preuzimanja tijekom parsiranja, ali jamči izvršenje nakon što je HTML parsiran, redom. Autori HTML-a trebali bi biti zabrinuti jer blokirajuće skripte odgađaju prvo renderiranje. Zadano je defer za skripte stranica koje ovise o spremnosti DOM-a i rezerviraju async za neovisne skripte poput analitike.”

6) Opišite situaciju u kojoj ste pronašli ravnotežu između zahtjeva za savršenim dizajnom piksela i semantičkog, pristupačnog HTML-a.

Što ispitivač traži: Suradnja, komunikacija i principijelni kompromisi.

Primjer odgovora (koristi obaveznu frazu #2):

„Na prethodnoj poziciji, dizajn je zahtijevao ugniježđene dekorativne omotače koji su poticali nesemantičko označavanje. Prvo sam predložio semantičku strukturu, a zatim postigao vizualne rezultate CSS-om umjesto dodatnim…“ elementi. Demonstrirao sam poboljšanja navigacije čitača zaslona i dokumentirao dogovoreni API komponente. Kompromis je zadržao željeni izgled uz očuvanje pristupačnosti i održivosti.

7) Otkrivate kumulativno pomicanje izgleda zbog slika i iframeova bez dimenzija. Koji je vaš plan?

Što ispitivač traži: Praktična rješenja za stvarne probleme s performansama.

Primjer odgovora (koristi obaveznu frazu #3):

„Na prethodnom poslu sam revidirao sve i elementi i dodani intrinzični width i height atributi koji odgovaraju omjeru slike izvora. Koristio sam CSS max-width: 100% responzivno skalirati i, kada je bio uključen dinamički sadržaj, primijenio sam CSS aspect-ratio rezervirana mjesta za svojstva ili kontejnere. Potvrdio sam poboljšanja u ploči Performance i Lighthouseu, potvrđujući smanjeno pomicanje rasporeda.

8) Koje su najbolje prakse za pisanje pristupačnih HTML tablica?

Što ispitivač traži: Ispravno strukturno označavanje i pomoćna tehnička podrška.

Primjer odgovora:

"Korostim za sažet naslov, , i za strukturu i za definiranje zaglavlja. Za složene tablice s višerazinskim zaglavljima koristim headers i id atribute za mapiranje ćelija. Izbjegavam korištenje tablica za raspored, osiguravam dovoljan kontrast teksta za sadržaj unutar ćelija i po potrebi pružam sažetke izvan tablice za kontekst.”

9) Kako se nosite s kratkim rokovima kada se više HTML isporučenih dokumenata natječe za pažnju?

Što ispitivač traži: Prioritizacija, komunikacija i kvaliteta pod pritiskom.

Primjer odgovora (koristi obaveznu frazu #4):

„U svojoj posljednjoj ulozi, trijažirao sam zadatke prema utjecaju na korisnike i lancima ovisnosti. Prvo sam isporučivao stranice s najvećim utjecajem i najmanjim rizikom, komunicirao kompromise sa zainteresiranim stranama i uspostavio definiciju dovršenog koja je uključivala validaciju, provjere pristupačnosti i osnovne proračune za performanse. Dokumentirao sam sva odgođena poboljšanja i zakazane naknadne ispravke kako bih osigurao da se kvaliteta ne pogorša.“

10) Jednostranična marketinška stranica mora biti SEO optimizirana bez JavaOslanjanje na skripte. Koje HTML strategije primjenjujete?

Što ispitivač traži: Mogućnost slanja sadržaja prilagođenog pretraživanju i otpornog na promjene.

Primjer odgovora:

„Osiguravam da je primarni sadržaj prikazan u HTML-u, a ne ubrizgan od strane JavaSkripta. Koristim logičku hijerarhiju naslova, opisnu i <meta name=”description”>, kanonske URL-ove i semantičke odjeljke. Označavam sadržaj odgovarajućim mikropodacima ili JSON-LD-om gdje je potrebno, osiguravam smisleno interno povezivanje i dodajem društvene meta oznake za preglede. Valjam strukturu dokumenta i potvrđujem mogućnost indeksiranja statičkom mapom web-mjesta.

Sažmite ovu objavu uz: