Answers to Front-end Job Interview Questions - HTML Questions. Although the Front-end Interview Handbook has given answers, i’d like to answer these questions by myself to deepen by understanding.
Table of Contents
- What does a
doctypedo? - How do you serve a page with content in multiple languages?
- What kind of things must you be wary of when designing 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,sessionStorageandlocalStorage. - Describe the difference between
<script>,<script async>and<script defer>. - 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? - What is progressive rendering?
- Why you would use a
srcsetattribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute. - Have you used different HTML templating languages before?
- What is the difference between
canvasandsvg? - What are empty elements in HTML?
What does a doctype do?
- Prevent a browser from switching into so-called “quirks mode” when rendering a document.
References
⬆️ Back to top
How do you serve a page with content in multiple languages?
⬆️ Back to top
What kind of things must you be wary of when designing or developing for multilingual sites?
- Provide
langattribute for<html>element. Help screen reading technology determine the proper language to announce.
References
⬆️ Back to top
What are data- attributes good for?
- Allow us to store extra information on standard, semantic HTML elements.
References
⬆️ Back to top
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web.
- HTML, CSS, JavaScript
- DOM
- SVG
- MathML
- Web APIs
- HTTP
- URI
- Media Accessibility Checklist
References
⬆️ Back to top
Describe the difference between a cookie, sessionStorage and localStorage.
| Feature | cookie | localStorage | sessionStorage |
|---|---|---|---|
| Maximum data size | 4 kB | 5 MB | 5MB |
| Accessed on | server-side & client side | client-side only | client-side only |
| Lifetime | specified | till deleted | till tab is closed |
References
⬆️ Back to top
Describe the difference between <script>, <script async> and <script defer>.
- When a browser loads HTML and come across a
<script>tag, it must wait for the script to download, execute the downloaded script, and only then can it continue building the DOM. - The
<script defer>loads “in the background”, and then runs when the DOM is fully built (but beforeDOMContentLoadedevent).- Deferred scripts keep their relative order, it means all scripts with defer attribute download in parallel, but run in order.
- The
<script async>loads “in the background” and run when ready. The DOM and other scripts don’t wait for them.- Load-firsr order. The script downloaded first run first.
References
⬆️ Back to top
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?
For <link>,
- Download the external stylesheet resource regardless of DOM already rendered or not.
- When the page is loaded, user can see the elegant page.
For <script>,
- Every time a
<script>tag is encounted, the page must stop and wait for the code to download and execute before continuing to process the rest of the page. - Put all
<script>tag just before</body>tag ensures that the page can be alomost completely rendered before execution begins.
References
⬆️ Back to top
What is progressive rendering?
References
⬆️ Back to top
Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
srcsetis a string which identifies one or more image candidate strings, separated using commas, each specifying image resources to user under given circumstances.- Each image candidate string contains an image URL and an optional width or pixel density descriptor indicates the conditions.
References
⬆️ Back to top
Have you used different HTML templating languages before?
lit-html
References
⬆️ Back to top
What is the difference between canvas and svg?
References
⬆️ Back to top
What are empty elements in HTML?
- An empty element is an element that cannot have any child notes (i.e., nested elements or text nodes).
References
⬆️ Back to top
元信息类标签（head, title, meta）的使用目的和配置方法
<meta charset="UTF-8" />声明文档的字符编码。<meta http-equiv="X-UA-Compatible content="IE=edge" />覆盖 IE 的兼容性视图设置，无论浏览器如何设置，页面都会以标准模式渲染（what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do）。<meta name="viewport" content="width=device-width, initial-scale=1.0" />可以让移动端浏览器的虚拟视口匹配设备的尺寸。移动端浏览器和桌面端浏览器不同，会在虚拟视口（virtual viewport）中渲染页面，一般渲染的页面宽度是 980px，经常会大于移动设备屏幕的宽度，然后再将页面缩小以适合屏幕的尺寸，但是这样可能会导致页面难以辨认？所以可以设置视口标签，让移动端浏览器直接按设备的屏幕宽度渲染页面（is-the-viewport-meta-tag-really-necessary）。