HTML Interview Questions

Hello friends,

You are welcome in this HTML series.

We will go through the interview question on HTML in today's segment.

Normally when we appear for the interview in a company for the post of web developer or web designer or front end developer then HTML is a mandatory subject that we must have proper HTML knowledge.

Our today's session will be very useful if you are a fresher and if you are already experienced then this session will be useful too because we have included some selected questions in today's session that are useful for you whether you are fresher and just completed your college and applying or you are experienced and switching a job. This will be very useful for both candidate types. We have taken very selected questions that normally must be asking questions in the interview in today's session or the questions which are having higher chances to come in the interview.

We have completed HTML 4 and HTML 5 in the complete course we have covered. When the questions come in an interview then it doesn't come with differentiating in HTML4 and HTML 5.

They are general questions.

They must be differentiated.

If you are unable to click that question that is from 4 or 5 then in today's session we will look at the distinction of how questions are by forgetting that is of 4 or 5.

That thing we will also check today.

So, let's start today's segment with HTML Interview Questions.

We will go one by one on every question like the first question.

When we are applying normally as a fresher, we must be asked What is HTML?

It is not necessary that if you are a fresher then this question will be neglected.

This can be asked on both fresher and experienced levels.

If we are looking for the answer then it is very important to give the full form of HTML.

Like if you are a fresher and you start as HTML stands for HyperText Markup Language, It really provides good information to the interviewer.

If you are experienced and you are like that if I am starting with the full form then it will look silly but every time when you answer, then the question is What is HTML?

so definitely the answer should start from the full form because it also self describes itself.

So, if the question is What is HTML then you have to start answering in its full form.

HTML stands for HyperText Markup Language.

It is a language of the World Wide Web because HTML is provided to us by WWW (world wide web) for programming and web development so it's a language of the world wide web and it is a standard text formatting language that is used to create and display pages on the web.

This means the technique we use to make the web pages that language is provided to us by HTML.

HTML makes the text more interactive and dynamic.

This means the text which is generated by HTML is more interactive and dynamic to the user.

Using HTML we know that we can add images, tables, links, and all, and as we have seen in our course that we store the HTML pages in dot html.

So, this is the proper descriptive answer of what HTML is. Starting from the full form and then giving the description about it, what we can make using HTML and how we can store its pages. This is all we can show up when this question appears.

Moving toward the next question. Our next question is What is the difference between a block-level element and an inline element?

When we see in our element's segment then we have learned three things about the element : a void element, a Block-level element, and an inline element.

Void level element means there is nothing in that like <br> or <hr>.

As like a straight line is given and we don't have to close this that such text we called as the void element.

Now coming forward to the questions block-level and inline.

Inline means if we place two lines then it is placed one by one as we have seen in the example of the table.

If we place one thing another upon the table then it drops when the last thing we place.

That is our inline element.

If we look at Block-level elements then we have taken the example of brick-like brick covering the complete area portion of our screen.

As we place an element then if the space is available beside it but the element should be at the bottom.

Now we are coming to the difference between what is the difference between block-level and inline elements. So, the difference is:

When we use block-level elements then it stretches its width to the complete screen size means if we are placing any element then whether we have given the width of 5 pixels but it will occupy the space of the complete screen means we can not place any particular element in that particular row.

It occupies a total of 100% width. This is our Block-level element.

On the other side is the inline element which occupies a specific place in one row. It does not occupy the complete width of the row. If we want to place another element beside it then it places just exactly beside that element. We use more than one span like one span then the second span and third span and then the fourth span, multiple spans we can use.

If we are using any division tag then if I am placing the second div just beside the first div then it will not come beside that. It will be placed at the bottom. 

So, this is the difference between block-level and inline-level.

Here you can see the block-level examples <div>,<img>,<section>,<forms>,<nav>.

So all these tags occupy the complete screen width.

If we write any tag after that then it will come at the bottom of it.

Inline examples are <apan>,<b>,<strong>,<a>,<input>. We can write any tag besides these until the screen width is completed.

If the screen width gets completed then the tag will place at the bottom of it.

These are the differences between block-level and inline levels.

Moving forward to the third question is Name some common lists that are used when designing a page.

This means answering some common listing tags that are used when we design a page.

So, this we have covered. We appeared in our list segment.

