4 html interview questions that you must know.

- July 07, 2020

In this article, we will see some HTML interview questions I faced during interviews.
So let's start,

1)What is Doctype in html?
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.
In HTML 5,
the declaration is simple:
<!DOCTYPE html>

Note:The <!DOCTYPE> declaration is NOT case sensitive.

2)What is DOM in html?

The DOM (Document Object Model)is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
The HTML DOM is a standard object model and programming interface for HTML.
When a web page is loaded, the browser creates a Document Object Model of the page.
It defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words:
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

3)What are the new features in html5?

The doctype: You need not write down a long and messy doctype tag. Just type <!DOCTYPE html> and you are good to go.

The charset: To display an HTML page correctly, a web browser must know which character set to use. The default character set for HTML5 is UTF-8, which covers almost all of the characters and symbols in the world!
<meta charset="UTF-8">

Structural Tags(semantics): You now have <section>, <header>, <main>, <footer>, <nav>, <menu>, <article>, <aside>, <figure>
to structure your markup well. Rather than using a div, consider any one of these elements depending on their nature and your need.

Form fields: You have way more options than just the text or password.
Listing date, datetime, datetime-local, month, week, time, number, range, email, url, search;
you can do more with the forms with HTML5.

Media Elements: You now have <audio> and <video> tags to embed rich media without having to write messy code.
Both make use of <source> tag within.

Canvas: <canvas> allows you to add a canvas-like space to webpages; handy to pull dynamic graphs with JavaScript.
You can bring it one step further by adding a JavaScript-driven game.

Data-marking: <command>, <datalist>, <keygen>, <mark>, <meter>, <output>, <progress>, <time> tags mark the data according to the nature.

Context-menus: Add and control context-menus on your webpages. More here.

APIs: Html geolocation,webstorage(localStorage,sessionStorage),webworkers,drag/drop,HTML SSE.

Asynchronous Scripts: You have an additional attribute (async) for the script tag, that tells the browser to load that script asynchronously;
i.e. load scripts in parallel, without blocking the page rendering.
Also, you don’t have to add “text/javascript” every time you embed a JavaScript, writing just <script> will do.

Note: You will need to read details about every feature as the next question will be anyone out of this.

4)What is the difference between localStorage vs sessionStorage vs Cookie?

a)localStorage:

1)Stores data with no expiration date.

2)Local Storage is available for every page and remains even when the web browser is closed,

but you cannot read it on the server.

3)Available size is 5MB

b)sessionStorage:

1)Stores data for one session (data is lost when the browser tab is closed).

2)You cannot read it on the server

3)Available size is 5MB

c)cookie:

1)There are two types of cookies: persistent cookies and session cookies.

Session cookies: Do not contain an expiration date.

Instead, they are stored only as long as the browser or tab is open. As soon as the browser is closed, they are permanently lost. This type of cookie might be used to store a banking user’s credentials while they are navigating within their bank’s website since their information would be forgotten as soon as the tab is closed.

Persistent cookies: Do have an expiration date. These cookies are stored on the user’s disk until the expiration date and then permanently deleted.

They can be used for other activities such as recording a user’s habits while on a particular website in order to customize their experience every time they visit.

2)It can be read in the server as the browser will send a cookie with every Http request. (A cookie with the HttpOnly attribute is inaccessible to the JavaScript Document.cookie API; it is sent only to the server.)

3)Available size is 4KB

I hope you like this article and if any doubts please let me know in the comment section.