Top 50 de întrebări și răspunsuri la interviu HTML (2026)

Te pregătești pentru un interviu HTML? Gândește-te cu atenție la întrebările pe care le-ai putea întâlni. Aceste interviuri sunt importante deoarece dezvăluie profunzime tehnică, abordări de rezolvare a problemelor și aplicarea practică a conceptelor esențiale de dezvoltare web.

Oportunitățile în rolurile HTML se întind în diverse domenii, de la absolvenți până la profesioniști seniori cu 5 sau 10 ani de experiență în domeniu. Angajatorii evaluează expertiza tehnică, expertiza în domeniu și abilitățile de analiză prin întrebări și răspunsuri. Experiența profesională solidă, experiența la nivel de bază și un set versatil de competențe îi ajută pe candidați să depășească provocările de bază, avansate și tehnice.

Analiza noastră se bazează pe feedback-ul oferit de peste 60 de lideri tehnici, pe perspectivele a peste 45 de manageri și pe discuțiile cu peste 100 de profesioniști. Împreună, aceste perspective evidențiază așteptări diverse și nevoile în continuă evoluție ale industriei.

Întrebări și răspunsuri importante pentru interviuri HTML

1) Ce este HTML și de ce este considerat coloana vertebrală a dezvoltării web?

Limbajul de marcare hipertext (HTML) este limbajul fundamental al webului, conceput pentru a structura documentele și a oferi sens conținutului web. Acesta definește elemente precum titluri, paragrafe, linkuri, imagini și multimedia, permițând browserelor să le interpreteze și să le redea. Motivul pentru care este numit coloana vertebrală a dezvoltării web este că fiecare pagină web, indiferent de complexitate, folosește HTML pentru a-și defini aspectul și conținutul. Fără HTML, tehnologii precum CSS și JavaScriptul nu ar avea o bază pentru a fi stilizat sau manipulat.

👉 Descărcare gratuită PDF: Întrebări de interviu HTML

2) Explicați diferența dintre HTML și HTML5 cu exemple.

HTML este limbajul standard de marcare, în timp ce HTML5 este versiunea sa modernă, mai puternică, introdusă în 2014. HTML5 a adus elemente semantice, suport multimedia și API-uri care au eliminat necesitatea pluginurilor terțe, cum ar fi Flash.

Caracteristică	HTML	HTML5
Doctype	Lung și complex	Simplu:
Multimedia	Necesită pluginuri	,
Grafică	Nu este acceptat nativ	,
Formulare	Intrări limitate	Noi intrări, cum ar fi `email`, `date`
Etichete semantice	S-a bazat pe	, ,

Exemplu:

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

3) Cum este organizată structura de bază a unui document HTML?

Fiecare document HTML urmează o structură definită pentru a se asigura că browserele interpretează corect conținutul. În partea de sus se află declarație care specifică utilizarea HTML5. elementul cuprinde întregul conținut, împărțit în şi Cel/Cea/Cei/Cele conține metadate, titlu, linkuri către CSS și scripturi, în timp ce afișează conținutul vizibil. De exemplu:

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

4) Ce sunt etichetele și elementele în HTML? Dați exemple.

Etichetele sunt cuvinte cheie cuprinse între paranteze unghiulare care instruiesc browserul cu privire la modul de afișare a conținutului. Un element, însă, se referă la structura completă formată din eticheta de deschidere, conținut și eticheta de închidere. De exemplu:

Etichetă: şi
Element: Acesta este un paragraf

Unele elemente se închid automat, cum ar fi şi , adică nu necesită etichete de închidere.

5) Ce tipuri de liste sunt acceptate în HTML și unde sunt utilizate?

HTML este compatibil trei tipuri principale de liste:

Listă ordonată ( ) – elementele apar cu cifre sau litere.
Listă neordonată ( ) – elementele apar cu marcatori.
DescriptListă de ioni ( ) – utilizat pentru termeni și definițiile acestora.

Exemplu:

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

Listele sunt frecvent utilizate pentru meniurile de navigare, organizarea conținutului și termenii din glosar.

6) Cum sunt utilizate atributele în HTML și care sunt exemplele comune?

Atributele oferă informații suplimentare elementelor HTML. Acestea sunt întotdeauna specificate în eticheta de deschidere și urmează o pereche nume-valoare. Exemple comune includ:

src în pentru locația imaginii.
href pentru destinația hyperlinkului.
id și class pentru stilizare și JavaDirecționarea scriptului.
alt în imagini pentru accesibilitate.

De exemplu:

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

7) Ce sunt elementele HTML semantice și ce beneficii oferă acestea?

Elementele semantice își descriu clar semnificația atât pentru dezvoltatori, cât și pentru browsere. Exemplele includ , , , și .

Beneficii:

Îmbunătățiți accesibilitatea pentru cititoarele de ecran.
Oferiți motoarelor de căutare un sens mai clar al conținutului (SEO).
Îmbunătățiți lizibilitatea și mentenabilitatea codului.

Exemplu:

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

8) Explicați diferența dintre elementele la nivel de bloc și cele inline cu exemple.

Elemente la nivel de bloc, cum ar fi , și , ocupă întreaga lățime a containerului lor și încep pe o linie nouă. Elementele inline, cum ar fi , , și , ocupă doar lățimea necesară conținutului lor.

Tip	Exemple	caracteristici
La nivel de bloc	,	Începeți pe o linie nouă, lățime completă
In linie	,	Flux în text, lățimea depinde de conținut

