55 HTML Interview Questions and Answers - Freshers, Experienced

Dear Readers, Welcome to HTML Interview questions with answers and explanation. These 55 solved HTML questions will help you prepare for technical interviews and online selection tests conducted during campus placement for freshers and job interviews for professionals.

After reading these tricky HTML questions, you can easily attempt the objective type and multiple choice type questions on HTML.

Do all HTML tags come in pair?

No, not all HTMLS tags come in pair. For e.g. <img>, <br>

What are some of the common lists that can be used when designing a page?

Some of the common lists that can be used are:

a) Ordered list
b) Unordered list
c) Definition list
d) Menu list
e) Directory list

What is the advantage of collapsing white space?

- The browser collapses the multiple white spaces into a single white space in HTML.
- This allows the developers to arrange the HTML code in a well organized and legible format.

Is it possible to list elements straight in an html file?

- Yes, it is possible with the use of indents.

Does a hyperlink apply only to text?

- No. The hyperlinks can be applied to both text as well as the images.
- It means that even the images can become clickable links with a capability to take the visitor to the next page.
- This can be done simply by using <a href> tag.

What hierarchy is being followed when in style sheets?

- Inline style takes priority over embedded style sheets.
- Embedded style take priority over external style sheets.
- If a single selector includes three different style definitions, the definition that is closest to the actual tag gets the priority.

What happens if the list-style-type property is used on a non-list element like a paragraph?

- Here the property will be ignored without having any effect on the paragraph.

What is the advantage of using frames?

- Frames make it easier to navigate through a site.
- The links that appear in the frame can appear through out the site.

How can I hide my source?

- No. you can’t hide your source as it is required by the browser to display your document.

How will you align a table to the right or left?

- To align the table to the right, you can use <TABLE ALIGN="right">
- To align the table to the left, you can use <TABLE ALIGN="left">

Why doesn't <TABLE WIDTH="100%"> use the full browser width?

- This is because the graphical browser is designed to leave a margin between the display area and actual content.
- The navigator also leaves some space for the scroll bar on the right side of the display area. Though, if the page is not long enough, the scroll bar doesn’t appear.

How would you automatically transfer your visitors to a new web page?

- You can do it with the help of meta tag mentioned below:
<META HTTP-EQUIV="Refresh" CONTENT="2"; URL="http://www.yourname.com">

- Place this tag between <HEAD></HEAD> .
- It will load yousite.com in 2 seconds.

You want only a vertical scrollbar and no horizontal scrollbar on your page. How would you do it?

- This can be done by defining the frame with SCROLLING = auto and having content to just fit into this frame.
- SCROLLING="yes" gets the scroll bar on both the sides, even when not needed.
- SCROLLING="no" doesn’t get the scrollbars at all, even when they are needed.

How do you refer to the .css file in the web page?

- .css file in the web page can be referred with the use of <link> tag.
- It should be kept between <head></head> tag.
<link href="/css/mystyle.css" type="text/css" rel="stylesheet" />

What is a better way to design the layout of a web page – a table tag or div?

- The better way to design the layout of the webpage is by using the <div> tag.
- The <table> tag is used to present the data in tabular format.

What is a <dl> tag in HTML?

- <dl> is a definition list tag used in HTML.
- It is used with <dt> and <dd>.
- <dt> list the item while <dd> describes it.

What are empty HTML elements?

- HTML elements with no content are called empty elements.
- For eg: <br>

How to create nest tables within tables in HTML?

We can create nest table i.e. table inside a table.

To create table we use following attributes:
<table>……</table>: declare starting and ending of table.
<tr>…</tr>: declare table row.
<td>…</td>: table data.

             <td>first cell of the outer table</td>
             <td>second cell of the outer table, creating second table inside the first table
                                           <td>first cell of the second table</td>
                                           <td>second cell of the second table</td>

Explain Non Breaking space in HTML.

