HTML & HTML 5 Interview Questions and Answers

Posted On:July 8, 2021, Posted By: Latest Interview Questions, Views: 1401, Rating :

Best HTML & HTML 5 Interview Questions and Answers PDF

1) What is HTML?

HTML (HyperText Markup Language) is a markup language for web pages. So HTML will have HTML elements, which is enclosed in angular brackets.
 
2) What are tags in HTML?
Tags are content in HTML to format the HTML properly. It uses symbols like “<” and “>” to enclose the tags. “/” symbol is used for closing the tag.
 
3) What is XHTML?
XHTML will follow XML rules. So it means it is a case sensitive. HTML pages can be changed to XHTML. So during this process we have to find the images, line breaks etc. to include the closing tags. XHTML is compatible with XML.
 
4) What is DHTML?
DHTML is a combination of HTML and client side scripting languages like – javascript, css etc. Good example for this would be navigation menu in web page.
 
5) How we can insert comment in HTML?
Below is the example for writing the comment in HTML –
<!– MY SAMPLE COMMENT –>
 
6) What is DOCTYPE?
Every HTML elements should begin with this declaration of DOCTYPE. This is used to specify the version of HTML used in the given document.
<!DOCTYPE html>
 
7) Which editors I can use for HTML development?
Below are the list of editors which I can use for HTML development –
Dreamweaver.
CoffeeCup HTML Editor.
Microsoft Expression Web.
NotePad ++.
TextEdit etc.
 
8) Explain HTML Headings?
In HTML, title or subtitle can be given from heading tags. So the size of the text depends on heading tag. Eg:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 
9) How to align <table> right/left in HTML?
If you are using <table> tag, then “align” attribute can be used to align the table to right/left. Below is the sample to align the table to right/left.
<table align=”right”>
<table align=”left”>
 
10) How we can display <table> at the center of the webpage?
Below is the example to show it –
 <div style=”margin-left: auto; margin-right: auto;”>
<table>…</table>
</div>
 
11) How to use <form> in HTML?
Below is the syntax of <form> in HTML form –
<form action=”[URL]”>
When form is submitted then form data has been sent to URL, which is specified in the URL attribute. URL is referred to server side program.
 
12) What is hyperlink in HTML?
Hyperlinks can be used in images and for texts. Below is the examples of using hyperlinks –
<a href=”My URL “>…</a>
 
13) Explain <ul> in HTML?
In HTML <ul> defined for unordered list. <li> tags will be used along with <ul>.
<ul>
<li>Add</li>
<li>Subtract</li>
<li>Divide</li>
</ul>
 
14) Explain type and value attributes of <li> in HTML?
Type attribute in <li> is used to specify the style of bullet point of an item in list.
Value attribute in <li> tag is used to set the value of list item in list.
Syntax for type and value of <li>
<li type=”a”>Add</li>
<li value=”100″>Add</li>
 
15) How to set the focus to the element in HTML?
Below is the sample code to set the focus for HTML element –
<input type=”text” id=”mytestinput” name=”mytestinput” …>
<script type=”text/javascript”>
document.myform.mytestinput.focus();
</script>
 
16) Is it possible to have multiple actions in a same form?
No. It is not possible to have multiple actions in a single form tag.
 
17) How to redirect to new page on click of button in HTML?
Below is the sample code to redirect to new page on post and on click of button –
<form action=”your url”>
<input type=”submit” value=”MyClick” =/>
</form>
 
18) How we can have different cells in each row in <table>?
We can have “td” tags in each row <tr>.
Below is the sample code for using <td> in <tr> –
<TR>
<TD>Test Column 1</TD>
<TD>Test Column 2</TD>
</TR>
 
19) What is the difference between <div> and <span> in HTML?
<div> is like a container and it is like having <br> (line break) tag before and after the block.
<span> is a inline and it is used for small HTML like paragraph.
 
20) Which browsers have a support to HTML 5?
Almost all latest browsers have a support for HTML which includes Chrome, FireFox, IE etc.
 
21) Will “Width” property uses full width of browser?
Browsers leave narrow space margin between content and display area. That space is left to display scroll area in case the document crosses specific height.
 
22) How to open mail window from HTML ?
Mail window can be opened using link : “mailto”.
 
23) Explain Bulleted lists in HTML?
Bulleted Lists: <ul> always begin with bulleted indented list. Along with ‘<ul>’ tag ‘<li>’ tags are also used as below –
<ul>
<li> Add</li>
<li> Subtract</li>
<li> Multiple </li>
<li> Divide </li>
</ul>
 