9) Cum se creează hyperlinkurile și care este diferența dintre absolut și relativ URLs?

Hyperlinkurile sunt create folosind eticheta cu href atribut.

Absolut URL: Conține calea completă, inclusiv protocolul și domeniul.
Exemplu: <a href="https://example.com/page.html">Visit</a>
Relativ URL: Se referă la un fișier relativ la pagina curentă.
Exemplu: <a href="/ro/about.html">About Us</a>

Absolut URLs sunt preferate atunci când se fac legături către resurse externe, în timp ce s-urile relative URLsunt eficiente în cadrul aceluiași site web.

10) Care este rolul eticheta și atributele acesteia?

Cel/Cea/Cei/Cele eticheta este utilizată pentru a colecta datele introduse de utilizator și a le trimite către un server. Cele două atribute cele mai importante ale sale sunt:

acțiune – definește unde vor fi trimise datele.
metodă – specifică metoda HTTP ( GET or POST ).

Exemplu:

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

11) Care sunt diferitele tipuri de câmpuri de introducere disponibile în formularele HTML5?

HTML5 a introdus noi tipuri de introducere de date pentru a îmbunătăți utilizabilitatea și a reduce dependența de JavaValidarea scriptului. Printre tipurile comune se numără:

Bazat pe text: text, parolă, e-mail, url, căutare, tel.
Pe bază de dată și oră: dată, dată-oră-locală, lună, săptămână, oră.
Numeric: număr, interval.
Boolean: casetă de selectare, radio.
Fișier și culoare: fișier, culoare.

Exemplu:

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

Aceste tipuri de date de intrare permit browserelor să prezinte controale optimizate pentru interfața utilizatorului, cum ar fi calendare pentru date sau selectoare de culori, îmbunătățind experiența utilizatorului și reducând erorile de formular.

12) Cum funcționează etichetele semantice HTML5, cum ar fi , , și diferă în ceea ce privește utilizarea?

Etichetele semantice au fost introduse pentru a înlocui etichetele generice elemente și oferă sens structurii paginii.

Etichetă	Scop	Exemplu
	Secțiunea superioară, adesea cu logo-uri/navigare	Navigarea pe site
	Secțiunea de jos, drepturi de autor sau linkuri	Subsolul paginii
	Grup logicping de conținut relevant	Secțiunea blog
	Conținut independent care poate funcționa de sine stătător	Articol de stiri

Exemplu:

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

Utilizarea acestor elemente îmbunătățește SEO și accesibilitatea.

13) Explicați diferența dintre CSS-ul inline, CSS-ul intern și CSS-ul extern.

Există trei modalități principale de a aplica CSS în HTML:

CSS în linie: Aplicat direct pe elemente folosind style atribut.
Exemplu: <p style="color:red;">Text</p>
CSS intern: Declarat în termen de tags in the .
CSS extern: Legat printr-un .css fișier folosind .

Metodă	Avantaje	Dezavantaje
In linie	Rapid, specific	Greu de întreținut, fără reutilizare
Intern	Bun pentru o singură pagină	Nu este reutilizabil pe mai multe pagini
Extern	Reutilizabil, curat	Necesită încărcare suplimentară a fișierelor

Cea mai bună practică este de a utiliza CSS extern pentru mentenabilitate.

14) Ce sunt entitățile HTML și de ce sunt folosite?

Entitățile HTML sunt coduri speciale folosite pentru a reprezenta caractere rezervate, simboluri sau caractere invizibile în documentele HTML. Acestea asigură afișarea corectă a caracterelor precum <, > și &, în loc să fie interpretate ca și cod.

Exemple de entități comune:

< →
> → >
& → &
© → ©
→ spațiu neîntrerupător

De exemplu:

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

Entitățile sunt cruciale pentru păstrarea lizibilității codului și prevenirea problemelor de randare.

15) Cum elementele funcționează și care sunt avantajele și dezavantajele lor?

Cel/Cea/Cei/Cele Eticheta permite încorporarea unei pagini HTML în interiorul alteia. Este adesea folosită pentru încorporarea de videoclipuri, hărți sau widget-uri externe.

avantaje:

Integrare ușoară a conținutului extern, cum ar fi YouTube or Google Hărți.
Separarea conținutului de pagina principală.

Dezavantaje:

Performanță de încărcare mai lentă din cauza solicitărilor suplimentare.
Riscuri de securitate (clickjacking, cross-site scripting).
Nu este întotdeauna prietenos cu SEO.

Exemplu:

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

Alternativele moderne recomandă adesea API-uri sau metode de încorporare cu un control și o securitate mai bune.

16) Ce sunt metaetichetele în HTML și cum influențează acestea SEO?

Metaetichetele sunt fragmente de informații plasate în interiorul secțiune a unui document HTML. Acestea oferă metadate despre pagină, dar nu sunt afișate utilizatorilor.

Tipuri cheie de metaetichete:

Description:
Cuvinte cheie (depreciate):
Vizualizare (design responsiv):
Set de caractere:

Motoarele de căutare folosesc meta descrieri pentru a genera fragmente în rezultatele căutării, ceea ce influențează direct rata de clic (CTR).

17) Care este diferența dintre căile absolute, relative și relative la rădăcină în linkurile HTML?

Legăturile pot fi scrise în trei moduri diferite, în funcție de referințele căii.

Tip	Exemplu	Utilizare caz
Absolut	https://example.com/images/pic.jpg	Resurse externe
Relativ	imagini/pic.jpg	Același director sau subdirector
Relativ la rădăcină	/assets/images/pic.jpg	De la rădăcina domeniului

