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.
Contents
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”>
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
5
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.
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">10Have you used different templating languages before?
Yes, PHP.
ALSO READ:Â Java Collections Interview Questions
I do trust all the ideas you have offered in your post.
They’re very convincing and will certainly work.
Nonetheless, the posts are very brief for newbies.
May just you please extend them a little from next time?
Thanks for the post.