Interview Questions (HTML)

Hi guys. In this post, I discuss some of the common interview questions for HTML. These questions are taken from this github repository. Not all answers here are written by me. Many of them exist on the WWW. I have just grouped them together here so that you have a one stop for the questions and their answers.

Let’s get started.

What does a doctype do?

• Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly. While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules.

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

There are more than 1 ways to serve:

• Serve the root with a default selected language(English, probably) and show the user, an option to select his/her language. Then, we can use search parameters to set the language for the user or even use query parameters to do that or, we can set a cookie that has the language which will automatically carry the language choice along with each request automatically. But here, our server should be configured to to handle this by serving content in different languages based on the selected language.
• Another way is having json files for all languages and then fetching the json file based on user’s preference. But one issue here is that the json file for each language will be huge as it contains strings for entire website. So, it is also a good practice to separate json files for each page. So, for each language and for each page, you will have separate json file.

What kind of things must you be wary of when designing or developing for multilingual sites?

• Always use Unicode UTF8 encoding.
• Always use the lang and the dir attributes in all your HTML.
• Avoid talking about “right side” and “left side”. They will be reversed for language like Arabic, Persian, Urdu and Hebrew. If you really have to say it, make sure that your translators know how they are supposed to translate it.
• Don’t ever concatenate translated strings. Don’t do anything like "The date today is " + date. It will break in languages with different word order. Rather add parameter support to your messages and do something like messages.date = "The date today is %date"
• Don’t translate date formats, plural forms, currencies and languages manually. Use standards like CLDR instead.
• Use standard ISO 639-3 language codes.
  I already mentioned it above, but always make sure that your translators have all the documentation they need to translate things correctly in context. Even the best translators can’t make a correct translations without understanding the correct context.

What are data- attributes good for?

• HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().
  The syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).

const article = document.querySelector('#electric-cars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

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

• Semantics: allowing you to describe more precisely what your content is.
• Connectivity: allowing you to communicate with the server in new and innovative ways.
• Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
• Multimedia: making video and audio first-class citizens in the Open Web.
• 2D/3D graphics and effects: allowing a much more diverse range of presentation options.
• Performance and integration: providing greater speed optimization and better usage of computer hardware.
• Device access: allowing for the usage of various input and output devices.
• Styling: letting authors write more sophisticated themes.

Describe the difference between a cookie, sessionStorage and localStorage.

All of the three are something that help us store data in the client side (Client can manipulate this data using Developer Tools).

• Cookie is a piece of data that is attached to all the requests that the client makes automatically. It can be configurable too. You can specify which requests can be attached a cookie by setting the domain, path properties. You can even set to be sent over HTTPS connections. Also, they can be made HttpOnly which means, javascript running in the browser cannot access it.
• Local Storage is a new API which helps use store some data in the client-side (browser). It is a key value storage where the key and value are both strings. To store objects, you JSON.stringify them first. This data can be created/read/updated/deleted from the browser’s javascript. Each website has its own SCOPED local storage.
• Session Storage is identical to Local Storage, except for the fact that data stored in Session Storage is deleted as soon as the client closes the tab or the Window.

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

• Naked <script></script> wherever included, pauses the DOM parsing when the parser reaches it, and resumes it after it is done downloading the script.
• <script async></script> will also initiate the download of the script but it won’t block the parsing of the other DOM nodes.
• <script defer></script> will stop the downloaded script from running until all other scripts are finished downloading and then, run all the deferred scripts in order.

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?

• Style sheets are linked in the <head> so that the browser can style the HTML and render it as it goes. If you put the style information at the bottom of the document the browser will have to restyle and render the whole document from the top again.
  This firstly, takes longer, and secondly, looks really ugly.
  This differs from included scripts as scripts will block loading until they are done, so you load them as late as possible in the process.
  Exceptions for loading scripts earlier would be if the script is huge then, we want the download to start as soon as the page is loaded and not wait for the HTML parsing to complete. But this would block our HTML parsing. So, we can add async and/or defer properties to the scripts so that, they don’t block the document parsing. Also, if the script is very small, then we can make it an inline script and then there is not much harm in adding it in-between HTML elements.

What is progressive rendering?

• Progressive rendering is the name given to techniques used to render content for display as quickly as possible. It used to be much more prevalent in the days before broadband internet but it’s still useful in modern development as mobile data connections are becoming increasingly popular (and unreliable!)
  Examples of such techniques :
  • Lazy loading of images where (typically) some javascript will load an image when it comes into the browsers viewport instead of loading all images at page load.
  • Prioritizing visible content (or above the fold rendering) where you include only the minimum css/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred javascript (domready/load) to load in other resources and content.

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

Here is a link to a great answer.

Have you used different HTML templating languages before?

(The answer to this is specific to the person. You need not know everything about templating engines but it would help if you have some idea of what they are. Following is a sample answer.)

The different templating engines that I am aware of are EJS, PUG, HANDLEBARS, THYMELEAF. I have made a couple of projects using them but I haven’t used them professionally in any app.

What is the difference between canvas and svg?

Great Explanation.

---

That is it guys. Hope this was helpful for you to prepare for your Frontend Interview. Drop a comment below to share your thoughts and suggestions. ✨✨✨