Căile absolute garantează recuperarea resurselor, dar reduc portabilitatea. Căile relative facilitează mutarea conținutului, în timp ce căile relative la rădăcină asigură consecvența în cadrul site-urilor mari.

18) Cum funcționează API-urile HTML5, cum ar fi Geolocația, Stocarea Web și Canvaîmbunătățesc funcționalitatea?

HTML5 a introdus API-uri care extind capacitățile aplicațiilor web fără a necesita plugin-uri.

API-ul de geolocalizare: Preia locația utilizatorului (cu permisiune).
API-ul de stocare web: Oferă localStorage și sessionStorage pentru stocarea datelor cheie-valoare de până la 10 MB.
CanvaAPI-ul: Permite desenarea de forme, imagini și animații direct pe o pagină web.

Exemplu: Stocare locală

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

Aceste API-uri îmbunătățesc interactivitatea și performanța în aplicațiile moderne.

19) Explicați avantajele și dezavantajele utilizării element pentru designul machetei.

Tabelele erau folosite odată pentru machetarea paginilor, dar acum sunt descurajate.

avantaje:

Oferă structură pentru datele tabelare.
Acceptat în toate browserele.

Dezavantaje:

Accesibilitate redusă pentru cititoarele de ecran în caz de utilizare greșită.
Încetinește randarea paginii.
Mai greu de întreținut în comparație cu sistemele de layout CSS precum Flexbox și Grid.

Cea mai buna practica: Utilizare strict pentru date tabelare (de exemplu, programe, comparații de produse) și CSS pentru aspect.

20) Pot fi aplicate mai multe clase CSS unui singur element HTML? Cum se realizează acest lucru?

Da, HTML permite aplicarea mai multor clase CSS unui singur element, separându-le cu spații. class atribut. Această tehnică permite stiluri modulare, reutilizabile și evită duplicarea.

Exemplu:

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

Aici, elementul moștenește stiluri de la toate cele trei clase. Această abordare acceptă compozabilitatea, făcând designurile mai scalabile și mai ușor de întreținut.

21) Care este diferența dintre și în HTML?

Ambele și sunt containere generice, dar servesc unor scopuri diferite.

este un element la nivel de bloc folosit pentru a grupa secțiuni mai mari de conținut sau structuri de layout.
este un element în linie folosit pentru stilizare sau grupareping mici fragmente de text.

Caracteristică
Afişa	La nivel de bloc	In linie
Folosire	Aspect, containere	Evidențierea textului
Exemplu	Wrapping secțiuni	Stilizarea cuvintelor

Exemplu:

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

22) Cum funcționează lucrul cu elementele și unde este folosit?

Cel/Cea/Cei/Cele Elementul din HTML5 oferă o suprafață de desen dependentă de rezoluție, bazată pe bitmap. Este utilizat pentru randarea graficii, animațiilor, diagramelor și chiar a jocurilor simple direct în browser. JavaAPI-uri de scripturi, cum ar fi getContext("2d") permite dezvoltatorilor să deseneze forme, căi, imagini și text.

Exemplu:

<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>

Cazurile de utilizare includ tablouri de bord, vizualizări în timp real și animații interactive.

23) Explicați diferența dintre `id` și `class` atribute în HTML.

Ambele id și class sunt atribute folosite pentru stilizare și JavaDirecționarea scripturilor, dar diferă prin unicitate și aplicație.

Atribut	caracteristici	Exemplu
id	Trebuie să fie unic într-un document; utilizat pentru un singur element.
clasă	Poate fi aplicat la mai multe elemente; permite grupareaping.

Exemplu de utilizare:

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

Cea mai bună practică: Utilizați id pentru identificatori unici și class pentru grupuri de stilizare reutilizabile.

24) Ce sunt atributele data-* în HTML5 și care sunt beneficiile lor?

data-* atributele permit dezvoltatorilor să stocheze date personalizate direct în elementele HTML. Aceste atribute au prefixul data- urmate de un nume, ceea ce le face accesibile prin JavaScenariul.

Beneficii:

Permite stocarea ușoară a metadatelor fără a afecta DOM-ul.
Util pentru aplicații dinamice, tooltip-uri sau procesare pe partea de client.

Exemplu:

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

Această caracteristică promovează flexibilitatea în gestionarea stării și a comportamentelor dinamice.

25) Cum se asigură accesibilitatea în HTML folosind roluri și atribute ARIA?

Accesibilitatea în HTML asigură utilizarea aplicațiilor web de către persoanele cu dizabilități. Rolurile și atributele ARIA (Aplicații Internet Rich Accesibile) oferă context suplimentar tehnologiilor de asistență.

Exemple de atribute ARIA:

role="navigation" – definește meniurile de navigare.
aria-label=”Închide” – oferă etichete descriptive.
aria-hidden=”true” – ascunde elementele de cititoarele de ecran.

Exemplu:

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

Prin combinarea HTML-ului semantic cu atributele ARIA, dezvoltatorii îmbunătățesc incluziunea și respectă standardele de accesibilitate precum WCAG.

26) Care este diferența dintre elementele inline, block și inline-block?

Elementele HTML sunt clasificate în funcție de comportamentul lor de afișare.

Tip	caracteristici	Exemple
In linie	Nu începeți pe o linie nouă; doar la lățimea conținutului.	,
Bloca	Ocupă întreaga lățime, începând de la o linie nouă.	,
Bloc în linie	Se comportă ca inline, dar permite proprietăți de bloc (înălțime, lățime).	, stilizat

