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.
What 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.
How 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”>
Example:
<p lang="fr">partager et prendre soin</p>
<p lang="en"> share and take care</p>
What 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>Consider 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
Describe the difference between a cookie, sessionStorage and 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.
Describe 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.
Why 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.
What 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.
Why 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">Have you used different templating languages before?
Yes, PHP.
ALSO READ: Java Collections Interview Questions