When we add many spaces in the content then HTML remove all space except one space this is Non Breaking Space. To overcome this problem we use '& nbsp;'(without space between & and nbsp;). Suppose we want to add 3 space between two words then we have to use & nbsp; three time.

actual code:- hello I m Rohit Srivastava.
Display as:- Hello I m Rohit Srivastava.
But when we use & nbsp:
Actual code:- Hello & nbsp; & nbsp ; & nbsp; I m Rohit Srivastava.
Display as:- Hello I m Rohit Srivastava
NOTE: (without space between & and nbsp;)

How do I link to a location in the middle of an HTML document?

We can link to a location in the middle of an HTML document. Using Following steps:

1. Label the destination of the link : There are two ways of labeling destination using Anchor:
- NAME attribute:

<h2><a name="destination">Destination: Explanation</a></h2>

- ID attribute:

<h2 id="Destination_ID"> Destination: Explanation </h2>

2. Link to the labeled destination : We can link with the destination in the same URL page and with Different URL page.

Same URL: <a href="#Destination"> Visit to destination</a> or
Different URL: <a href="thesis.html#section2">go to Section 2 of my thesis</a>

Explain Cell Padding and Cell Spacing.

- Cell Padding : It refers to the gap or space between the cell content and cell border or cell wall.
- Cell Spacing : It refers to the gap between the two cells of same tables.

In HTML cell spacing and padding both are used with Table Border layout.

<table border cellpadding=2>
<table border cellspacing=2>
<table border cellpadding=2 cellspacing=2>

How to create a button which acts like a link?

To create buttons which act as a hyperlink, there are two ways:
<FORM ACTION="[url]" METHOD=get>
<INPUT TYPE=submit VALUE="Text on button">

<INPUT TYPE="submit" VALUE="Go to my link location"
ONCLICK=" http://www.careerride.com/;" />

What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

1. HTML is application of Standard Generalized Markup Language(SGML) whereas XML is application of Extensible Markup Language(XML).
2. HTML is a static Web Page whereas XHTML is dynamic Web Page.
3. HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
4. HTML is about displaying information whereas XHTML is about describing the information.

How many types CSS can be include in HTML?

There are three ways to include the CSS with HTML:

1. Inline CSS : It is used when only small context is to be styled.
- To use inline styles add the style attribute in the relevant tag.
2. External Style Sheet : Is used when the style is applied to many pages.
- Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<link rel="stylesheet" type="text/css" href="mystyle.css" />

3. Internal Style Sheet : Is used when a single document has a unique style.
- Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag, like this:
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}

What are logical and physical tags in HTML?

- Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclosed text in strong tag then it tell the browser that enclosed text is more important than other text.

- Physical text are used to tell the browser that how to display the text enclosed in the physical tag.
Some example of the physical tags are: <b>, <big>, <i>

Does HTML support Javascripts?

Yes, HTML supports JavaScripts. We can use JavaScript anywhere in the HTML Coding. Mainly there are four sections where we can add JavaScript in HTML.

1. Head Section : We can add JavaScript in Head section of HTML.
<head>…..Javascript…. </head>
2. Body Section : <body>….. Javascript…</body>
3. Head and Body both : We can add Javascript in both head and body section.
<body….Javascript…</body> and <head>…..Javascript…. </head>
4. External File : Script in and external file and then include in <head> ….. </head> section.

Explain marquee tag.

Marquee tag : Marquee tag is used when we want that some text or content move in the web page whether horizontally or vertically.

Syntax of Marquee tag:
<marquee>move text</marquee>

Attribute of Marquee tag are: bgcolor, direction, height, width, vspace etc.

How do I add midi music to my web page?

We can add midi Music in our HTML web page using following tag:
<bgsound src="music.mid" loop="1">

Attribute LOOP = 1 : Shows that music.mid is played only for one time. We can also set the value of loop to infinite. This tag is supported by Netscape and Internet Explorer.

