HTML interview Questions

In this article, the area focused is HTML interview Questions. These queries are asked in technical interview to test the aspirant’s knowledge. and further asked in google front-end interview, Facebook front-end interview and so on.

1What does a doctype do?

Doctype is not a part of HTML tag, Doctype is an instruction to notify the version of the HTML page is developed. There are 3 different declarations of Doctypes used in HTML 4.01 and only one in HTML 5.

2How do you serve a page with content in multiple languages?

lang attribute is used to present a page with content in multiple languages.
<element lang=”language code”>

ALSO READ  Importance of Numerical Assessment of Candidates during Hiring

Example:

<p lang="fr">partager et prendre soin</p>
<p lang="en"> share and take care</p>

3What are data-* attributes good for?

Data attributes were used to define and store extra information that is not relevant to the application. These extra data will help to create more engaging UX (user experience), using Javascript.

Example:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>

4Consider HTML5 as an open web platform. What are the building blocks of HTML5?

  • more semantic text markup
  • new form elements
  • video and audio
  • new javascript API
  • canvas and SVG
  • new communication API
  • geolocation API
  • web worker API
  • new data storage

5Describe the difference between a cookiesessionStorageand localStorage

local Storage – stores data with no expiration date ,the data will not be deleted even after the browser is closed.

SessionStorage – Stores data with expiration, that is data will be deleted when the browser is closed.

Cookie – a simple computer file made of text. The information stored in cookies can be used to personalise the experience when using a website. A website can use cookies to find out if someone has visited a website before and record information (data) about what they did.

6Describe the difference between <script><script async> and <script defer>.

  • <script> stops rendering process, and download and run a script.
  • <script async> don’t stop rendering process while asynchronously downloading a script. When finishing the download, it stops rendering and runs the script.
  • <script defer> don’t stop rendering process while asynchronously downloading a script. When finishing rendering, it runs the script.
ALSO READ  Bill gates Quotes for Success

7Why is it generally a good idea to position CSS <link>‘s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?

The idea of putting CSS in the header is to render the page in a progressive manner. Front-end engineers care about performance. If we put scripts file in the head section they stop or slows down the rendering process. So the site will take a long time to interpret.

8What is progressive rendering?

Progressive rendering is the name given to the techniques used to render the contents to display as fast as possible. These techniques were introduced before broadband internet’s arrival and are followed in modern web development to deliver contents as fast as possible for mobile devices.

Example of progressive rendering  Image Lazy Loading.

9Why would you use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.

srcset allows you to use different images for different screen sizes. The usage is very mild

<img src="image.jpg" alt="image" srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x">

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.