So, what are the common lists? As we know, there are three lists: ordered lists, unordered lists, and definition lists.

Order list in which the numbers are provided is called a numbered list.

Unordered means in which the bullets are provided not numbers.

There should be bullets, circles, disks, or icons

And the last is the definition list means under which we can generate a dictionary or an encyclopedia-like list. <dl>,<dt> like tags come under definition list.

DL means definition list.

By <dt> we start a subject and under <dt> we end all the subjects of it.

So, in total, we have three types of lists ordered, Unordered, and Definition list.

Ordered, in which the numbers are provided.

Unordered, in which the bullets are provided.

And Definition which helps to create a dictionary or encyclopedia.

So, these are the common lists that are provided in HTML.

Our next question is How to create a nested webpage in HTML?

This means how can we add another webpage to a webpage we already have.

Another webpage in a webpage. This we have covered in our iframe segment. We can do this using iframe.

Here is the answer, HTML iframe is used to display a nested webpage.

With the help of an iframe, we can add another webpage to a webpage.

For example, if we are writing a webpage program then under the body tag, we define an iframe.

Under the iframe, we have to add the URL of which we want to show the webpage.

Let's say if I want to show the learnvern page on my webpage or my particular file then in an iframe under source by adding anchor tag then href I can add learnvern.com.

By this, the learnvern page will be added under my iframe. So, using iframe I can add multiple pages or multiple webpages to a single webpage.

Moving towards the fifth question which is to Explain the layout of HTML.

 This question we have covered in our layout segment about how our layout is.

In this what specifies the layout of HTML?

HTML layout specifies how the webpage has been arranged.

If you have been asked this question then you can normally draw if you are appearing in the interview face to face. If you are appearing in an online interview then you can answer it by drawing it.

In that case, you have to explain the layout verbally and what portions are there in the layout like header, section, navigation, the article was there and for side, there is aside and footer is for down. This is how we describe the layout of HTML.

So, you can describe this to the interviewer in the same way I have explained it to you.
This is how we explain the layout verbally.

The next question is What are the tags used to separate a section of texts?

This means if we are differentiating a tag and want to show the text different from others then what tag we will use. This we have seen in void elements to differentiate the tags, we can use <br>, <p> Put one text in one <p> and another text in another <p>.

Then comes the <blockquote> tag.

If you are dealing with a very big paragraph then you can put it in blockquote.

By blockquote quotation, max and space can be added. Using <br>, <p> and <p> we can differentiate the text. This is a bit of a logical question about how you can differentiate between two texts.

So, if the answer is coming through HTML then we can answer it by HTML and if it comes through CSS then we can answer it by CSS.

By providing different borders throughout the text division we can answer this.

But currently, we are concentrating on HTML.

So, by using HTML if we differentiate then we can use <br>, <p> and <blockquote>.

Our next question is What is the difference between DIV and SPAN in HTML?

This question is very common in HTML cases to tell the difference between the DIV and SPAN.

So, normally when we use div as we have seen in the case of the block level that division is a block-level element.

As we define a div tag it will cover the 100% portion of our screen width. While the SPAN case is not like this.

SPAN is an inline-level element.

So, the span will cover the portion as much as we add the portion, tag, or content in the span.

So, the first difference is that the division is a block-level element and span is an inline-level element.

Here it is also written that the span element is in-line and the div element is block-level.

When we use the span then we use it for a small portion like we have a paragraph and I have to show some portion to be highlighted in that paragraph then I can use the span in this.

Firstly the span and then took a small portion and gave the color or CSS so that the portion gets highlighted. So, the span is inline and used for a small portion.

Now the opposite, How is div?

Div is a block-level element and it can usually be used in big groups of chunks, big paragraphs, and a large image compared to span whatever the bigger element.

So, this is the difference between div and span.

Next, the example is here that under div id is given HTML so we can use a span in a div.

Now, another question arises on the span that can we use div under span?

Usually, you can do but this is not the proper coding. Using span under div is okay because the span is for small portions.

But to use the div under the span means to add a large amount of data in a small portion which is not programmatically proper.

So, span is acceptable under div but div is not acceptable under the span.

Moving towards our 8th question, What is the purpose of using alternative texts in the image?

As we know that there is a tag in the image tag as alt which is the alternative tag.

So, what is the use of this alternative tag?