<embed src="canyon.mid" Autostart=TRUE Width=145 Height=60 Loop=true>

What are new Media Elements in HTML5?

Following are the New Media Elements are present in HTML5:

1. <audio> tag : For playing audio.
2. <video> tag : For playing video.
3. <source> tag : For media resources for media elements.
4. <embed> tag : For embedded content.
5. <track> tag : For text tracks used in media players.

Explain various HTML list tags.

In HTML we can list the element in two ways:

1. Ordered list : In this list item are marked with numbers.
<li> first item </li>
<li>second item </li></ol>

Display as:
1. First item
2. Second item.

2. Unordered Lists : In this item are marked with bullets.
<li> first item</li>
<li>second item </li></ul>

Display as:
- First item
- Second item.

Explain HTML background.

There are two types of background in HTML:

1. Colored Background : In this the background of the html is colored.
The Syntax is:
<body bgcolor = “red”>

The value of the bgcolor can be set in three ways by hexadecimal number, an RGB value and Color name.

<body bgcolor = “black”>
<body bgcolor = “rgb(0,0,0)”>
<body bgcolor = “#000000”>

2. Image Background : In this we set the background of the website by an image. Syntax used for this is :
<body background=”study.gif”>

What is CSS?

CSS stands for Cascading Style Sheets. By using CSS with HTML we can change the look of the web page by changing the font size and color of the font. CSS plays an important role in building the website. Well written CSS file can be used to change the presentation of each web page. By including only one CSS file. It gives web site developer and user more control over the web pages.

What is difference between HTML and HTML5?

The differences between HTML and HTML5 are:

1. Document of HTML is very large as compare to the HTML5.
2. Audio and Video tags are not present in HTML whereas HTML5 contains audio and video tags.
3. Vector technology is not integral part of HTML whereas HTML5 Vector technology is the integral part of it.
4. HTML supported by all old browsers whereas HTML5 is supported by new browser.
5. In HTML web sockets are not available whereas in HTML5 Full duplex communication channel is present.

How to insert Javascript in HTML?

We can insert JavaScript in HTML using <Script tag>. JavaScript can be enclosed in <script type = text/javascript> and ending with </script>.

        <script type="text/javascript">

What is the Use of SPAN in HTML and give one example?

SPAN : Used for the following things:

1. Highlight the any color text
2. For adding colored text
3. For adding background image to text.

<span style="color:#000000;">
In this page we use span.

What are the different way in which website layout can be made?

Website layout describes how the webpage of the website will look. It describes the content that has to be placed in columns i.e. it can be either one or many columns. There are two ways in which different layout can be created and these are called as using table method or using div method.

There are basically two tags that are used <table> and <div>.
<table> : Using this is the simplest way to create a layout.

The example code is given as:
<table width="500" border="0">
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title</h1>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
This is my page</td>

<div> : It is used as a block element and is defined to group HTML elements together in one. The <div> tag is used to create multiple layouts.

The sample code is given as:
<div id="container" style="width:500px">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<b>Menu</b><br />

What is the importance of Doctype in HTML?

Doctype tag is not a HTML tag, it is just an instruction that is passed to the web browser to check for the information that is being provided by the markup language in which the page is written. Doctype is sometimes referred as Document type definition (DTD) that describes some rules that has to be followed while writing the markup language so to make the web browser understand the language and the content correctly. Doctype is very important to be placed in the beginning of the HTML and before the <HTML> tag to allow easy rendering of the pages that are used.

Differentiate different types of Doctypes from one another

Doctype helps the web browser to correctly render the web pages. There are different types of Doctype that are available and they are as follows:

1. Strict Doctype : It consists of all the HTML elements and it is also known as DTD (Document type definition) but it doesn't include the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this.
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. Transitional Doctype : It consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this.
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3. Frameset Doctype : It consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also allowed in this.
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Why it is important to set the meta information?