Exemplu:

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

27) Cum optimizezi imaginile în HTML pentru o performanță mai bună?

Optimizarea imaginilor reduce timpii de încărcare a paginilor și îmbunătățește SEO. Strategiile includ:

Folosind formate moderne precum WebP or AVIF.
Aplicarea imaginilor responsive cu şi srcset.
Setarea atributelor de lățime și înălțime pentru a evita modificările de aspect.
Comprimarea imaginilor înainte de încărcare.
Încărcare întârziată folosind loading="lazy".

Exemplu:

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

Imaginile bine optimizate îmbunătățesc experiența utilizatorului și scorurile Core Web Vitals.

28) Care este ciclul de viață al unei pagini HTML în browser?

Ciclul de viață al unei pagini HTML implică mai mulți pași:

Analizare: Browserul citește cod HTML și construiește modelul de obiecte al documentului (DOM).
Încărcarea resurselor: Sunt preluate CSS-ul, JS-ul și imaginile legate.
De redare: Browserul aplică elemente de stiluri și layout-uri.
Scriptare: JavaScriptul execută și manipulează DOM-ul, dacă este necesar.
Interacţiune: Evenimente precum clicurile și derulările sunt procesate.

Înțelegerea acestui ciclu de viață îi ajută pe dezvoltatori să optimizeze viteză de randare, reduceți la minimum scripturile de blocare și asigurați încărcarea eficientă a paginii.

29) Care sunt avantajele și dezavantajele utilizării HTML-ului semantic?

HTML-ul semantic îmbunătățește sensul și accesibilitatea paginilor web, dar are și anumite considerații.

Avantaje	Dezavantaje
Îmbunătățește accesibilitatea pentru cititoarele de ecran.	Necesită învățarea unor noi etichete.
Îmbunătățește SEO prin clarificarea structurii.	Poate crește timpul inițial de dezvoltare.
Lizibilitate și mentenanță mai ușoară a codului.	Browserele mai vechi pot avea suport limitat.

Per total, avantajele depășesc dezavantajele, ceea ce face ca HTML-ul semantic să fie o practică recomandată în dezvoltarea modernă.

30) Cum este element folosit pentru imagini responsive?

Cel/Cea/Cei/Cele elementul permite dezvoltatorilor să ofere mai multe surse de imagine pentru diferite dispozitive sau rezoluții de ecran. Folosește elemente imbricate elemente cu atribute precum media și type.

Exemplu:

<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>

Acest lucru asigură că dispozitivele mobile încarcă imagini mai mici, în timp ce desktopurile primesc imagini de înaltă rezoluție, îmbunătățind performanță și reacție rapidă.

31) Care sunt diferitele modalități de a încorpora audio în HTML5?

HTML5 oferă element, eliminând necesitatea pluginurilor externe. Acceptă mai multe formate precum MP3, OGG și WAV pentru a asigura compatibilitatea între browsere. Dezvoltatorii pot specifica mai multe surse în cadrul element, permițând browserului să aleagă primul format acceptat.

Exemplu:

<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>

Beneficiile includ controale native, redare automată, toaletăpingși accesibilitate cu subtitrări prin intermediultrack>.

32) Cum funcționează lucrul cu etichetele și care sunt avantajele sale?

Cel/Cea/Cei/Cele Elementul permite încorporarea videoclipurilor fără playere terțe. Formatele acceptate includ MP4 (H.264), WebM și Ogg. Dezvoltatorii pot adăuga mai multe surse și atribute, cum ar fi controls, autoplay, loop și poster.

Exemplu:

<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>

avantaje:

Elimină dependența de Flash.
Oferă accesibilitate încorporată cu subtitrări.
Oferă performanță și securitate mai bune.

33) Care sunt avantajele și dezavantajele utilizării formularelor HTML?

Formularele sunt esențiale pentru introducerea datelor de către utilizator, dar au puncte forte și puncte slabe.

Avantaje	Dezavantaje
Standardizat, compatibil cu toate browserele.	Vulnerabil la riscuri de securitate (de exemplu, XSS, CSRF).
Integrare ușoară cu serverele backend.	Formularele prost concepute reduc utilizabilitatea.
Acceptă validarea și mai multe tipuri de intrare.	Necesită HTTPS pentru gestionarea securizată a datelor.

Cea mai bună practică: Folosiți etichete semantice de formular, validare pe partea de client și server și metode de transmitere securizate.

34) Cum diferă validarea formularului pe partea clientului de validarea pe partea serverului?

Validare pe partea clientului se execută în browser folosind atribute HTML5 ( required, pattern ) Sau JavaScript. Oferă feedback imediat, dar poate fi ocolit.

Validare pe partea de server are loc după ce datele sunt trimise către server, asigurând securitatea și corectitudinea.

Aspect	Partea client	Partea de server
Viteză	Feedback imediat	Mai lent, după trimitere
Securitate	Poate fi ocolit	Mai sigur
Exemplu		Validare PHP, Node.js

Cea mai bună practică este combinarea ambelor metode pentru o utilizare și o securitate optime.

35) Care este scopul `viewport` metaetichetă în designul responsiv?

viewport Metaeticheta asigură redarea corectă a paginilor web pe dispozitivele mobile. În mod implicit, multe browsere mobile reduc dimensiunea paginilor de pe desktop. Eticheta viewport permite controlul asupra scalării și lățimii.

Exemplu:

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

Beneficii:

Asigură layout-uri responsive.
Previne problemele de zoom.
Îmbunătățește informațiile esențiale despre Web Vitals și ușurința în utilizare pe ecrane mici.

Fără aceasta, site-urile web pot părea minuscule și inutilizabile pe dispozitivele mobile.

36) Cum şi Elementele îmbunătățesc aplicațiile HTML5?

: Oferă o modalitate nativă de a crea ferestre pop-up modale. Poate fi deschisă sau închisă prin JavaScript ( show() și close() ).

: Definește fragmente HTML reutilizabile care nu sunt redate până la activarea de către JavaScenariul.

Exemplu:

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

Beneficii:

elimină dependența de bibliotecile modale externe.
permite randarea dinamică fără a aglomera DOM-ul.

37) Explicați diferențele dintre , , and .

Scripturile pot bloca randarea paginilor dacă nu sunt gestionate corespunzător.

Atribut	Comportament	Utilizare caz
	Blochează analizarea HTML până la finalizarea execuției.	Scripturi mici în linie
	Se încarcă asincron, se execută imediat ce este gata.	Analiză, reclame
	Se încarcă asincron, se execută după analizarea HTML.	Scripturi dependente de DOM

Exemplu:

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

Utilizarea async și defer îmbunătățește performanța și previne problemele de blocare a randării.

38) Cum puteți asigura gestionarea securizată a formularelor în HTML?

Securitatea formularelor necesită atât practici HTML, cât și măsuri de protecție backend.

Practicile cheie includ:

Folosește întotdeauna HTTPS pentru transmiterea datelor.
Validați intrările atât din partea clientului, cât și din partea serverului.
Folosește autocomplete="off" atribut pentru câmpuri sensibile precum parolele.
Aplică rel="noopener noreferrer" asupra acțiunilor externe ale formularului.
Preveniți falsificarea cererilor între site-uri (CSRF) cu ajutorul token-urilor.

Exemplu:

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

Formularele securizate protejează împotriva scurgerilor de date și a vulnerabilităților comune.

39) Care este diferența dintre cookie-uri, localStorage și sessionStorage în HTML5?

HTML5 a introdus stocarea web ca alternativă la cookie-uri.

Tip de stocare	Capacitate	Toată viața	Trimis cu HTTP?
Cookies	~4KB	Până la data expirării	Da
LocalStorage	~5–10 MB	Persistent până la eliminare	Nu
sesiuneStorage	~5 MB	Până la închiderea browserului/filei	Nu

Exemplu:

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

Stocarea web îmbunătățește performanța deoarece datele nu sunt trimise odată cu fiecare solicitare HTTP.

40) Cum gestionează HTML accesibilitatea imaginilor, formularelor și a conținutului multimedia?

Accesibilitatea asigură incluziunea utilizatorilor cu dizabilități.

Imagini: Utilizare alt atribute pentru cititoarele de ecran.
Formulare: Adăugați legat cu for atribute pentru a descrie intrările.
Multimedia: Furnizați subtitrări (track> pentru videoclipuri) și transcrieri.

Exemplu:

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

Respectarea standardelor de accesibilitate (WCAG, ARIA) face aplicațiile web mai ușor de utilizat și conforme cu legislația.

41) Care sunt beneficiile utilizăriitracElement k> cu multimedia?

ThetracElementul k> este utilizat în cadrul sau a furniza text tracks, cum ar fi subtitrări, legende sau descrieri. Acest lucru îmbunătățește accesibilitatea și ușurința în utilizare.

Beneficii:

Ajută utilizatorii cu deficiențe de auz.
Îmbunătățește SEO deoarece textul este accesabil cu crawlere.
Îmbunătățește experiența utilizatorului în medii zgomotoase.

Exemplu:

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

Acest lucru asigură accesibilitatea conținutului multimedia unui public mai larg.

42) Cum funcționează `contenteditable` Funcția atributelor în HTML?

contenteditable Atributul permite utilizatorilor să editeze conținutul unui element direct în browser, fără instrumente externe.

Exemplu:

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

Cazuri de utilizare:

Editori în browser.
Aplicații de luare de notițe sau aplicații de tip CMS.
Prototyping funcții interactive.

Deși util, trebuie gestionat cu grijă, deoarece modificările necontrolate pot introduce riscuri de securitate atunci când datele sunt trimise către servere.

43) Care este diferența dintre îmbunătățirea progresivă și degradarea grațioasă în designul HTML?

Acestea sunt două abordări pentru gestionarea diferitelor capabilități ale browserului.

Abordarea	Concept	Exemplu
Îmbunătățire progresivă	Începeți cu HTML de bază și adăugați funcții avansate pentru browserele compatibile.	Un formular funcționează cu HTML de bază, dar folosește JavaValidarea scriptului, dacă este disponibilă.
Degradare grațioasă	Construiți mai întâi funcții avansate și asigurați o soluție de rezervă pentru browserele mai vechi.	O diagramă bazată pe pânză se bazează pe o imagine statică.

Îmbunătățirea progresivă este strategia preferată astăzi, deoarece asigură accesul universal.

44) Ce sunt microdatele în HTML5 și cum sunt utile pentru SEO?

Microdatele reprezintă o modalitate de a încorpora date structurate în elemente HTML folosind atribute precum itemscope, itemtype și itempropMotoarele de căutare folosesc acest lucru pentru a oferi rezultate cu fragmente bogate în text.

Exemplu:

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

Beneficii:

Îmbunătățește vizibilitatea cu ajutorul unor fragmente bogate.
Oferă context motoarelor de căutare.
Îmbunătățește CTR-ul în rezultatele căutării.