24) Explain Numbered lists in HTML?
Numbered Lists: <ol> always begin with numbered indented list. Along with ‘<ol>’ tag ‘<li>’ tags are also used as below –
<ol>
<li> Add</li>
<li> Subtract</li>
<li> Multiple </li>
<li> Divide </li>
</ol>
 
25) How to set a link to image in HTML?
Below is the example of setting link to image in HTML –
<a href=”URL”><img src=… alt=…></a>
 
26) Explain “<article>” tag in HTML5?
This tag is used to specify independent and self contained content. Below is the example of the same –
<article>Test Content </article>
 
27) Explain HTML formatting elements?
Tags like <i>, <b>, <strong> etc. can be used to format HTML. Below is the example given for the same –
<b>Test Content</b>
<i>Test Content</i>
<strong>Test Content</strong>
 
28) Explain image map?
Image map is used to link to different web pages using an image.
 
29) How we can insert copy right on browser page?
Type – “&copy; or & #169;” in HTML file.
 
30) Explain Alternate text in image mapping?
When we are using image maps, it will be confusing and always difficult to determine, to which hotspot the link corresponds. So using alternate text this this problem can be avoided.
 
31) Will old HTML files work in modern browsers?
Yes. Old HTML files are still HTML compliant.
 
32) Explain bullet types in HTML?
Mainly bullet types like – “alphabetical” and “Roman numerals” and “type” attribute can be set to – “circle”, “square” or “disc”.
 
33) How we can create multi colored text in a webpage?
We can create multi colored text using “color” attribute in font as shown below –
<font color=”yourcolor”>Text content</font>
 
34) Are there any advantages of grouping checkboxes in HTML?
Yes there are advantages for placing the checkboxes in group.
One checkbox does not affect the other. In HTML we have an option to specify the name for checkboxes. So it’s easy to identify them and web page can have multiple checkbox groups.
 
35) Explain applets?
Applet can be defined as – “It’s a small program which can be embedded in webpages for doing some functionalities”. Functionalities include – info processing and animations.
 
36) How to set colors to borders in HTML?
We can set the colors for borders using stylesheets or by using style property – “border-color”.
 
37) How to link different web page from one webpage in HTML?
Below is the example given to link to different web page –
<a href=”differentwebpageurl”>yourtext</a>
 
38) Explain marquee in HTML?
Marquee is used to scroll the text across the web page this can be seen mainly in news websites. Have a look at the example given below –
<marquee> your text </marquee>
 
39) Why to use <br> tags in HTML?
<br> tags are line breakers. Whenever there is a requirement of putting single line breaker then this tag is used.
 
40) What is the difference between active link and normal link in HTML?
Default color of active and normal links are blue. When mouse pointer is moved on active link it changes the symbol to cursor to hand and rest of the links are considered as normal links and It’s a normal behavior of browsers.
 
41) How to add image in the background of webpage in HTML?
Below is the example of adding image in webpage –
<body background = “yourtestimage.gif”>
 
42) Can I open external CSS file in browser?
No. If you are trying to open the external CSS file in browser it will not be able to open it because of its extension. So we have to link external CSS file in webpage using <link> tag.
 
43) What you mean by “Semantic HTML”?
It’s an coding style where all tags embody the text what it tries to convey. Tags like – “<i></i>”, “<b></b>” should not be used in semantic HTML. So instead we have to use “<strong></strong>” and “<em></em>”. So these will have same functionalities as italic and bold.
 
44) What is quirks mode in HTML?
It is the default compatibility mode and will be different for different browsers.
 
45) How many HTML tags are essential for a simple web page in HTML?
A very simple web page will have 3 tags, which includes – <html>, <head>, <body>.
 
46) What are the essential attributes in image tag in HTML?
“src” and “alt” are the essential attributes in image tag.
 
47) What is the difference between “frame” and “div” in HTML?
<frame> tag is used to create a division in a web page and this has to be used within
<frameset>. Since now a days we are no longer using <frameset> instead we are using
<iframe>, which is similar in behavior as <frameset>.
<div> is the container for group of controls.
 
48) What is the difference between HTML5 and HTML?
HTML is simply laying out images and texts in a webpage. After some updates have resulted the support to semantic data.
HTML5 is seems to be different from HTML. It tried to be an application platform. It has support for audio, video and interactive 3d videos.
 
49) List out some basic elements in HTML5?
Below are the some list of tags introduced in HTML5 –
 
