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.
- 0.1 What does a doctype do?
- 0.2 How do you serve a page with content in multiple languages?
- 0.3 What are data-* attributes good for?
- 0.4 Consider HTML5 as an open web platform. What are the building blocks of HTML5?
- 0.5 Describe the difference between a cookie, sessionStorageand localStorage
- 0.6 Describe the difference between <script>, <script async> and <script defer>.
- 0.7 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?
- 0.8 What is progressive rendering?
- 0.9 Why would you use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
- 0.10 Have you used different templating languages before?
- 1 Related
1What does a
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”>
<p lang="fr">partager et prendre soin</p> <p lang="en"> share and take care</p>
data-* attributes good for?
<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
- canvas and SVG
- new communication API
- geolocation API
- web worker API
- new data storage
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.
6Describe the difference between
<script async> and
<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.
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?
ALSO READ: Java Collections Interview Questions