Frontend Interviews Decoded — Part 2 | HTML Questions & Answers

Published in

The Scripton Blog

8 min readJul 24, 2021

What does a doctype do?

The first line of HTML documents contains the <!doctype html> to inform the browser of the file type to expect. It is not an HTML Tag and is not case-sensitive.

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

The first step in serving a page with content in multiple languages is identifying the language for it to be served in. This can be done primarily in 2 ways,

Guessing the language based on some of the information from the request itself, which can be the location from the IP Address.
Allowing the user to set his primary language, which can further be done with the following 2 approaches, first being the one where we access Accept-Language header from the request, as it changes with the language settings of the browser, and second being the one where we allow the user to set the primary language through the website itself and storing it on the server or in a cookie. Language details can be appended to the URL to ensure that if the user shares the URL, it gets shared in the same language.

The second step is to deliver content to the browser in the specified language. This might not work as straight out as you might think since browsers might default the content to the default charset. You can set the charset in the following ways:

By setting the charset in the Content-Type header of the response
Using meta tag, <meta charset=”urf-8"/> for example.

The last piece of the puzzle is to optimize the duplication of content in multiple languages. This is usually done by specifying a Canonical URL with the default language of the content and localized versions of the page with the hreflang attribute on the links.

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

Inclusion of Text in Images — Inclusion of text in images is an easy way to create beautiful layouts, but in the case of a multilingual website, the only option left out is to have multiple images for different languages and is not the most elegant solution. Hence, the text should not be included in images for multilingual websites.
Formatting Dates — Formatting dates is another big issue in the case of multilingual websites as the dates have relatively different formatting styles in different parts of the world.
Word/Sentence length — Having restrictions on the word or sentence length poses a big problem in the case of multilingual websites as some languages have a smaller character requirement, while others require more characters to express the same content.
Currency, Language & Flag Selectors — Another issue with multilingual websites is the usage of flags in language selectors. Since the mapping is not usually 1–1, cases can emerge where problems arise. Similarly, translation into plural forms, currencies can also be an issue.

What are data- attributes good for?

Data attributes are used to store data on the HTML Tags themselves, which are used for styling (as the data in these attributes can be accessed from CSS) and engaging (as the data in these attributes can also be accessed from JavaScript). The data stored reduced the number of server calls as the data was locally stored on the client itself.

Data attributes can be added to any HTML Tag using **data-*** format, with the lowercase attribute name and the attribute value as a string. Content in data attributes does not make a visual difference and is sometimes not indexed by search crawlers.

Finally, as compared to JavaScript Objects, accessing information from data attributes is poor; hence JavaScript Objects should be preferred wherever possible.

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

Some of the building blocks of HTML5 include Semantics, Connectivity, Offline & Storage, Multimedia, Performance & Integration, Device Access, Styling & 2D/3D Graphics, and Effects.

Semantics — giving meaning to your content

Connectivity — communicating with the server in new ways

Offline & Storage— allowing webpages to store data on the client and helps them in operating even when offline

Multimedia — making videos and audios available about of box with API’s

2D/3D Graphics and Effects — giving more presentation options

Performance & Integration — allowing for better performance and resource utilization

Device Access — providing access to various input and output devices

Styling — allowing for more sophisticated themes

Describe the difference between a cookie, sessionStorage & localStorage.

Cookies, sessionStorage, and localStorage are all ways of storing data in a web browser for future access by the client. The working of each of the following is explained as follows:

Cookie — Cookie is a way of storing authorization information of the client in the browser to maintain the state between the requests. Cookies are sent automatically sent with every request made by the client (only with requests as specified in the properties of a cookie). Cookies persist even after closing the browser, as they might have their individual expiry on them.
sessionStorage — sessionStorage is temporary storage provided by the browser to be used by the application. It contains data that needs not be persisted after the user session is ended (includes the closing of browser or closing of the tab). As soon as the session is ended, the data in the sessionStorage is deleted.
localStorage — localStorage can be thought of as long-term storage, which comes with its own nuances. localStorage can only be cleared programmatically or by the user explicitly clearing them from the browser settings. The major fallback of local storage is in case the user has 2 tabs opened of the same application, in which case, the localStorage being a shared pool might cause unexpected behavior.

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

