Skip to main content

4 html interview questions that you must know.


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.






Comments

Popular posts from this blog

Node JS:Understanding bin in package.json.

Well as a Node Js developer we know package.json as dependency file where we keep a note of all dependencies of our project. Here we will be looking at what is bin in package.json? To understand this we first need to understand command line application and it's purpose. CLI applications are mostly used to automate things such as deployments of application,running tests,building reports and the list goes on and on. So lets start with creating our first CLI application. First, let’s make sure you have the tools required. To complete this tutorial, you will need the following: 1)A recent version of Node.js downloaded and installed 2)A good text editor, such as Visual Studio Code Next, open your computer’s command prompt (Windows) or terminal (macOS/Linux). Change the current directory to the folder where you save your documents or projects. Enter the following commands to create a new project folder and initialize the project. mkdir hello-cli cd hello-cli npm init Nex

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency.  It helps to make a commercial or trial version of your node.js application without exposing the source code. I found