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.

You Might Like:

Node.js interview questions set 1

Node JS: Understanding bin in package.json.

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

Node.js: Extract text from image using Tesseract.

Comments

Post a Comment

Popular posts from this blog

Globant part 1

 1)call,apply,bind example? Ans: a. call Method: The call method is used to call a function with a given this value and arguments provided individually. Javascript code: function greet(name) {   console.log(`Hello, ${name}! I am ${this.role}.`); } const person = {   role: 'developer' }; greet.call(person, 'Alice'); // Output: Hello, Alice! I am developer. In this example, call invokes the greet function with person as the this value and passes 'Alice' as an argument. b. apply Method: The apply method is similar to call, but it accepts arguments as an array. Javascript code: function introduce(language1, language2) {   console.log(`I can code in ${language1} and ${language2}. I am ${this.name}.`); } const coder = {   name: 'Bob' }; introduce.apply(coder, ['JavaScript', 'Python']); // Output: I can code in JavaScript and Python. I am Bob. Here, apply is used to invoke introduce with coder as this and an array ['JavaScript', 'Pyt...
Post a Comment
Read more

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...
1 comment
Read more

CSS INTERVIEW QUESTIONS SET 2

  You make also like this CSS interview question set 1. Let's begin with set 2, 5)What is the difference between opacity 0 vs display none vs visibility hidden? Property           | occupies space | consumes clicks | +--------------------+----------------+-----------------+ | opacity: 0         |        yes      |        yes       | +--------------------+----------------+-----------------+ | visibility: hidden |        yes       |        no        | +--------------------+----------------+-----------------+ | display: none      |        no       |        no        | When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc. In e...
Post a Comment
Read more