30 HTML interview questions for frontend web developers

Are you a frontend web developer? And looking to find out some quick ways to crack your job interview. Then, do spend just 10 minutes to read the 30 HTML interview questions which we’ve picked for you.

Front-end web development even as defined by Wikipedia is the practice of producing HTML, CSS, and JavaScript to build a website or web application. Therefore, it’s obvious that HTML is the first and foremost element of web development that you should be getting ready to prepare.

However, we’d lately published a pack of HTML, CSS, and JavaScript in our post on 50 most essential Web Developer Interview Questions. It covers all the essentials of frontend web development, so do go through it once.

30 HTML interview questions for frontend web developers.

html interview questions for frontend developers

Latest HTML interview questions.

Q-1. What are the new features introduced in HTML5?

Answer.

HTML5 introduces a number of new elements and attributes that help in building an attractive webSite, that we see nowadays.

It supports following new features.

  • New Semantic Elements – These are like <header>, <footer>, and <section>.
  • Forms 2.0 – It contains improvements to HTML web forms. It has introduced new attributes for the <input> tag.
  • Persistent Local Storage – With HTML5, it is possible to achieve this, without resorting to third-party plugins.
  • WebSocket – It facilitates setting up a bidirectional communication for web applications.
  • Server-Sent Events(SSE) – These events got introduced in HTML5. The direction of the flow of the execution of these events is from the server to the Web Browser.
  • Canvas – It supports a two-dimensional drawing surface that is programmable using JavaScript.
  • Audio & Video – It allows embedding audio or video on the web pages without resorting to third-party plugins.
  • Geolocation – It facilitates the visitors to share their physical location with the web application.
  • Microdata – It allows building our personal vocabulary beyond HTML5 and extends our web pages with those custom semantics.
  • Drag and drop – It supports to Drag and drop the items from one location to another location on the same Web page.

 

Q-2. What would happen if the HTML Document does not contain <!DOCTYPE>?

Answer.

It instructs the Web Browser about the version of HTML used for creating the Web page.
If the developer misses declaring the DOCTYPE information in the code, then new features and tags provided by HTML5, like <article>, <footer>, and <header> will not be supported. Additionally, the Browser may automatically go into Quirks or Strict Mode.

 

Q-3. What is a tag in HTML?

Answer.

A tag instructs the Browser about how to format the HTML properly. When you write an HTML page, you enter tags for many reasons to change the appearance of text, to show a graphic, or to make a link to another page. HTML uses symbols like “<” and “>” to enclose the tags. And symbol “\” for closing the tag.

 

Q-4. What is the difference between HTML elements and tags?

Answer.

HTML elements communicate to the Browser how to represent the text. They become HTML tags when enclosed within angular brackets <>.

 

Q-5. What are the various elements provided by HTML5 for media content?

Answer.

HTML provides the support of following elements for representing the media content.

  • <audio> – It defines the sound content.
  • <video> – It represents the video content that needs to be attached to a Web page.
  • <source> – This tag defines the source of video and audio.
  • <embed > – It provides a container for an external application.
  • <track> – It defines text tracks for video and audio.

 

Q-6. What are the new Form elements made available in HTML5?

Answer.

When we want to collect some data from the person visiting our site, we use HTML Forms. An example is, the user has to enter his name, email id when he registers for the first time.

A form takes input from the site visitor and then posts it to a back-end application such as CGI, ASP Script or PHP script. The back-end application will then perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available in earlier version of HTML like, text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

HTML5 provides the support of some new Form elements that are as follows.

  • <datalist> – It represents a list of pre-defined options for input controls.
  • <keygen> – It defines a key-pair generator field (for forms).
  • <output> – It represents the result of the calculation.

 

Q-7. What is a semantic element in HTML5? Also, explain the difference between semantic and non-semantic elements?

Answer.

Semantic elements are one of the new features that are part of HTML5. They intend to help the developers in quickly creating the page structure.

A semantic element has its meaning expressed to both the browser and the developer. Also, all the modern browsers support this feature. However, it is possible for a developer to train old browsers to handle unknown elements.

