In this blog post I answered the HTML Questions from the Frontend Developer Interview Questions. This is a GitHub repo which contains helpful lists of frontend related questions to test yourself or extend your knowledge.
- What does a
- How do you serve a page with content in multiple languages?
- What kind of things must you be wary of when design or developing for multilingual sites?
- What are
data-attributes good for?
- Consider HTML5 as an open web platform. What are the building blocks of HTML5?
- Describe the difference between a cookie, sessionStorage and localStorage
- Describe the difference between
- Why is it generally a good idea to position CSS
scripts just before the
bodyends? Do you know any exceptions?
- Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
- Sources/ Further Reading
What does a
The doctype makes sure the document gets parsed the same way by different browsers. It prevents the browser from switching into "quirks-mode" when rendering a document.
How do you serve a page with content in multiple languages?
By using the lang attribute on the html element
What kind of things must you be wary of when design or developing for multilingual sites?
You have to enable an easy way for users to change their language. There is also the possibility that people from different countries need different content.
data- attributes good for?
data- attributes ca be used to store extra information on standard, semantic HTML elements without using non-standard attributes.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
MDN lists several groups which form the building blocks of HTML5 and contain many different technologies:
- 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 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.
When using a Cookie, data is sent to the server and is primarly for server-side reading (but can also be read on the client side). The size must be less than 4KB.
When using sessionStorage, the data is stored in the browser and can only be read on the clientside. The stored data is only available for one session, so when the browser tab gets closed, the data gets deleted. The storage limit is larger than a Cookie (at least 5MB).
When using localStorage, the data gets also stored in the browser and can only be read on the clientside. But it has no expiration date and the storage limit is the maximum of the three.
Describe the difference between
script async and
script async tag will not block the rendering, but will run the script as soon as it is downloaded and available.
script defer tag will defer the script and run it after the page is done parsing.
Why is it generally a good idea to position CSS
head and JS
scripts just before the
body ends? Do you know any exceptions?
link has to be positioned in the
head so it is downloaded and the styling is available as fast as possible. If the css
link is positioned inside the
body it is possible that the page is displayed without CSS for a short periode of time. This is called FOUC (Flash of unstyled content).
It is also a good idea to put the JS
script before the closing
body tag. If you put the JS
script tag in the
head or before the actual HTML content in the
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 is used to provide the same image in different versions, depending on the viewport. So you can display the image with different width and quality for mobile and different width and quality for desktop.
srcset attribute you will allow the browser to choose between, and what size each image is. First you have to insert the file name, a space followed by the image's inherent width in pixels.
The additional attribute
sizes adds a set of media queries and tells the browser what image size to choose when certain conditions are true. The
sizes attribute contains the media condition (max-width: 680px), a space, followed by the width of the slot the image will fill when the media condition is true.
Sources & Further Reading