Top HTML Questions

Q (1): Does localStorage throw error after reaches maximum limits?

Yes

Example:

<!DOCTYPE HTML>
<html>
   <head>
         <title>HTML5 localStorage</title>
   </head>
   <body>
      <script type="text/javascript">
        try{
            if(window.localStorage){ // Check if the localStorage object exists
            
                var result = "";
                var characters  = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                var charactersLength = characters.length;
                for(var i = 0; i < 10000; i++){
                    result += characters.charAt(Math.floor(Math.random() * charactersLength));
                    localStorage.setItem("key"+i, result);
                }  
            } else {
                alert("Sorry, your browser do not support localStorage.");
            }
        } catch(e) {
            console.log('Exception: '+e);
        }
      </script>
   </body>
</html>

Output

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: <datalist>, <output>, <keygen>, <progress>, and <meter>.

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>

Live Example

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>

Live Example

3.) Output Tag: is meant to display text output. It indicates a section of the page that can be modified by a script (usually JavaScript).

<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>

Live Example

4.) Progress Tag: indicates how much of a task has been completed (often marked as a percentage). It is expected to be modified through JavaScript code.

 
<p>Progress: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>

<script type="text/javascript">
    var i = 0;
    var progressBar = document.getElementById("bar");
    
    function countNumbers() {
      if(i < 100) {
        i = i + 1;
        progressBar.value = i;
        // For browsers that don't support progress tag
        progressBar.getElementsByTagName("span")[0].textContent = i;
      }

      // Wait for sometime before running this script again
      setTimeout("countNumbers()", 100);
    }
    countNumbers();
</script>

Live Example

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.

Live Example


Q (3): What is the DOM? How does the DOM work?

The DOM (Document Object Model) is a cross-platform API that treats HTML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners.

  • 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
  • Layout
  • Paint

<img src="assets/layers.png" alt="Browser Rendering Engine" />


Q (5): What does a `` do?

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 quirks mode.


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.

<!DOCTYPE html>
<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.

  1. It needs to be well formed, meaning all elements need to be closed and nested correctly or you will return errors.
  2. 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.

cookie localStorage sessionStorage
Initiator Client or server. Server can use Set-Cookie header Client Client
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 Cookie header No No
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 cookie, localStorage, or 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).