Here is the list of some of the commonly used HTML5 Semantic Elements.

  • <article>
  • <figcaption>
  • <figure>
  • <header>
  • <footer>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <summary>

The difference – Semantic Vs. Non-semantic.

Semantic – These elements clearly describe their content like <img>, <form>, <table> etc.

Non-semantic – These elements are without any definition. They don’t describe anything about their structure such as <span> and <div>.

 

Q-8. What are the various tags provided for better structuring in HTML5?

Answer.

The various tags provided for better structuring in HTML 5 are:

  • <article> – This tag defines an article.
  • <aside> – It defines content other than the page content.
  • <bdi> – This tag isolates a part of the text for formatting in a different direction, from another text present there.
  • <command> – It defines a command button to be invoked by the user.
  • <details> – It outlines the additional details that a user can hide or view as per choice.
  • <dialog> – It defines a dialog box.
  • <figure> – This tag specifies content like illustrations, diagrams, photos, code listings, etc.
  • <figcaption> – It provides a caption for a <figure> element.
  • <footer> – This tag defines a footer for a document or a section.
  • <header> – This tag describes a header for a document or a section.
  • <hgroup> – When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.

 

Q-9. How can we get the geographical position of a user in HTML5?

Answer.

Yes, HTML5 can retrieve the location of a user with the use of Geolocation API. It provides getCurrentPosition() method to get the user’s current position.

 

Q-10. Describe Form Input Types in HTML5?

Answer.

HTML5 is the new standard for HTML that provides 13 new input types for forms. Using these new input types, we can create more interactive and easy-to-use web forms. It also provides better data validation, input control, color picker controls and many others.

The new input types for forms provided by HTML5 are as follows.

  • color – It’s applicable for HTML elements that represent color.
  • date – It allows the user to select a date.
  • DateTime – It enables the user to select a date and time (with time zone).
  • DateTime-local – It allows the user to select a date and time (without time zone).
  • email – It is applicable for input fields that contain an e-mail address.
  • month – It permits the user to select a month and year.
  • number – It is applicable for input fields that accept a numeric value. It allows setting restriction on the data type of the number, this field takes.
  • range – It is applicable for input fields that accept a value from a range of numbers. It allows setting restriction on the data type of the number, this field takes.
  • search – It gets used for search fields.
  • tel – It defines a field for entering a telephone number.
  • time – It allows the user to select a time.
  • URL – It is applicable for the input fields that contain a URL address.
  • week – It allows the user to select a week and a year.

 

Q-10. How can we retrieve the geographical position of a user using HTML5?

Answer.

HTML5 provides the support of Geolocation API to retrieve the location of a user.
We can find out the current position of the user using getCurrentPosition() method of this API.

 

Q-11. What is HTML5 Graphics?

Answer.

In HTML5, there are two types of graphics.

Scalable Vector Graphics (SVG).

  • The HTML5 <svg> element is a container for SVG graphics. It provides several methods for drawing boxes, paths, text, circles, and graphic images.
  • SVG is beneficial as nowadays, people are using high-resolution devices (iPads and Monitors), so it becomes impressive as designs, logos, and charts scale according to the requirement, maintaining the picture quality.
  • SVG is XML based, which means that every element is available within the SVG DOM. It treats every shape as an object. If the user changes the attributes of any SVG object, the browser will automatically re-render the shape.

Canvas.

  • It is a rectangular area on the HTML page for drawing graphics on the fly, using JavaScript.
  • The default size of the canvas is 300 PX × 150 PX (width × height).
  • The HTML tag <canvas> is a container for the Canvas graphics. Canvas gets executed on the pixel by pixel basis.
  • In Canvas, browser forgets the graphic, after drawing it. If the user tries to modify it, the entire scene needs to be redrawn, including all the objects present in the graphic.

 

Q-12. Explain the key differences between SVG and Canvas?

Answer.

  • Canvas is resolution dependent while SVG is not.
  • Canvas does not provide any support for event handlers while SVG does provide the support for event handlers.
  • Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
  • Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.
  • Canvas provides a less interactive animated user interface. Whereas, the interface provided by SVG is very highly interactive.

 