Simple Text
<header>, <footer>, <article>, <section>, <nav>, <summary> etc.
 
50) Which elements have been deleted in HTML5?
Below are some list of elements which are no longer used –
<frameset>, <frame>, <applet>, <basefront> etc.
 
51) List out media related elements in HTML5?
Below are the list of media related elements –
<audio>, <video>, <embed>, <source> etc.
 
52) List out image related elements in HTML5?
Below are the list of image related elements –
<canvas>, <picture> and WebGL.
 
53) What is the difference between Canvas and SVG?
Canvas element used to manipulate 2D pixels whereas SVG works in 3D and 2D vectors.
 
54) List out new input elements in HTML5?
Below are the list of new input elements –
 
datetime
datalist
range
time
week
url
email etc.
 
55) Explain data attributes in HTML5?
Data attributes are a new addition in HTML5. It is used to assign custom data to an element. It has been built to store private or sensitive data.
 
56) Explain Sencha and Bootstrap support with HTML5?
Both these are development frameworks which is used to integrate HTML5, Javascript and CSS3. Difference between Sencha and others are all commingled in HTML5 code whereas bootstrap decoupled from HTML and CSS.
 
57) What are Web Workers?
Web workers are scripts which runs in the background and has no relation with user interface.
 
58) What is session storage?
Session storage is the new concept in HTML5, which is used to store the data in browser. The data will be stored till the browser tab is closed.
 
59) What is local storage?
Local storage also used to store the data in browser’s cache. Before local storage, we were using cookies to store the data in client side in a text file. Local storage is now introduced in HTML5 and it lets us to store the large amount of data in browser.
 
60) List out new APIs introduced in HTML5?
Below are the list of APIs introduced in HTML5 –
Text track API
Media API
App Cache API
Data Transfer API
Validation API
History API.
 
61) Explain caching in HTML5 and HTML?
Application Cache has been introduced in HTML5. It creates offline version of a webpage and stores the details such as Images, CSS, Javascript locally.
 
62) Is local storage have a lifetime to clear the stored data?
No. It does not have a lifetime to clear the stored data by itself. We have to manually clear the stored data in localstorage.
 
63) Explain Web SQL?
Web SQL is a local RDBMS which is stored in a browser and it is a structured relational database and it lets us to fire the given query.
 
64) How we can fire the query in Web SQL?
Below is the example for firing a query in Web SQL –
Use function “openDatabase” to open a web SQL database. And use function – “executeSql” to execute the query in Web SQL.
 
65) Define Application Cache fallback?
 
Below is the sample code for application cache fallback –
 
<a name=”fallback-Application”>FALLBACK: /Myhome/ /MyTesthomeoffline.html </a></pre>
<h2><a name=”fallback-Application”></a>
 
66) How to use output element? Give an example.
Output element can be useful for a scenario where calculation involved. Below is the example –
 
<form onsubmit=”return false” &ouml;ninput=”output.value = parseInt(myfirstnum.value) + parseInt(mysecondnum.value)”>
<input name=”myfirstnum” type=”number”> +
<input name=”mysecondnum” type=”number”> =
<output name=”output” />
</form>
 
67) How we can draw rectangle using SVG in HTML5?
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
<rect style=”fill: rgb(10, 10, 255); stroke-width: 1px; stroke: rgb(0, 10, 0);” height=”[object SVGAnimatedLength]” width=”[object SVGAnimatedLength]”>
</rect>
 
68) How to remove/clear the data from local storage?
Below is the sample code to remove/clear the stored data from local storage –
 
localStorage.removeItem(‘youritem’) — remove the item you added.
localStorage.clear() – clear all stored data from localstorage.
 
69) What methods are used to draw straight line using canvas?
Below are the list of methods used to draw straight line –
moveTo(a,b)
lineTo(a,b)
stroke()
 
70) Why to use method – “lineTo” in canvas?
This method is used to draw the line in coordinates. Below is the example for the same –
lineTo(a,b) – draws a line from starting point ‘a’ to ending point ‘b’.
 
71) What method is used to draw an image using canvas?
“drawImage(image,a,b)” method is used to draw the image in canvas.
 
72) How we can make an image draggable?
Below is the example code to make an image draggable –
<img draggable=”true”>
 
73) How we can get the geographical location of the user in HTML5?
By using geographical API, we can get the location of the user – “getCurrentPosition()” method is used for the same purpose.
 
74) List out the new form attributes in HTML5?
Below are the new form attributes in HTML5 –
AutoComplete
NoValidate
 
