15 Essential HTML Interview Questions asked at Proficed
Prepare for your Web Designer or Frontend Developer interview with these 15 essential HTML questions commonly asked at Proficed.
In this blog post, we will cover 15 common HTML interview questions asked at Proficed for roles like “Website Designer” and “Frontend Developer.” These questions are meant to test both fundamental knowledge and the ability to apply HTML concepts in real-world scenarios.
- What does the
titleattribute in HTML do (not the title tag)?
Ans.: It shows a tooltip for an element. - How do we allow a user to choose a file from their device and ensure the chosen file is of a specific type such as PDF?
Ans.: Using<input type="file" accept=".pdf" /> - What are the input types in HTML?
Ans.: There are a total of 22 input types in HTML. The candidate must be able to list at least 10 of them. Here’s the list of all input types in HTML in alphabetical order:button,checkbox,color,date,datetime-local,email,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week. - What is the difference between
<input type="button">and<button type="button">?
Ans.:<button type="button">is a container element, while<input type="button">is a self-closing element. There can be child elements of<button type="button">, but not<input type="button">. We can add icons, images, and text inside the<button type="button">. The text displayed on the<button type="button">can be different from its value attribute. But inside<input type="button">, we cannot add icons or images, and the text displayed on the button is the same as the value attribute of the element. - What is Server-Sent Event (SSE)? How is it different from AJAX?
Ans.: As the name suggests, SSE (Server-Sent Events) are updates sent by the server to the client in real time. Examples: push notifications, live score updates, stock price updates, etc. Differences between SSE and AJAX:
(1) SSE is one-way communication (unidirectional), meaning the server can push updates to the client without any request from the client. In contrast, AJAX allows two-way communication, where the client can both send requests to the server and receive responses.
(2) In AJAX, authentication tokens need to be sent by the client with every request. In SSE, a single connection is established, and authentication typically occurs when this connection is initiated. Once the connection is established, SSE does not require tokens to be sent with each update.
(3) With AJAX, the server only responds when the client sends a request. In SSE, the server continuously sends updates (events) to the client without any further requests from the client. - What is the use of the
<base>tag?
Ans.: The<base>tag is used to specify a base URL for all relative URLs in a document. For example, if placed inside the<head>section like<base href="https://example.com" target="_blank">, all relative URLs such as<a href="1.html">and<img src="1.jpg">will point tohttps://example.com/1.htmlandhttps://example.com/1.jpgrespectively. At the same time, the<base>tag won't affect absolute URLs such ashttps://another-example.com/1.jpgorhttps://another-example.com/1.html. - Which tags in HTML use the
hrefattribute? Explain their usage.
Ans.: The anchor tag<a>,<link>tag, and<base>tag use thehrefattribute. The<a>tag uses it to provide a hyperlink. The<link>tag uses it to define relationships between the current document and an external resource, where the relationship is defined by therelattribute, such asrel="stylesheet", and the external resource is linked byhref. The<base>tag uses it to denote the base URL for relative URLs in the document. - Which tag is most suitable in HTML to render a pie chart?
Ans.: To render a pie chart in HTML, the most suitable tag is the<canvas>tag. - How do you make an element draggable in HTML?
Ans.: To make an element draggable, you need to set thedraggableattribute totrueand handle drag events using JavaScript. - Follow-up question to the previous one: How do you make an element droppable?
Ans.: The interviewer may ask this question to trick you into saying that you need to set thedroppableattribute totruefor the element. However, there isn't adroppableattribute in HTML. Instead, the droppable behavior is achieved using event handling with JavaScript. - What are custom attributes in HTML? How can I access custom attributes of an element in JavaScript?
Ans.: Custom attributes in HTML are user-defined attributes that can be added to HTML elements to store extra information that isn’t covered by standard HTML attributes. Custom attributes are typically prefixed withdata-, followed by a name of your choice. You can access custom attributes using JavaScript via thedatasetproperty of an element. - Follow-up question to the previous one: AngularJS makes use of attributes that start with the
ng-prefix. Doesn't this make the HTML document invalid?
Ans.: According to the HTML specification, attributes that are not recognized as standard HTML attributes are simply ignored by the browser. Although HTML itself does not recognizeng-as a standard attribute prefix, AngularJS handles these custom attributes through its own processing and doesn't rely on the HTML parser to recognize them. Thus, using theng-prefix for AngularJS directives and attributes does not make the HTML invalid. - What is the difference between cookies and HTML storage?
Ans.: There are mainly five key differences:
(1) Size Limit: Cookies have a size limit of about 4 KB per cookie, and most browsers limit the number of cookies per domain. HTML Storage generally allows for larger storage capacity compared to cookies, typically around 5–10 MB per domain.
(2) Expiration: Cookies can have an expiration date set, after which they are automatically deleted. They can also be set as session cookies, which expire when the browser session ends. There are two types of web storage: Local Storage and Session Storage. With Local Storage, data persists even after the browser is closed and is only cleared explicitly by the user or through JavaScript. With Session Storage, data is only available for the duration of the page session. It is cleared when the page session ends (e.g., when the tab or browser is closed).
(3) Server Interaction: Cookies are automatically sent with every HTTP request to the domain that set them, which can increase network traffic. HTML Storage data is not sent with HTTP requests, reducing network traffic and improving performance.
(4) Accessibility: Cookies can be marked asSecure(only sent over HTTPS) andHttpOnly(not accessible via JavaScript), whereas HTML Storage data is always accessible via JavaScript.
(5) Use Cases: Cookies are suitable for session management, authentication tokens, and tracking. HTML Storage is suitable for client-side data storage that does not need to be sent to the server, such as user preferences or cached data. - What are Web Workers in HTML, and how are they different from the
setTimeoutfunction in JavaScript?
Ans.: (1) Threading: Web Workers allow multiple background operations different from the main thread. In contrast,setTimeout, though running in the background, runs in the main thread only.
(2) DOM Access: Web Workers cannot access the DOM, butsetTimeoutcan.
(3) Concurrency: Web Workers can be used to create multiple threads;setTimeoutcannot.
(4) Timers: Web Workers do not have built-in timer functions likesetTimeoutorsetInterval, butsetTimeoutis a native timer function that schedules the execution of a function after a specified delay. - What are the different ways of displaying other websites on an HTML page?
Ans.: We can use three tags:<embed>,<iframe>, and<object>. However,<iframe>is better than the other two as it provides sandboxing (preventing JavaScript of the embedded website from running).
These questions cover a broad spectrum of HTML knowledge, from basic attributes to advanced topics like Server-Sent Events and Web Workers. Preparing for these questions will help candidates feel confident in interviews for roles such as “Website Designer” and “Frontend Developer” at Proficed.
Member discussion