Q-13. How can we create a new HTML element?

Answer.

We can even create new elements for the document as follows.

It can be used in the HTML as.

 

Q-14. What is the use of Drag and Drop in HTML5?

Answer.

Drag and Drop (DnD) is a powerful User Interface concept, which enables the user to copy, reorder and delete any number of items, just with the help of mouse click. To do this, the user has to click and hold the mouse button over an element, drag to the required location, and finally release the button to drop the element there.

With HTML4, developers have to either do complex Javascript programming or use other Javascript frameworks like jQuery to achieve this functionality.

HTML 5 introduced a Drag and Drop (DnD) API that provides the support of all the fundamental DnD operations to the browser. Thus making it easy for the developers to code it.

Latest versions of all the main browsers, like Chrome, Firefox, and Safari, support this DnD API of HTML5.

Drag and Drop Events.

Many events get triggered during various stages of the drag and drop operation. These events are listed below.

  • dragstart – it gets triggered when the user starts dragging a draggable object.
  • dragenter – it gets triggered when the user has dragged the draggable element over the target element.
  • drag – it gets fired when the object is getting dragged.
  • dragend – it gets fired when the user releases the mouse button after dragging an object.
  • dragleave – This event gets triggered when the mouse leaves an element while a drag is occurring.
  • dragover – This event gets fired when the mouse moves over an element while a drag is occurring.

 

Q-15. What is HTML5 Web Storage?

Answer.

HTML5 Web Storage, also known as DOM Storage is a way to preserve state on either the client or server which makes it much easier to work against the stateless nature of HTTP. It allows the web pages to store the data locally in the user’s browser.

Following are the advantages of HTML5 Web Storage.

  • It can store 5 to 10 MB data. That is far more than what cookies allow.
  • HTML5 never transfers Web storage data with any HTTP request. Thus creating less overhead than cookies and in turn, increase the performance of the application.
  • Apps can work both online and offline.
  • This API is easy to learn and use.

 

Q-16. What are the different types of Web Storage provided by HTML5?

Answer.

There are two types of Web Storage.

1. Session Storage

As its name indicates, it stores data of current session only. The data stored in Session Storage clears on closing the browser.

Following methods are available to access Session Storage.

  • Use setItem() function to store data in Session Storage

sessionStorage.setItem (‘key’,’value’);

For Example.

  • Use getItem() function to retrieve data from Session Storage

sessionStorage.getItem(‘key’);

For Example.

  • We can only store String in Session Storage. To save the objects in Session, first, convert the object into JSON string and then store this string in Session Storage as in the following.

sessionStorage.setItem (‘object’, JSON.stringify(object));

  • If JSON string gets stored in Session Storage, then first convert it into an object as follows.

  • Use removeItem() function to delete a particular key from Session Storage.

sessionStorage.removeItem(‘key’);

2. Local Storage

Local Storage is the second type of HTML Web Storage. It stores data as KEY/VALUE pair.

Following functions are available to access Local Storage.

  • Use setItem() function to store data in Local Storage

localStorage.setItem (‘key’,’value’);

  • Use getItem() function to retrieve data from Local Storage

localStorage.getItem(‘key’);

 

Q-17. What is the need of introducing Local Storage in HTML5?

Answer.

Before HTML5, LocalStores was done with Cookies. They are not very good for large amounts of data, because, with every request, it passes this data to the server, making it very slow and ineffective. However, HTML5 does not pass this data on every server request. It uses the data ONLY when required. In HTML5, it is possible to store large amounts of data without affecting the website’s performance. Data for different website gets stored in separate areas. However, a particular website can only access its own data.

 

Q-18. Explain the key differences between localStorage and sessionStorage objects?

Answer.

Following are the key differences between localStorage and sessionStorage objects.

  • The localStorage object stores the data without an expiry date. However, sessionStorage object stores the data for only one session.
  • In the case of a localStorage object, data will not delete when the browser window closes. However, the data gets deleted, if the browser window closes, in the case of sessionStorage objects.
  • The data in sessionStorage is accessible only in the current window of the browser. But the data in the localStorage can be shared between multiple windows of the browser.

 