Metadata is the data about the data or the information about the data. There is a tag <meta> that is being provided for the HTML document. This information won't be displayed anywhere and will not be visible to the user. It will be parsable by the machine which will parse it according to the requirement. It consists of the elements that are related to the page description, keywords, document related element. The tag that is being used resides in the <head> section in HTML. The meta information is being used by the web browser or by the search engines to rank and let the user find the pages easily.
The meta information is being written as:
<meta name="description" content="Here you will get everything" />

What are the different types of entities in HTML?

The different types of entities that are present in HTML are < (less than) or > (greater then). It allows the special or the reserved characters are matched with the source code and then it is saved.
The sample code is being given by:

There is always a concept associated with it that will create more simpler provision to avoid the spaces that are being coming in between the characters or the text.

What does the elements mean in syntax given for URL in HTML?

URL stands for Uniform Resource locater. This helps just like the Internet pooling concept where the people recognize themselves and others people connected together with each other. URL allows a document to be located on World Wide Web (www).
The example of the URL is as follows with the complete element:

This code has got with no meaning but there are some elements that are defined:

scheme - Is the type of internet service. In this HTTP can be used which has to most common type.
Host – It is used to control the host name and fetch the information from other templates as well.
Domain – It defines the internet domain that is google.com.
:port – It defines the port number on the Host where the default port that is being used is 80.
path – This defines the path of the server that consists of a hierarchical directory structure.
filename - It defines the unique name for the file or the document that saves it.

How to add helper plug-ins on the webpage using HTML?

A helper application is a program that is used in the browser to help the users with lots of information that is not being provided with the applications. These helper application is known as Plug-ins. Helper application includes audio, video, etc. The tag that is used to embed is <object>. Helper application allows easy incorporation of audio and video that is controlled by the user. Helper application allow the control over the volume setting and other functions like play, stop,etc.
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.career.com/qtplugin.cab">
<param name="src" value="hello.wav"/>
<param name="controller" value="true"/>

What is the purpose of canvas in HTML?

Canvas is an element that is used for the graphics for the web page. It uses JavaScript to bring the graphics functionality live. It allows easy way to draw the graphics and use different types of tools to create drawing on the web page. Canvas is just a rectangular area that controls the pixel of every element that is used in the web page. Canvas uses methods like paths, circles, etc.
The canvas element will be used as follows:
<canvas id="can" width="200" height="100"></canvas>

The canvas element includes id, width and height settings and with the javascript it gets used like:
<script type="text/javascript">
var c=document.getElementById("can");
var ctx=c.getContext("2d");

What is the purpose of iframe in HTML?

Iframe is called as inline frame that places one HTML document in a frame. It is different from the object element as the inline frame can be made in the target frame. The target frame consists of the links that is defined by other elements used in the web page. Iframe is used to focus on printing or viewing of the source. Iframe can be used by the user in those browser that supports it. If they have used iframe also then the incompatible browser won't display the actual but display of the alternative text will take place. The content of the iframe is being written in between <iframe>.........</iframe>.
The sample example is given below:
<iframe src="http://www.abc.com"></iframe>

What are the different types of frames tags used in HTML?

Frames allow the display of the document visually. It allows the window to be split into segments that can contain multiple different documents. It can utilize many resources and repeat some parts of the layout that can be used in a frame.

Frames consists of different types of tags and they are as follows:

1. <frameset>...</frameset> : It consists of the frames that includes the layout using the attributes of rows and cols.
2. <frame> or <frame/> : It consists of a single frame and gets included within the frameset. It is always come up with a src attribute that provides the source that has to be shown in a particular frame.
3. <noframes>...</noframes> : It consists of the normal HTML content that is used to show no frames.
4. <iframe>...</iframe> : It consists of internal frame that will contain the src attribute to include the frame that is internal to a particular region.

Write a code to change the color of the background or text? Explain the elements involved in it.

To change the color of the background of the body or the text there is a <body> tag that has to be included where there are some elements that has to be used to set the properties of it.
The code is as follows:
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#000000" VLINK="#000000" ALINK="#ffff00">