The answer is normally we use an alternative tag when the image is not showing properly or not getting loaded properly or in case our image is not getting loaded then what we have to show in place of the image. For this, we use the alternative tag. So, under the alt attribute, we can write the tag what we have to show instead of the image.

The purpose of the answer is we use alternative tags when our image is not getting loaded properly then in that case what we have to show up.

Our next question is, Is the <!DOCTYPE html> tag considered as a HTML tag?

This is a very important question in HTML because every time when we start coding or writing to start a program or a webpage then we start only from doctype HTML.

Then, in this case, the question arises is this a tag of HTML or not?

So, the answer is no because doctype is not the tag of HTML it is just for declaration.

This means when we type doctype in HTML then it indicates to our browser that this program is of HTML 5.

If we don't write this line then and under our webpage if we include HTML tags like audio, video, or other HTML 5 tags then it will not be supported in this case.

The HTML 5 tags will support only when we type doctype. But doctype HTML is not part of HTML.

It is a semantic level tag that's why it is not the tag of HTML.

Our next question is, What is the use of an iframe tag?

As we have seen that when we have to include another webpage to a webpage then in that case we can use the iframe tag. So, the answer is that An iframe is used to display a webpage within a web page.

Here the example has given again iframe src equals "demo_iframe dot html" and its width and height which is optional you can give them if you want or can close the iframe.

Next question is, Explain the key differences between LocalStorage and sessionStorage objects.

When we conducted the segment of web storage API then, in that segment we learned the difference between LocalStorage and WebStorage.

As we know the local storage stores the data in our system locally and it has no expiry limit while session storage stores in a particular session. It expires when the session closes.

This means when you are closing the tab of our web browser then we lose the data.

We have to add the data again.

So, we have added three points to its answer.

The first point is there is no expiry of local storage and has an expiry date in session storage that is particularly of one session.

The second is that the data does not get deleted when we close the browser and in session storage, the data gets lost after closing the browser.

The third is that in session storage the data is based on a particular window means if you are working in a tab then that data can be utilized under the tab.

But if I open the same program or the same web page in the next tab then I have to add the data from scratch means the data which is active in the first tab can not be used in the second tab. While in local storage our data is stored locally.

Our data can be accessible to any tab we can open.

So, these are the three differences between local and session storage.

The next question is, How to insert a picture into a background image of a web page? This means how can we add an image to the entire screen background.

The answer is simple, under the body in the background attribute we can write the name of the image whatever it is.

This means <body background = image dot jpg"> here I have taken dot jpg as an example but any extension can be there.

Our next question is What are the limits of the text field size?

When we took the form segment then under the form we have added multiple inputs so this question is very logical that the input function we define then we got the default size but we have never checked what the size is. So, the question is what will be text field size? How many input characters can it add?

So, the answer is that we can add 13 characters at one moment in our input field. What happens here is when we add an input character then it will accept any number of characters like 100 or 200 but the front end means how many characters will be shown to us on the screen altogether is 13.

Now, for example, I am giving one of my input field sizes as 1 then I will be shown 1 character and if I am giving my input field size width=300 then my input field will get bigger as it can take up to 300 characters. This means we can give the size according to our requirement either 0,1,2,3 and so on. But the default size of our input field is 13 characters.

Our next question is, What are cell spacing and cell padding?

Now this question also is very important because under the table this question arises. When we are working with a table then we get to know what is cell spacing and what is cell padding.

So, cell spacing means how far a cell is from another cell and cell padding means how far is the under cell data to its borders. So, the answer is that whenever we define a table then there are different cells in the table. Then we use cell spacing to define the distance from one cell to another and when we add content in one cell then how far the content is from its border for that we use cell padding.

Our next question is, What are some of the advantages of HTML5 over its previous versions?

This means that as we have seen today that until HTML5 we have many contents available in HTML4 but there are many new contents added in HTML5 like audio tag, video tag, SVG, Canvas, we can add graphics, multimedia. So, all these things are the advantages of HTML5 but what are more advantages of HTML5. So, this question on HTML5 is a very common question and this question mostly appears in front-end development interviews. In that case, what we have to answer is;

Firstly that HTML supports multimedia

Secondly, It has capabilities to store offline data using SQL databases and application cache. For example, we can store our data offline using local storage and session storage under web storage.