Q-19. What is the concept of Application Cache in HTML5? What are its advantages?

Answer.

HTML5 introduced the concept of Application Cache. It means that a web application is cached, and is accessible without an internet connection.

Following are the key advantages of Application Cache.

  • Offline browsing – Users can use the application even when they are offline.
  • Speed  – Cached resources load faster as compared to content that gets
    downloaded, directly from the server.
  • Reduced server load – The browser will only download updated/modified resources from
    the server.

 

Q-20. What is a Manifest file?

Answer.

A Manifest file is a simple text file, that tells the browser what to cache and what not to cache.

A Manifest file contains three Sections as

  • CACHE MANIFEST – HTML5 performs the caching of files listed under this section after
    they get downloaded for the first time.
  • NETWORK – Files listed here, always need a connection to the server. The browser can never cache them.
  • FALLBACK – Files listed here specify the fallback pages, if any page in it is not accessible.

 

Q-21. What is the difference between HTMl5 Application cache and regular HTML browser cache?

Answer.

Following are the key differences between the two.

  • In AppCache, we can define all the assets the browser should cache in a manifest file (even the entire site). For fetching this content, it is not necessary for the user to have accessed it previously. In other words, Application Cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. However, the browser cache will only store the pages (and associated assets) the user has visited actually.
  • The AppCache allows web apps (and websites) to be made available offline, that too, with the same speed benefits as the regular browser cache could provide only when the user is online.

 

Q-22. What is a Web Worker? How does it work?

Answer.

JavaScript will hang the browser if it has to handle UI events, query large amounts of API data for processing, and manipulate the DOM simultaneously.
Web Workers handle this situation by doing all the high computation tasks without interrupting the user interface. They do this by running on separate threads. Thus we can say that.

  • A web worker is a script, which runs in the background. It exists in external files.
  • The user can perform actions like clicking, selecting things and so on. Meanwhile, the Web worker runs in the background.
  • It is appropriate, to use Web worker for CPU intensive tasks.

Since Web workers are in external files, they do not have access to the following JavaScript objects.

  • The window object
  • The document object
  • The parent object

How does a Web worker work?

A Web worker gets initialized with the URL of a JavaScript file that contains its code. This code sets event listeners and starts communication with the script that invoked the worker from the main page. The Syntax is as follows.

If the javascript file specified in the above code exists, the browser spawns a new worker thread.

Once the Web worker gets spawned, it starts the communication with the parent page, using the postMessage() method. The Web worker, in turn, returns a message, that gets accessed using the onmessage() event on the main page.

Let’s take an example, where the script spawns a Web worker to execute a loop having thousands of iterations. After that, the Web worker returns the calculated value to the HTML page.

Below is the code of “calculateLoop.js” file. It makes use of postMessage() API, to pass the communication back to the HTML page.

 

Q-23. What are the new attributes provided in HTML5 for <form>?

Answer.

The new attributes provided in HTML5 for <form> are.

  • autocomplete
    • It specifies if a form or an input field should have “autocomplete” feature set as on or off.
    • If autocomplete is set to on, it enables the browser to fill the values, based on the values that the user starts to enter.
    • autocomplete works for input types like text, search, URL, tel, email, password, date pickers, range, and color.
  • novalidate
    • It is a boolean attribute.
    • Its presence signifies that the form-data should not get validated at the time of submission.

 

Q-23. What is output element in HTML5?

Answer.

Output element gets used when you design a form, that displays the result of a computation. Along with the standard global attributes, <output> also accepts for, form, and name attributes.
Let’s see a simple example of the <output> element that adds two numbers and displays the resulting value.

The form attribute associates the <output> with a form. It displays the output as “70” on the web page.

 

Q-24. What are the new attributes provided in HTML5 for <input> element?

Answer.

