Top HTML Questions
Q (1): Does localStorage throw error after reaches maximum limits?
Exception: QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'key3230' exceeded the quota.
Q (2): What are the new form elements in HTML5?
There are five new form elements in the HTML5 forms specification:
1.) Datalist Tag: allows to attach a list of suggestions to a text input element. As soon as the user begins to type in the text field, the list of suggestions appears and the user can choose from the suggestions with the mouse.
<p>Enter your favorite browser name:</p> <input type="text" list="browsers" name="favorite_browser"> <datalist id="browsers"> <option value="Firefox"> <option value="Chrome"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist>
2.) Meter Tag: indicates a numeric value that falls within a range. The tag supports a number of attributes:
value: If you don’t specify a value, the first numeric value inside the
<meter></meter> pair becomes the value.
- max: The maximum possible value of the item.
- min: The minimum possible value of the item.
- high: If the value can be defined as a range, this is the high end of the range.
- low: If the value can defined as a range, this is the low end of that range.
- optimum: The optimal value of the element.
<p>Disk Usage: <meter value="0.2">20%</meter></p> <p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter></p> <p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" value="50"> + <input type="number" id="b" value="100"> = <output name="result" for="a b"></output> </form>
5.) Keygen Tag: The
<keygen> element generates an encryption key for passing encrypted data to a server. When an HTML form is submitted, the browser will generate a key pair and store the private key in the browser's local key storage and send the public key to the server.
<form action="process-key.php" method="post"> <label>Username: <input type="text" name="username"></label> <label>Encryption: <keygen name="key"></label> <input type="submit" value="Submit"> </form>
Note: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time.
Q (3): What is the DOM? How does the DOM work?
The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.
document.getElementById() and document.querySelector() are common functions for selecting DOM nodes.
Setting the innerHTML property to a new value runs the string through the HTML parser, offering an easy way to append dynamic HTML content to a node.
Q (4): How does the browser rendering engine work?
In order to render content the browser has to go through a series of steps:
- Document Object Model(DOM)
- CSS object model(CSSOM)
- Render Tree
<img src="assets/layers.png" alt="Browser Rendering Engine" />
Q (5): What does a `
A DOCTYPE is always associated to a
DTD ( Document Type Definition ). A DTD defines how documents of a certain type should be structured (i.e. a
button can contain a
span but not a
div), whereas a DOCTYPE declares what DTD a document supposedly respects (i.e. this document respects the HTML DTD). For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects.
Once a user agent has recognized a correct DOCTYPE, it will trigger the
no-quirks mode matching this DOCTYPE forreading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the
Q (6): What happens when DOCTYPE is not given?
The web page is rendered in quirks mode. The web browsers engines use quirks mode to support older browsers which does not follow the W3C specifications. In quirks mode CSS class and id names are case insensitive. In standards mode they are case sensitive.
Q (7): What is the difference between standards mode and quirks mode?
In Quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In Standards mode, the behavior is described by the HTML and CSS specifications.
For HTML documents, browsers use a
<!DOCTYPE html> in the beginning of the document to decide whether to handle it in quirks mode or standards mode.
<html lang="en"> <head> <meta charset=UTF-8> <title>Hello World!</title> </head> <body> </body> </html>
Q (8): What is difference between HTML and XHTML?
The Extensible Hypertext Markup Language, or XHTML, has two important notes for front end developers.
- It needs to be well formed, meaning all elements need to be closed and nested correctly or you will return errors.
- Since it is more strict than HTML is requires less pre-processing by the browser, which may improve your sites performance.
Q (9): 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.
Q (10): Describe the difference between a `cookie`, `sessionStorage` and `localStorage`?
cookie: A text file saved on the users computer to store and retrieve data
sessionStorage: Is memory space in a browser to save temporary data until the window or tab is closed.
localStorage: Like cookie, where data can be saved and retrieved after browser sessions, but stored in memory like sessionStorage. Data is stored as plain key value pairs and can be stored as Json objects.
|Initiator||Client or server. Server can use
|Expiry||Manually set||Forever||On tab close|
|Persistent across browser sessions||Depends on whether expiration is set||Yes||No|
|Sent to server with every HTTP request||Cookies are automatically being sent via
|Capacity (per domain)||4kb||5MB||5MB|
|Accessibility||Any window||Any window||Same tab|
Note: If the user decides to clear browsing data via whatever mechanism provided by the browser, this will clear out any
sessionStorage stored. It's important to keep this in mind when designing for local persistance, especially when comparing to alternatives such as server side storing in a database or similar (which of course will persist despite user actions).