The elements that are used in this tag is as follows:

1. BGCOLOR : Represents the background color which will be applied totally on the body if there is no other bgcolor used with any other tag internally.
2. TEXT : Represents the color of the text that will be applied to the complete text present in the body.
3. LINK : Represents the color of all the text links that are present inside the body.
4. VLINK : Represents the color of the links that has already been visited.
5. ALINK : Represents the color of the text links that will change when the page accessed will be active.

What is the main function of <pre> tag in HTML?

<pre> tag defines the pre-formatted text that is used to display the text with the fixed width and uses a predefined fonts and it keeps both spaces and line breaks separate and show the text as it is.
The code that can be used to display the text that can be written in whatever way the user wants is as follows:
Text in a pre element ----//
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks

How can tables be made nested in HTML?

Tables can be made nested by making it come in another table. This consists of many attributes and tags that can be used in nesting the tables.

The tags that are used for the table is as follows:

<TR> : This is the tag that has to be written after the <table> tag and before any other tags. This makes a table row that store the data elements.
<TD> : This tag can be used anywhere and it consists of the data that has to come on the website.
<TH> : This tag consists of the table heading.

The sample code will explain the above explanation much better:
<td>this is the first cell</td>
<td>this is the second cell
<table> <!--Starting of the table that is embedded inside another table-->
<td>this is the first cell second table</td>
<td>this is the second cell of second table</td>

How can tables be used inside a form? Explain with an example.

A form can consist of the table and its properties to display it on the web page. The form is placed with the <td> tag that includes the data of the table. This can also be used to position the form in relation to the other content. The table will be added within the form.

The code is given as:
<TH>This is the table heading</TH>
<TD><INPUT TYPE="text" NAME="account"></TD>
<TH>This is another heading for a button</TH>
<TD><INPUT TYPE="password" NAME="password"></TD>
<TD> </TD>
<TD><INPUT TYPE="submit" NAME="Log On"></TD>

In this the form elements are getting used inside the table tags like <input type>, <text area>, etc. The form input will be given using the <td> tag that displays the table data and related information accordingly.

What are the different ways to use different colors for different links or same link?

The presentation is being done by CSS that is used with the HTML, to give the style to the HTML content. This is called as style sheet. The links can be specified in different colors by the following way:
a:link {color: blue; background: white}
a:visited {color: purple; background: white}
a:active {color: red; background: white}

This is the CSS properties that is being defined to set the color for the links that are active, visited and normal link. User can use the class attribute in the tags like <a> to use it and see the change in the link color. It is shown as:
<a class="exp" href="[URL]">example of the link</a>

The style sheet can be modified according to the code that is being written. The coding will include:
a.exp:link {color: yellow; background: black}
a.exp:visited {color: white; background: black}
a.exp:active {color: red; background: black}

How to upload files using HTML to website?

The uploading of files requires some necessary configuration like :An HTTP server that acts as a transaction between the user and the server. Access to the directory of cgi-bin that consists of the receiving script.

There are some scripts that are already available. Form for the implementation and the coding of it will be like:
<form method="post" enctype="multipart/form-data" action="up.cgi">
The form that has to be uploaded will be done by the following given code:
<input type=file name=upload><br>
This tag will contain the file name that has to be uploaded on the website.
Any remarks about the file will be written like:
<input type=text name=remark><br>
<input type=submit value=Press> This form will allow user to upload their own file in an easy way.

Write a program to include the custom button with the form

Custom button can be given just by putting the image with the button or by using any other button then normal. Usually the button is being made by the <input> tag like:
<input type= “submit” value= submit>

An image can be used for the custom button as an input type like:
<input type = ”image” value = submit>

The input in the image format defines the graphical button that has to be placed in the form of submit on the web site. Image input type return the x-y coordinates rather than the normal text as a value. The attributes of Value and Alt will be used to set the name value attribute. The example for the same will be given as:
<input type="image" name="submit" alt="submit" value="submit" src="submit.jpg">