Following are the new attributes provided in HTML5 for <input>.

  • autofocus
    • It is a Boolean attribute.
    • The presence of this attribute means that an <input> element should automatically come into focus when the page gets loaded.
  • form
    • This attribute specifies about all the forms, to which a particular <input> element belongs.
  • formaction
    • This attribute defines the URL of a file, that will process the input control after the form gets submitted.
    • This attribute is used along with type=”submit” and type=”image”.
    • Also, it overrides the action attribute of the <form> element.
  • formenctype
    • This attribute defines, the method to encode the form data before submitting it to the server.
    • It gets used with type=”submit” and type=”image”.
    • Also, it overrides the enctype attribute of the <form> element.
  • formmethod
    • It defines the HTTP method used for sending form related data to the action URL.
    • It gets used with type=”submit” and type=”image”.
    • It overrides the method attribute of the <form> element.
  • formnovalidate
    • It is a boolean attribute.
    • It gets used with type= “submit”.
    • It indicates that the validation of the <input> element, should not be done at the time of submission.
    • It overrides the novalidate attribute of the <form> element.
  • formtarget
    • It specifies a name or a keyword of the area where response received after submitting the form will be displayed.
    • It gets used with type=”submit” and type=”image”.
  • height and width
    • It specifies the height and width of an <input> element.
    • It gets used only with <input type=”image”>.
  • list
    • It refers to a <datalist> element, which contains a list of pre-defined options for an <input> element.
  • min and max
    • It specifies the minimum and maximum value for an <input> element.
    • It works with the following input types, number, range, date, datetime, datetime-local, month, time, and week.
  • multiple
    • It is a boolean attribute.
    • It specifies that the user is allowed to enter more than one value in the <input> element.
    • It works with the following input types: email and file.
  • pattern
    • It specifies a regular expression with which the value of the <input> element gets compared.
    • It works with the following input types: text, search, URL, tel, email, and password.
  • placeholder
    • It displays a short hint that indicates the expected value of an input field.
    • It works with the following input types: text, search, URL, tel, email, and password.
  • required
    • It is a boolean attribute.
    • It indicates that it is mandatory to fill the particular field, before submitting the form.
  • step
    • It specifies the legal number intervals for an <input> element.
    • It works with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

 

Q-25. What is the major difference between, Transitional and Strict doctype?

Answer.

  • Strict – This DTD contains all HTML components and properties. However, it does NOT INCLUDE presentational or expostulated components (like text style). It does not permit the use of Framesets.
  • Transitional – This DTD contains all HTML components and properties, INCLUDING presentational and belittled components (like textual style). It does not allow the use of Framesets.

 

Q-26. What is Audio Tag in HTML 5? What are its attributes>

Answer.

This new element allows you to embed audio files in an HTML or XHTML document, without the need for any plug-ins. The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, wav, and .ogg.
Using the <source> tag, we can specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format.

The HTML5 audio tag supports following attributes to direct the look and feel and various functionalities of the control.

  • autoplay
    • It is a boolean attribute. If, the value is set the audio track starts playing automatically. The System will not wait for data loading to complete.
  • autobuffer
    • It is a boolean attribute. If set, the audio will automatically begin buffering, even if the automatic play is not enabled.
  • controls
    • If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
  • loop
    • Setting this boolean attribute would automatically restart the audio from the beginning, once it reaches to the end.
  • preload
    • This attribute specifies that the audio will be loaded at page load, and will be ready to run. If autoplay is present, this attribute will not work.
  • src
    • It represents the URL of the audio to embed. Its presence is optional.

 

Q-27. What is the use of <fieldset> tag in HTML5?

Answer.

The <fieldset> tag groups related form elements. It is like a box. In other words, it draws a box around related elements.

It must start with a <legend>tag because the <legend> tag defines the title of the fieldset.

Following is the Syntax of the <fieldset> tag in HTML5.

All the popularly known browsers provide the support for the <fieldset> tag.

HTML5 supports following attributes with the fieldset tag.

  • disabled
    • Its value is disabled. It specifies, whether the fieldset will be displayed or not.
  • name
    • Its value is in the form of text. It defines the name of the fieldset.
  • form
    • Its value is the name of the form. It specifies the form related to the fieldset.

Let’s see an example, where we create a fieldset in a form. Here we use the <legend> tag to define the heading for the fieldset.

 

Q-28. What are the HTML tags which get deprecated in HTML5?