75) Explain “NoValidate” attribute of HTML5?
“NoValidate” attribute is a Boolean attribute and this attribute signifies form data should be validated or not when submitted.
 
76) Explain “AutoComplete” attribute of HTML5?
“AutoComplete” attribute is used to signify the autocomplete feature should be present or not in the form elements. When it is “ON” then browser will fill the values, which is filled by the earlier users.
 
77) List out the new input attributes in HTML5?
Below are the new input attributes in HTML5 –
AutoFocus
Form
FormMethod
FormNoValidate
Height and Width
Min and Max
Placeholder
Required
 
78) Explain “AutoFocus” attribute of HTML5?
“AutoFocus” attribute is a Boolean attribute and when it is present in input field then it means “<input>” element will get focused when page is loaded.
 
79) Explain “FormMethod” attribute of HTML5?
“FormMethod” is used to define the HTTP method to send the form data to action URL. It can be used either with “type=”image”” or with “type=”submit””.
 
80) Explain “FormNoValidate” attribute of HTML5?
“FormNoValidate” attribute is a Boolean attribute and this attribute again used with “type=”submit”” and it is used to specify “<input>” element should not be validated on submission.
 
81) Explain “FormTarget” attribute of HTML5?
“FormTarget” attribute is used to specify the location where to display the received response after form submit.
 
82) Why to use “pattern” attribute in HTML5?
“Pattern” attribute is used to specify the regular expression. If it is used in “<input>” then the entered value in “<input>” will be validated using the regular expression.
 
83) What are the improvements done for Flash in HTML5?
In devices like iPad, iPhone etc. there is no support for Flash so it is a major problem as we can not install flash plugins in these devices so since HTML5 is universally accepted it has elements or tags which will behave in the same way as in Flash.
 
84) Why to use “figure” tag in HTML5?
This tag is used to specify content like “diagrams”, “photos”, “illustrations” etc.
 
85) Why to use “figcaption” tag in HTML5?
“figcaption” tag is used to provide the caption for figure elements.
 
86) How we can open a link in new tab?
To open a link in new tab we can use below code in HTML –
<a href=”/your url” target=”_blank”>your text</a>
 
87) How we can change the size of image in HTML?
We can set height and width attributes in image tag –
<img src=”image url” height=”200px” width=”300px” alt=”sample text”/>
 
88) How to use javascript in HTML?
By adding script tag in HTML like below –
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
Alert(‘your message to display’);
</script>
</body>
</html>
 
89) What is “get” and “post” methods in HTML?
“get” and “post” methods are used to send data as a part of request to server. “get” is used to get the resource from server whereas “post” is used to submit the data to server.
 
90) Is it better to use iframe?
No. Iframe basically used to embed the data into HTML document and it is recommended to avoid iframes. So in HTML5 there is no support for iframes.
 
91) How to increase the font size in HTML?
We can increase the font size using “size” attribute in font tag. Below is the sample code given –
<font size=”10”/>
 
92) What is manifest file in HTML5?
Manifest file is used to convey a message to the browser about what to be stored and what not as a part of caching in HTML5.
 
93) What is “ruby” tag in HTML5?
“ruby” tag is used to define the ruby tags in HTML5 for Asian typography.
 
94) How we can display our web page icon in browser using HTML?
Below is the sample HTML code for displaying the webpage icon –
<link rel=”icon” href=”your icon image”/>
 
95) How we can refer css file in a web page in HTML?
<link rel=”stylesheet” href=”your CSS file path”/>
 
96) How we can create dropdown list control in HTML?
<select name=”your dropdown name” id=”your dropdown id”>
<option> Option-1</option>
……
</select>
 
97) How we can create listbox control in HTML?
<select name=”your listbox name” id=”your listbox id” size=”10” multiple=”multiple“>
<option> mytestoption1</option>
……
</select>
Here “multiple” is used to select multiple options from the listbox.
 
98) What property is used to set the speed of “marquee” in HTML?
Property – “scrollamount” property we can set the speed of marquee in HTML. “low” / “high” can be set to this property.
“low” – less speed
“high” – high speed.
 
99) How we can restrict the browser not to show the previous values entered in textbox?
Set value for property “AutoComplete” to “Off”.
 
100) What is the use of “<fieldset>” tag in HTML?
“<fieldset>” tag is used in HTML for grouping the elements in a form.
<form>
<fieldset>
<legend>….</legend>
</fieldset>
</form>