45) Care sunt avantajele și dezavantajele utilizării cadrelor inline ( )?

Am atins subiectul mai devreme, dar haideți să rezumăm avantajele vs. dezavantajele.

Avantaje	Dezavantaje
Integrare ușoară a conținutului de la terți.	Încetinește performanța paginii.
Menține resursele externe izolate.	Vulnerabil la deturnarea de clicuri.
Util pentru încorporarea hărților, videoclipurilor.	Nu este prietenos cu SEO, conținutul este adesea ignorat.

Cea mai bună practică este de a utiliza cu moderație și preferă API-uri sau embed-uri care permit personalizarea și integrarea securizată.

46) Cum folosești şi elemente în HTML5?

Aceste elemente creează secțiuni de conținut restrângibile fără JavaScenariul.

Exemplu:

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

Beneficii:

Îmbunătățește interacțiunea cu utilizatorul.
Îmbunătățește accesibilitatea (compatibil cu tastatura și cititorul de ecran).
Evită dependența de obiceiuri JavaSoluții de script.

Acest lucru este util în special pentru întrebări frecvente sau interfețe cu dezvăluire progresivă.

47) Care sunt principalele diferențe dintre HTML și XHTML?

HTML și XHTML (Extensible HTML) sunt limbaje de marcare, dar XHTML urmează reguli XML mai stricte.

Caracteristică	HTML	XHTML
Sintaxă	Instalare	Strict, compatibil cu XML
Închiderea etichetelor	Opțional	obligatoriu
Sensibil la majuscule	Nu ține cont de majuscule/minuscule	Trebuie să fie cu litere mici
Eroare de manipulare	Browserele sunt iertătoare	Erorile de analiză întrerup randarea

Exemplu: este valid în HTML, dar trebuie să fie în XHTML. Astăzi, HTML5 a înlocuit în mare măsură XHTML datorită flexibilității sale.

48) Care sunt diferitele tipuri de doctype în HTML și de ce sunt importante?

Doctype-ul îi spune browserului ce versiune de HTML să utilizeze.

tipuri:

HTML5: (simplu, modern).
HTML 4.01 Strict/Tranzițional/Set de cadre.
XHTML 1.0 Strict/Tranzițional/Set de cadre.

Utilizarea tipului de document corect asigură o redare consistentă în toate browserele. Tipul de document HTML5 este acum standardul.

49) Cum îmbunătățești SEO cu etichete HTML precum , <meta> și <h1>?

SEO se bazează pe o structurare semantică adecvată.

: Definește titlul paginii, crucial pentru clasament.
: Oferă un fragment pentru motoarele de căutare.
Titluri ( – ): Organizați ierarhia conținutului.
atribute alt pe imagini: Îmbunătățiți vizibilitatea căutării de imagini.
Markup schema: Oferă date structurate.

Exemplu:

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

50) Care sunt diferențele dintre și în HTML?

Deși ambele folosesc href atribut, scopurile lor diferă.

Etichetă	Scop	Exemplu
	Creează hyperlinkuri pentru navigarea între pagini.	Click aici
	Definește relațiile cu resurse externe precum CSS sau pictograme.

Cel/Cea/Cei/Cele Elementul nu apare niciodată în corpul paginii, în timp ce creează text sau imagini pe care se poate face clic.

🔍 Întrebări de interviu HTML de top cu scenarii din lumea reală și răspunsuri strategice

1) Care este diferența dintre elementele HTML semantice și cele non-semantice și de ce contează?

Ce caută intervievatorul: Înțelegerea semanticii, accesibilității, SEO și mentenabilității.

Exemplu de răspuns:

„Elemente semantice precum , , și transmit sens și structură atât browserelor, cât și tehnologiilor de asistență. Acestea îmbunătățesc accesibilitatea printr-o navigare mai bună prin repere, ajută motoarele de căutare să înțeleagă ierarhia conținutului și fac codul mai ușor de întreținut. Elemente non-semantice precum „și nu oferă nicio semnificație inerentă și sunt cel mai bine rezervate pentru cazurile în care nu există un element semantic adecvat. Prioritizez mai întâi elementele semantice, apoi completez cu clase sau atribute ARIA doar atunci când este necesar.”

2) Cum ați face un formular complex accesibil și ușor de utilizat folosind HTML simplu?

Ce caută intervievatorul: Stăpânirea controalelor, etichetelor, constrângerilor și atributelor de accesibilitate ale formularelor native.

Exemplu de răspuns:

„Încep cu asociații adecvate, folosesc asocieri adecvate” type atribute precum email, tel și date, si adauga required, min și pattern pentru validarea constrângerilor. Grupez câmpuri corelate cu şi Eu folosesc aria-describedby pentru a lega intrările la textul de ajutor și mesajele de eroare, oferiți informații clare placeholder text fără a înlocui etichetele și activați autocomplete jetoane ca given-name și address-line1Mă bazez pe mesageria de validare nativă, dar o completez cu rezumate de erori accesibile care se concentrează pe primul câmp nevalid.

3) Explicați cum ați livra imagini responsive cu performanțe optime.

Ce caută intervievatorul: Utilizarea practică a , sizesși .

Exemplu de răspuns:

„Folosesc cu srcset pentru a oferi rezoluții multiple și o sizes atribut care reflectă lățimea reală randată a machetei. Pentru direcția artistică, încadrez imaginile în cu mediu condiționat elemente. Includ întotdeauna elemente intrinseci width și height pentru a rezerva spațiu și a reduce schimbările de aspect și consider loading="lazy" „pentru imaginile din partea inferioară a paginii. Unde este cazul, difuzez formate moderne precum AVIF sau WebP cu variante alternative.”