Answer.

Following are the tags that are deprecated in HTML5.

  • <basefont>
  • <big>
  • <center>
  • <font>
  • <s>
  • <strike>
  • <tt>
  • <u>
  • <frame>
  • <frameset>
  • <noframe>
  • <acronym>
  • <applet>
  • <isindex>
  • <dir>

Some attributes from HTML4 are no longer allowed in HTML5 since their functionality is better handled by CSS. Below are some of the known attributes that got removed and the corresponding impacted element.

  • Attribute Removed Element
  • rev, charset a, link
  • longdesc, name img
  • version html
  • abbr th
  • scope td
  • align all block level elements
  • background body
  • hspace, vspace img
  • bgcolor table, tr, td, th
  • border, cell padding, cell spacing table
  • height, width td, th
  • valign table

 

Q-29. What is a meter tag? What is the difference between progress tag and a meter tag?

Answer.

The <meter> tag defines a scalar measurement within a known range or a fractional value. We can also call it a gauge.
Some of the items that can be represented using <meter> tag are Disk usage, the relevance of a query result, and so on.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Following example demonstrates the use of the <meter> tag.

The <meter> tag provides the support of the following attributes.

  • min
    • It is a number. It specifies the minimum value of the range.
  • max
    • It is a number. It specifies the maximum value of the range.
  • low
    • It is a number. It defines a range that represents <low> value.
  • high
    • It is a number. It defines a range that represents “high” value.
  • value
    • It is a number. It is a mandatory element. It defines the current value of the gauge.
  • optimum
    • It is a mandatory element with a numeric value. It specifies the optimum, or the best value, for the element. If this value is higher than the “high” value, this indicates that the higher the value, the better it is. If it’s lesser than the <low> mark, it means that the lower values are better. If it is, in between, then it indicates that neither high nor low values are good.
  • form
    • It specifies one or more forms that define the <meter> element. It has value form_id.

 

Q-30. Why do we need HTML5 Server-Sent Events?

Answer.

HTML5 Server-Sent Events (SSE) is a new way for the web pages to communicate with the web server. It enables a webpage to get updates from a server automatically. It was possible earlier also, but for this, the web page needs to ask if any updates were available. The client makes a request and waits for the server to respond with data. Once the web server provides its response, the communication is over.

However, there are some situations, where web pages require a long-term connection with the web server. A typical example is stock quotes on finance websites where price update happens automatically. Other examples are news feeds, sports results that run continuously on media websites, Facebook/Twitter updates and so on.

We can achieve the above, using HTML5 using SSE. It enables a web page to hold an open connection to the web server so that it can send a response automatically at any time. Thus there’s no need to reconnect and run the same server script from scratch over and over again.

Receive Server-Sent Event Notifications.

The EventSource interface contains the Server-Sent event API. We need to create an EventSource object to receive the Server-Sent event notifications. Following is the code for the same.

Above code performs following steps.

  • First, create a new EventSource object, and specify the URL of the page sending the updates (in this example “sse_demo.php”).
  • Every time an update arrives, onmessage event gets triggered.
  • When an onmessage event occurs, it places the received data into the element that has <id = result>.

Server-Side Code Example.

For the above example to work, we need a server capable of sending data updates. The server-side event stream syntax is simple. Set the “Content-Type” header to “text/event-stream”. Now you can start sending event streams. Following is the code (demo_sse.php).

Following is the explanation of the above code.

  • Set the “Content-Type” header to “text/event-stream”.
  • Specify that the page should not cache.
  • Output the data to send (Always start with “data: “).
  • Flush the output data back to the web page.

 

Summary – Latest HTML interview questions for frontend web developers.

We wish you could make the most out of the above HTML interview questions. However, you can search our Web Development section for more questions on CSS, JavaScript, AngularJS, and NodeJS.

Also, we always try to touch upon the topics that can assist you to solve the real-time problems. So if you like us to write on any of your favorite subjects, then use the comment box to request.

And if you liked this post, then please care to share it. To stay in touch, please follow us on facebook and twitter.

Best,

TechBeamers.

Leave a Reply

*