How to prevent the display of “Getting framed in HTML?

Getting framed refers to the document that is being displayed in someone else's frameset in your HTML. This will be password protected and the permissions has to be taken before inserting the frameset. The framing of the document can be avoided by using TARGET=_top applied to all the links that will lead to the document that are outside the scope of a particular user without permission. A javaScript can be used that will automatically handle the request to remove the existing framesets. This can be given as:
<script type="text/javascript">
if (top.frames.length!=0)
    if (window.location.href.replace)

How to include a frameset inside another frameset?

One frameset can be defined inside another frameset if the accessing permission are provided directly. The frameset can be stored by using the JavaScript in the document that is being written by the user and the script is as follows:
<SCRIPT TYPE="text/javascript">
if (parent.location.href == self.location.href)
    if (window.location.href.replace)
       // causes problems with back button, but works
       window.location.href = 'frame.html';

The anchor <a> tag is used to link the frameset that can be used to restore the frames that has been stored.
<A HREF="frameset.html" TARGET="_top">Restore the frame

There is always a separate frameset document written for every content document. The frameset documents are generated automatically. The content document can be linked separately rather than linking them together.

How to update two frames at the same time using HTML?

To update the two frames at the same time there is a requirement for the HTML based techniques that links the documents with a new frameset document. It specifies a new frames that can be combined with other frames. There is a JavaScript that will be used to link the updated frame and the method that will be used is onClick(). HTML based technique allow the new frameset document with the attribute of TARGET=_top. In this the first frameset document uses a secondary frameset document that will be defined as the nested frameset. The following code explains it further:
<frameset cols="*,3*">
<frame src="first.html" name="first_frameset">
<frame src="second.html" name="sec_frameset">

The link that is given in the TARGET= “sec_frameset” attribute it replaces all the frames that is defined as second.html.
26 HTML5 Interview Questions and Answers - Freshers, Experienced
HTML5 interview questions and answers - What are the new features provided in HTML5?, What are the various elements provided by HTML 5 for media content?, What are the new Form elements made available in HTML5? etc..........
20 Ajax Interview Questions and Answers
Ajax interview questions and answers for freshers/beginners and experienced. Our advanced Ajax interview questions are very useful for experienced Ajax professionals. We have Ajax interview questions answers in pdf format, one can easily download it.
AJAX and problem it solve
Ajax: It is a short for Asynchronous JavaScript and XML. It solves the problem of unnecessary data transfers and allows asynchronous processing and avoids unnecessary processing to be done by server.
Post your comment
Discussion Board
HTML interview questions
All questions are very good. Can we download all questions?
Please provide us in PDF or doc format.
HTML interview 10-12-2017
Error in tag written by you
This is a your question

What are the different types of frames tags used in HTML?
You are showing no 2 tag ..... which is wrong
Write is ......
Kanchan kumar 03-13-2017
for a webpage, html can represents
1.animation on a webpage content
2.web address
deepa 10-6-2016
html can represents
1. animation on webpage content,
2.webpage address.
pls tell me the ans.
deepa 10-6-2016
These TEST are good,but some some more content to be choosed from......
varuna 06-28-2016
html test
these test are good but need to be of still good questions and marking system
varuna 06-28-2016
Web technology
1.w3c stands for?
2.who is the maker of www?
3.create the table within the table in html?
4.how will you load multiple pages on a one page?
5.what is meta tag?
6.difference between div tag and frame?
7.what does span tag to?
8.what is the latest web version?
9.can we add videos on our html page?
10.what is target attribute? What is the destination of target attribute?
Shubham jain 10-20-2015
QUESTION - A few lines in an HTML paragraph are to be formatted differently from the rest of the lines. Which tag will assist in this?
Correct answer is span
Greg Ledger 05-14-2015