4) O pagină veche folosește tabele pentru aspect și nu este accesibilă. Cum abordați refactorizarea ei?

Ce caută intervievatorul: Strategia de migrare, managementul riscurilor și testare.

Exemplu de răspuns (folosește sintagma obligatorie nr. 1):

„În rolul meu anterior, am înlocuit structurile bazate pe tabele cu containere semantice precum , , și CSS Grid pentru layout. Am migrat în felii pentru a reduce riscul, hartăping „fiecare regiune a tabelului în secțiuni semantice și validarea cu un validator HTML și aXe. Am adăugat niveluri adecvate de titluri, repere și ordinea focalizării tastaturii. Am verificat paritatea cu teste de regresie vizuală și am îmbunătățit performanța prin eliminarea imaginilor distanțiere și a atributelor depreciate.”

5) Cum se face `defer` și `async` pe differ, and why should HTML authors care?

Ce caută intervievatorul: Înțelegerea comportamentului de randare și blocare.

Exemplu de răspuns:

async descarcă și execută un script imediat ce acesta este disponibil, ceea ce poate cauza execuția în afara ordinii. defer descărcări în timpul analizării, dar garantează execuția după analizarea HTML-ului, în ordine. Autorii HTML ar trebui să fie atenți, deoarece scripturile blocante întârzie prima redare. Implicit, setez defer pentru scripturi de pagină care depind de pregătirea și rezervarea DOM async pentru scripturi independente, cum ar fi cele analitice.”

6) Descrie o situație în care ai echilibrat solicitările de design perfecte la nivel de pixel cu HTML semantic și accesibil.

Ce caută intervievatorul: Colaborare, comunicare și compromisuri principiale.

Exemplu de răspuns (folosește sintagma obligatorie nr. 2):

„Într-o poziție anterioară, un design necesita încapsulare decorativă imbricată care încuraja marcajul non-semantic. Am propus mai întâi o structură semantică, apoi am obținut rezultatele vizuale cu CSS în loc de elemente suplimentare.” elemente. Am demonstrat îmbunătățiri ale navigării prin cititorul de ecran și am documentat API-ul componentelor convenite. Compromisul a menținut aspectul dorit, păstrând în același timp accesibilitatea și mentenabilitatea.

7) Descoperiți o modificare cumulativă a aspectului din cauza imaginilor și iframe-urilor fără dimensiuni. Care este planul dumneavoastră?

Ce caută intervievatorul: Soluții practice la probleme reale de performanță.

Exemplu de răspuns (folosește sintagma obligatorie nr. 3):

„La locul meu de muncă anterior, am auditat toate şi elemente și elemente intrinseci adăugate width și height atribute care corespund raportului de aspect al sursei. Am folosit CSS max-width: 100% pentru a scala receptiv și, când era implicat conținut dinamic, am aplicat CSS-ul aspect-ratio „substituenți de proprietăți sau containere. Am verificat îmbunătățirile din panoul Performanță și Lighthouse, confirmând reducerea schimbării aspectului.”

8) Care sunt cele mai bune practici pentru scrierea tabelelor HTML accesibile?

Ce caută intervievatorul: Marcare structurală corectă și asistență tehnică.

Exemplu de răspuns:

„Folosesc pentru un titlu concis, , și pentru structură și pentru a defini anteturi. Pentru tabele complexe cu anteturi pe mai multe niveluri, utilizez headers și id „atribute pentru a mapa celulele. Evit utilizarea tabelelor pentru aspect, asigur un contrast suficient al textului pentru conținutul din interiorul celulelor și ofer rezumate în afara tabelului pentru context, dacă este necesar.”

9) Cum gestionezi termenele limită strânse atunci când mai multe livrabile HTML concurează pentru atenție?

Ce caută intervievatorul: Prioritizare, comunicare și calitate sub presiune.

Exemplu de răspuns (folosește sintagma obligatorie nr. 4):

„În ultimul meu rol, am triat sarcinile în funcție de impactul asupra utilizatorilor și de lanțurile de dependențe. Am livrat mai întâi paginile cu cel mai mare impact și cel mai mic risc, am comunicat compromisurile părților interesate și am stabilit o definiție a ceea ce înseamnă „finalizat”, care includea validarea, verificările de accesibilitate și bugetele de performanță de bază. Am documentat orice îmbunătățiri amânate și am programat remedieri ulterioare pentru a mă asigura că nu se produce un regres al calității.”

10) Un site de marketing cu o singură pagină trebuie să fie optimizat pentru SEO, fără a JavaDependență de script. Ce strategii HTML aplicați?

Ce caută intervievatorul: Capacitatea de a livra conținut rezilient și ușor de căutat.

Exemplu de răspuns:

„Mă asigur că conținutul principal este redat în HTML, nu injectat de JavaScript. Folosesc o ierarhie logică a titlurilor, descriptivă și <meta name="description">, canonice URL„... și secțiuni semantice. Marchez conținutul cu microdate adecvate sau JSON-LD acolo unde este necesar, asigur linkuri interne semnificative și adaug metaetichete sociale pentru previzualizări. Validez structura documentului și confirm accesarea cu crawlere cu o hartă statică a site-ului.”

Întrebări și răspunsuri importante pentru interviuri HTML

1) Ce este HTML și de ce este considerat coloana vertebrală a dezvoltării web?