To ease out the placement of these script tags, certain attributes can be used alongside, like async & defer. Let’s see how the scripts are loaded with the presence of each of these attributes:

< script> — As soon as the browser interacts with a script tag, it stops the parsing of HTML, fetches the script file, executes the script, and then continues the parsing of HTML.
< script async> — As soon as the browser interacts a script tag with async, it starts fetching the script file while parsing the HTML side-by-side, but stops the HTML parsing when the script is completely fetched, after which it starts executing the script, post which the HTML parsing continues.
<script defer> — As soon as the browser interacts a script tag with defer, it starts fetching the script file while also parsing the HTML side-by-side. But in this case, the script is only executed once the HTML parsing is completed.

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?

CSS Files are usually linked in between the <head></head>tags to make sure the styles are applied as soon as the DOM gets rendered. CSS files can also be attached just before the </body>, as this will speed up the rendering of the DOM but will finally show a flash of unstyled HTML to the user.

On the other hand, JS files are linked just before the </body> tag to make sure they don’t block the rendering of the DOM while they are fetched and executed and make sure the DOM is rendered for the JavaScript to fiddle with it.

One of the exceptions, when JS files are linked earlier in the document, is in case the JS is responsible for document.write() functionality. But since, it’s not a good practice to use document.write(), the functionality of including JS files at the end holds up to date.

What is progressive rendering?

Progressive rendering is a time-optimization over SSR (Server Side Rendering) to stream the critical content from the server to the client without waiting for the non-critical content to get rendered on the server. This results in a significant improvement in the page’s performance, as it gives the benefits of both CSR (Client Side Rendering) and SSR to the application. The only cons of progressive rendering include the absence of any framework to do so and delayed interactivity on the client.

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

srcset attribute on the <img> tag helps in achieving responsive images to be added to the webpage. Responsive images are the ones that scale in size depending upon the client’s screen; for instance, bigger client screens will need bigger images, while smaller devices like mobiles with less pixel count don’t require such large images as they are finally scaled down.

Scaling the images properly reduces the size of images to the scale of requirement and helps in creating more optimized websites. srcset attribute helps in doing that by specifying images along with the descriptors to help the browser decide the image best scaled for the client.

The descriptor used can be width, density, or size. Let’s consider width descriptor for an example illustrating the browser’s process when evaluating the content of this attribute.

Consider a case where you serve a webpage with an image tag with srcset having the following images:

small.jpg 500w
medium.jpg 1000w
large.jpg 2000w

In the case where the website is opened on a device with a device width of 320px, the browser will first calculate the following:

500/320 = 1.56
1000/320 = 3.12
2000/320 = 6.25

Now, if the client resolution is 1x, it will render the image closest to that, which in this case is the one with 1.56, which is the small.jpg, but as the client resolution keeps on increasing, it will default to the ceiling value, which incase of 2x will be 3.12; hence medium.jpg will be used.

Have you used different HTML templating languages before?

Some of the HTML Templating languages include EJS (Encapsulated JavaScript), Liquid, Handlebars, Slim, ERB, Jinja & Pug. These templating languages provide a way to inject dynamic content into web pages using certain special characters.

What is the difference between canvas and SVG?

The biggest difference between a canvas and an SVG is that canvas is based on rasters, while SVG’s are based on vectors. (Rasters are images made of pixels, while Vectors are images made of mathematical equations.)

This difference is the building block of all the rest of the differences:

SVG’s can be modified through Script and CSS, while Canvas can only be modified with the script.
SVG’s are highly scalable and gives high-resolution prints at any resolution, while Canvas has poor scalability and gets pixelated on higher resolution.

What are empty elements in HTML?

Some HTML Tags which don’t have any child nodes are called empty elements or empty tags. Some of such empty tags are as <br/>, <hr/>, <input/> &<img/>.