Then, Javascript can be run in the background. This means when we worked with web worker API which indicates that we can keep running a javascript page in the background and can run a web page simultaneously.

This means if one side of our web page is loading then on the other side our javascript file is also running. The example we have taken in our Web worker segment. So, javascript can be run in the background.

Now, HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc. This means we can add graphics also in HTML5.

Then, Included new semantic tags and form control tags.

This means we can add new semantic and form control tags like; New tags of form control like URL, Time, Day time local, Range, Meter like tags which are input related added in HTML5, and we have covered all these things in HTML Input which was a separate segment. Other semantic tags were also added like Header, nav, aside, Article and footer, etc.

So, these are the advantages of all new things added to HTML5.

Next question is, What is the difference between <figure> and <img> tag?

So, the figure tag is also added in HTML5. The difference between figure and image is under figure we can add many things like diagrams and pictures.

We can say it in Hindi or if we have written any code then we can add it as an image etc we can do in figure tag.

Using an image tag we can only add a picture with extensions like jpg, png, or all other image-related extensions, all the picture files.

Again repeating, From the figure we can make the diagram and also can add images and code. Another advantage of the figure is it is a semantic tag so when we use a figure then we can give image captions like things with the figure and can not give by image tag.

So, these are the advantages of the figure tag.

Our next question is, How can we club two or more rows or columns into a single row or column in an HTML table?

This means how can we merge more than one row or column into a single row or column.

As we know that for doing this we can use our colspan and rowspan attributes or availability. If we have to merge two rows then we add rowspan and if we have to add more than two columns then we use the colspan. So, rowspan is for merging rows and colspan is for merging columns.

The next question is, How to specify the link in HTML and explain the target attribute?

This means how can we specify a link plus we have to define the target attribute and how can we use different types of attributes.

So, our answer is that we define the link through an anchor tag.

Now under a tag, we have a target attribute available.

If we want to link the new webpage and want to open the webpage in the same window then we can do that by writing _self. This means target=_self. We have covered this when we have seen under target how we can achieve different things like image, heading, and anchor tags.

If we want to open the new webpage in a new window then in that case we can use _blank.

Now if we want to open this on the parent page of the current page means if we came from one web page to another web page and now we want to open the same thing on the previous web page then in that case we use _parent.

Last is _top. What happens with this is that our document opens in a full-body window. This means it opens in a 100% covered area.

So, these are our four attributes: option self, blank, parent, and top through which we can open our web pages from a different perspective.

Our next question is, What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?

As we have taken the specific segment of id and class there we have seen the difference between id and class. So, here the difference is we can use class multiple times in our complete webpage but when we have to identify an element uniquely then in that case we can use the id attribute.

So, the answer is for Multiple elements in HTML can have the same class value, which means we can allow the same class to different elements whereas the value of the id attribute of one element cannot be associated with another HTML element.

The same thing that if we are using id in one place then we can not use id in another place. One id can bind only with one element.

Our next question is, difference between <link> tag under link and anchor tag under <a>

What is the difference between a link and a?

So, as we have seen in performed practicals , that <a> tag is used when we have to target a web page. We use the <a> tag when we have to go from one web page to another. The link we have used when we added a new external file to our webpage. Let's say I have to add an externally created javascript file to my current web page then we will use a link tag. If I have created a stylesheet.css means creating a CSS file and I want to add that to my current web page or HTML file then in that case I will use a link tag.

So, the basic difference between a Link and <a> tag is that we can add external entities to the current HTML page by link and through <a> we can redirect from one web page to another web page.

The same thing is written in our answer that the anchor tag <a> is used to create a hyperlink to another webpage or to a certain part of the webpage from one webpage to another webpage. whereas with the help of a link, we add the external document to our current web page.

So, we have covered all over 20 questions but it is not necessary that our interview questions will come from these 20 questions but these 20 questions are frequently asked questions.

Whenever you go through any youtube videos about the interview question HTML then most questions are from these questions. These questions which I have found from the different interviewer experiences are that these questions are frequently asked.

So, if you go through these questions and appear in an interview in the future as a web designer, web developer, or front-end developer then these HTML questions will be very useful.

I am again saying that questions may arise apart from this so you will be able to answer as you will perform our practical and assignments, as your concepts will get clearer.

Then you can answer those questions undoubtedly.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Thank you, guys!