2) Explicați diferența dintre HTML și HTML5 cu exemple.

3) Cum este organizată structura de bază a unui document HTML?

4) Ce sunt etichetele și elementele în HTML? Dați exemple.

5) Ce tipuri de liste sunt acceptate în HTML și unde sunt utilizate?

6) Cum sunt utilizate atributele în HTML și care sunt exemplele comune?

7) Ce sunt elementele HTML semantice și ce beneficii oferă acestea?

8) Explicați diferența dintre elementele la nivel de bloc și cele inline cu exemple.

9) Cum se creează hyperlinkurile și care este diferența dintre absolut și relativ URLs?

10) Care este rolul eticheta și atributele acesteia?

ARTICOLE SIMILARE

11) Care sunt diferitele tipuri de câmpuri de introducere disponibile în formularele HTML5?

12) Cum funcționează etichetele semantice HTML5, cum ar fi , , și diferă în ceea ce privește utilizarea?

13) Explicați diferența dintre CSS-ul inline, CSS-ul intern și CSS-ul extern.

14) Ce sunt entitățile HTML și de ce sunt folosite?

15) Cum elementele funcționează și care sunt avantajele și dezavantajele lor?

16) Ce sunt metaetichetele în HTML și cum influențează acestea SEO?

17) Care este diferența dintre căile absolute, relative și relative la rădăcină în linkurile HTML?

18) Cum funcționează API-urile HTML5, cum ar fi Geolocația, Stocarea Web și Canvaîmbunătățesc funcționalitatea?

19) Explicați avantajele și dezavantajele utilizării element pentru designul machetei.

20) Pot fi aplicate mai multe clase CSS unui singur element HTML? Cum se realizează acest lucru?

21) Care este diferența dintre și în HTML?

22) Cum funcționează lucrul cu elementele și unde este folosit?

23) Explicați diferența dintre id și class atribute în HTML.

24) Ce sunt atributele data-* în HTML5 și care sunt beneficiile lor?

25) Cum se asigură accesibilitatea în HTML folosind roluri și atribute ARIA?

26) Care este diferența dintre elementele inline, block și inline-block?

27) Cum optimizezi imaginile în HTML pentru o performanță mai bună?

28) Care este ciclul de viață al unei pagini HTML în browser?

29) Care sunt avantajele și dezavantajele utilizării HTML-ului semantic?

30) Cum este element folosit pentru imagini responsive?

31) Care sunt diferitele modalități de a încorpora audio în HTML5?

32) Cum funcționează lucrul cu etichetele și care sunt avantajele sale?

33) Care sunt avantajele și dezavantajele utilizării formularelor HTML?

34) Cum diferă validarea formularului pe partea clientului de validarea pe partea serverului?

35) Care este scopul viewport metaetichetă în designul responsiv?

36) Cum şi Elementele îmbunătățesc aplicațiile HTML5?

37) Explicați diferențele dintre , , and .

38) Cum puteți asigura gestionarea securizată a formularelor în HTML?

39) Care este diferența dintre cookie-uri, localStorage și sessionStorage în HTML5?

40) Cum gestionează HTML accesibilitatea imaginilor, formularelor și a conținutului multimedia?

41) Care sunt beneficiile utilizăriitracElement k> cu multimedia?

42) Cum funcționează contenteditable Funcția atributelor în HTML?

43) Care este diferența dintre îmbunătățirea progresivă și degradarea grațioasă în designul HTML?

44) Ce sunt microdatele în HTML5 și cum sunt utile pentru SEO?

45) Care sunt avantajele și dezavantajele utilizării cadrelor inline ( )?

46) Cum folosești şi elemente în HTML5?

47) Care sunt principalele diferențe dintre HTML și XHTML?

48) Care sunt diferitele tipuri de doctype în HTML și de ce sunt importante?

49) Cum îmbunătățești SEO cu etichete HTML precum , <meta> și <h1>?

50) Care sunt diferențele dintre și în HTML?

🔍 Întrebări de interviu HTML de top cu scenarii din lumea reală și răspunsuri strategice

1) Care este diferența dintre elementele HTML semantice și cele non-semantice și de ce contează?

2) Cum ați face un formular complex accesibil și ușor de utilizat folosind HTML simplu?

3) Explicați cum ați livra imagini responsive cu performanțe optime.

4) O pagină veche folosește tabele pentru aspect și nu este accesibilă. Cum abordați refactorizarea ei?

5) Cum se face defer și async pe differ, and why should HTML authors care?

6) Descrie o situație în care ai echilibrat solicitările de design perfecte la nivel de pixel cu HTML semantic și accesibil.

7) Descoperiți o modificare cumulativă a aspectului din cauza imaginilor și iframe-urilor fără dimensiuni. Care este planul dumneavoastră?

8) Care sunt cele mai bune practici pentru scrierea tabelelor HTML accesibile?

9) Cum gestionezi termenele limită strânse atunci când mai multe livrabile HTML concurează pentru atenție?

10) Un site de marketing cu o singură pagină trebuie să fie optimizat pentru SEO, fără a JavaDependență de script. Ce strategii HTML aplicați?

Rezumați această postare cu:

Înscrieți-vă la newsletter

23) Explicați diferența dintre `id` și `class` atribute în HTML.

35) Care este scopul `viewport` metaetichetă în designul responsiv?

42) Cum funcționează `contenteditable` Funcția atributelor în HTML?

5) Cum se face `defer` și `async` pe differ, and why should HTML authors care?