HTML Interview Questions - Electronics Post

Q1. Who is invented html?

Tim Berners-Lee is known as father of HTML. The first available description of HTML was a document called “HTML Tags” proposed by Tim in late 1991.

Q2. Tell me all about html version with years?

Since the early days of the web, there have been many versions of HTML:

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

Q3. What is Hyper Text?

Hyper Text simply means “Text within Text”.

Q4. What is Markup language?

A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.

Q5. What is HTML?

HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web.

Q6. Brief describe what is Doctype, html tag, body, h1 and p tag?

DOCTYPE: It defines the document type.

Html: Text between html tag describes the web document.

body: Text between body tag describes the body content of the page that is visible to the end user.

h1: Text between h1 tag describes the heading of the webpage.

p: Text between p tag describes the paragraph of the webpage.

Q7. What are Difference between html and html5?

Html	Html5
Doctype declaration in Html is too longer<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01// EN” “http://www.w3.org/TR/ html4/strict.dtd”>	DOCTYPE declaration in Html5 is very simple “<!DOCTYPE html>
character encoding in Html is also longer<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>	character encoding (charset) declaration is also very simple
Audio and Video are not part of HTML4	Audio and Videos are integral part of HTML5 e.g.<audio> and <video> tags.
Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc	Vector graphics is integral part of HTML5 e.g. SVG and canvas
It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.	JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)
Html5 use cookies.	It provides local storage in place of cookies.
Not possible to draw shapes like circle, rectangle, triangle.	Using Html5 you can draw shapes like circle, rectangle, triangle.
Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.	Allows JavaScript to run in background. This is possible due to JS Web worked API in HTML5.
Works with all old browsers.	Supported by all new browsers.

Q8. What Is An HTML Editor?

An HTML editor is a specialized piece of software that assists in the creation of HTML code. Similar to text editors such as Notepad and TextEdit, HTML editors allow users to enter raw text.

Q9. What is a WYSIWYG Editor?

WYSIWYG stands for “What You See Is What You Get”. When an HTML editor is in WYSIWYG mode, the HTML page is rendered as though it is being viewed with a web browser. The only difference is that, the web developer can edit the page at the same time.

Q10. Extension of HTML?

.html and .htm

Q11. Difference are the between <th> and <td> tag?

The <td> tag, or “table data” tag, creates table cells within a table row in an HTML table. This is the HTML tag that contains any text and images. Basically, this is the workhouse tags of your table. The tags will contain the content of the HTML table

<td> — table data — A data cell in a <table>.

The <th> tag, or “table header”, is similar to the <td> in many ways. It can contain the same kind of information (although you wouldn’t put an image in a <th>), but it defines that specific cell as a table header.

<th> — table header — A header cell in a <table>.

Q12. What is the code of button?

<input type=”button”> Click Here <button>

Q13. Where we use external code of JavaScript and CSS in html?

External code of JavaScript and CSS write down in within HTML Head Tag.

Q14. What does colspan do?

Allow a single table cell to span the width of more than one cell or column.

Q15. What does rowspan do?

Allow a single table cell to span the height of more than one cell or row.

<th rowspan=”2″>Favorite</th>

Q16. What is HTML Caption tag?

The HTML <caption> tag is used for creating captions for the <table> element.

A <caption> element represents the title of the table.

<table>
<caption>Table caption</caption>
<tr>
<td>Left cell</td>
<td>Right cell</td>
</tr>
</table>

Q17. What is the Rang of heading tag?

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the biggest heading.

<h6> defines the small heading.

Q18. What is block level and inline element and give me some examples?

In general, HTML elements can be divided into two categories: block level and inline elements.

HTML Block level elements

1. HTML block level elements can appear in the body of an HTML page.

2. It can contain another block level as well as inline elements.

3. By default, block-level elements begin on new lines.

4. Block level elements create larger structures (than inline elements).

List of block level elements

p
h1, h2, h3, h4, h5, h6
ol, ul
pre
address
blockquote
dl
div
fieldset
form
hr
noscript
table

HTML inline level elements

1. HTML inline level elements can appear in the body of an HTML page.

2. It can contain data and other inline elements.

3. By default, inline elements do not begin on new lines.

4. inline elements create shorter structures (than block level elements).

List of inline elements

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

Q19. Are HTML tags case sensitive?

No!

Q20. Which browsers support HTML5?

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

Q21. Tell me HTML empty tag or Self-Closing Tags?

<area />
<base />
<br />
<col />
<command />
<embed />
<hr />
<img />
<input />
<keygen />
<link />
<meta />
<param />
<source />
<track />
<wbr />

Q22. What is HTML frame?

“Iframe” can be used to embed another page’s content in the current page, and it can also be used for a scrollable window inside a window.

HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

Q23. What are Advantages and Disadvantages of HTML frame?

Advantage

Certain parts of the interface are always on the screen.
Can avoid retyping common sections of multiple web pages.
A convenient way to mix text oriented HTML with java applets

Disadvantage

The meaning of the “BACK” and “FORWARD” buttons are be confusing
Poorly designed frames can get the user lost
Hard to find real URL of a page you want
Some old browsers do not support frame
Security
HTML <frame> Tag. Not Supported in HTML5

Q24. What is HTML form and explain HTML form Element?

A form is an area that can contain form elements. The HTML <form> element defines a form that is used to collect user input.

An HTML form contains form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Q25. What is GET and POST Method and tell me which is secure for form?

The Get method

The Get method sends the data captured by form elements to the web server encoded into the URL,which points to web server .The data captured in the form elements is appended to the URL.this technique is used when there there is a small amount of data that can be sent back to the web server. By using this method 1024 bytes of data can be sent.

The POST method

The POST method sends the data captured by form elements back to the web server as a stream bit-stream of data .When there is a large amount of data to be sent back to web server,this method is used. POST method is secure.

Q26. If the method attributes is not specified within the HTML form tags. Then which method used by default?

If the method attributes is not specified within the <form>and </form> tags, the default method used by the browser to sent data back to the web server is the GET method.

Q27. How much default HTML text field of form element?

In most browsers, the width of the text field is 20 characters by default.

Q28. What are Tags?

HTML tags are composed of three things: opening tag, content and ending tag. Some tags are unclosed tags.

HTML documents are made of two things: content, and tags

Content is placed between tags to display data on the web page. .

Q29. Give me HTML Tag Examples.

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>

Q30. Do all HTML tags have end tag?

No. There are some HTML tags that don’t need a closing tag. For example: <image> tag, <br>

Q31. Do all HTML tags come in pair?

No, there are single HTML tags that does not need a closing tag. Examples are the <img> tag and <br> tags.

Q32. How do you insert a comment in html?

Comments in html begins with “<!–“nd ends with “–>”. For example:

<!– A SAMPLE COMMENT –>

Q33. What is the advantage of collapsing white space?

White spaces are blank sequence of space characters, which is actually treated as a single space character in html. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the html code into a much more readable format.

Q34. How do you insert a copyright symbol on a browser page?

To insert the copyright symbol, you need to type © or & #169; in an HTML file

Q35. How do you create links to sections within the same page?

Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named topmost. You then create a separate tag command like <a name=”topmost”> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on “BACK TO TOP”.

Q36. What is the use of using alternative text in image mapping?

When you use image maps, it can easily become confusing and difficult to determine which hotspots corresponds with which links. Using alternative text lets you put a descriptive text on each hotspot link.

Q37. Do older html files work on newer browsers?

Yes, older html files are compliant to the HTML standard. Older files work on the newer browsers, though some features may not work.

Q38. Does a hyperlink apply to text only?

No, hyperlinks can be used on text as well as images. That means you can convert an image into a link that will allow user to link to another page when clicked. Just surround the image within the <a href=” “>…</a> tag combinations.

Q39. How do you create multicolored text in a webpage?

To create text with different colors, use the <font color=”color”>…</font> tags for every character that you want to apply a color. You can use this tag combination as many times as needed, surrounding a single character or an entire word.

Q40. Why are there both numerical and named character entity values?

The numerical values are taken from the ASCII values for the various characters, but these can be difficult to remember. Because of this, named character entity values were created to make it easier for web page designers to use.

Q41. Can a single text link point to two different web pages?

No. The <a> tag can accept only a single href attribute, and it can point to only a single web page.

Q42. What is the difference between the directory and menu lists and the unordered list?

The key differences is that the directory and menu lists do not include attributes for changing the bullet style.

Q43. Do <th> tags always need to come at the start of a row or column?

Any <tr> tag can be changed to a <th> tag. This causes the text contained within the <th> tag to be displayed as bold in the browser. Although <th> tags are mainly used for headings, they do not need to be used exclusively for headings.

Q44. What are HTML Meta Tags?

DOCTYPE, title, link, meta and style

Q45. What are HTML Text Tags?

Q46. What are HTML Link Tags?

Q47. What are HTML Image and Object Tags?

Q48. What are HTML List Tags?

<ul>, <ol>, <li>, <dl>, <dt> and <dd> Q

49. What are HTML Table Tags?

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

Q50. What are HTML Form Tags?

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

Q51. What are some common lists that are used when designing a page?

There are many common lists which are used to design a page. You can choose any or a combination of the following list types:

Ordered list
Unordered list
Menu list
Directory list
Definition list

Q52. What is the difference between HTML elements and tags?

HTML elements communicate to the browser to render text. When the elements are surrounded by brackets <>, they form HTML tags. Most of the time, tags come in pair and surround content.

Q53. What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.

Q54. What is image map?

Image map facilitates you link many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.

Q55. How to insert a copyright symbol on a browser page?

can insert a copyright symbol by using © or © in an HTML file.

Q56. How do you keep list elements straight in an HTML file?

You can keep the list elements straight by using indents.

Q57. Does a hyperlink only apply to text?

No, you can use hyperlinks on text and images both

The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page.

The syntax of HTML anchor tag is given below.

Let’s see an example of HTML anchor tag.

<a href=”second.html”>Click for Second Page</a>

Q58. What is a style sheet?

A style sheet is used to build a consistent, transportable, and well designed style template. You can add these templates on several different web pages.

Q59. Can you create a multi colored text on a web page?

Yes. To create a multicolor text on a web page you can use <font color =”color”> </font> for the specific texts you want to color.

Q60. Is it possible to change the color of the bullet?

The color of the bullet is always the color of the first text of the list. So, if you want to change the color of the bullet, you must change the color of the text.

Q61. What is a marquee?

Marquee is used to put the scrolling text on a web page. You should put the text which you want to scroll within the <marquee>……</marquee> tag.

Q62. How many tags can be used to separate section of texts?

There are three tags used to separate the texts. i.e. usually <br> tag is used to separate line of texts. Other tags are<p> tag and <blockquote> tag.

Q63. How to make a picture a background image of a web page?

To make a picture a background image on a web page, you should put the following tag code after the </head> tag.

Here, replace the “image.gif” with the name of your image file which you want to display on your web page.

Q64. What are empty elements?

HTML elements with no content are called empty elements. For example: <br>, <hr> etc.

Q65. What is the use of span tag? Give one example.

The span tag is used for following things:

For adding color on text

For adding background on text

Highlight any color text etc.

Example:

Q66. What is the use of iframe tag?

An iframe is used to display a web page within a web page.

Syntax: <iframe src=”URL”></iframe>

Example:

HTML5 Interview Questions

Q67. What are the new features provided in HTML5?

Some of the new features provided in HTML5 are:

1. It provides support for local storage

2. New form controls, like calendar, date, time, email, url, search

3. <canvas> element is provided to facilitate 2D drawing

4. The <video> and <audio> elements are provided for media playback

5. New content-specific elements are provided.For e.g. <article>, <header>, <footer>, <nav>, <section>

Q68. What are the various elements provided by HTML5 for media content?

<audio> and <video> elements are provided by HTML5 for media playback.

The tags used are:

1) <audio> – It defines sound content.

2) <video> – It defines a video or a movie.

3) <source> – This tag defines the multiple media resources for <video> and <audio>.

4) <embed> – It provides a container for an external application or interactive content.

5) <track> – It defines text tracks for <video> and <audio>.

Q69. What are the new Form elements made available in HTML5?

The new Form elements in HTML5 provide for a better functionality. The tags provided to carry out these functions are:

1) <datalist> – It specifies a list of options for input controls. These options are pre-defined.

2) <keygen> – This tag defines a key-pair generator field.

3) <output> – It defines the result of a calculation.

Q70. What are the various tags provided for better structuring in HTML5?

The various tags provided for better structuring in HTML 5 are:

1) <article> – This tag defines an article.

2) <aside> – It defines content other than the page content.

3) <bdi> – This tag isolates a part of text for formatting in a different direction from other text.

4) <command> – It defines a command button to be invoked by the user.

5) <details> – It defines additional details that can be viewed or hidden by the user.

6) <dialog> – It defines a dialog box.

7) <figure> – This tag specifies content like illustrations, diagrams, photos, code listings, etc.

8) <figcaption> – It is used to provide a caption for a <figure> element

9) <footer> – This tag defines a footer for a document or section

10) <header> – This tag is used to define a header for a document or section

11) <hgroup> – When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.

Q71. Differentiate between Canvas and SVG.

The table below shows some important differences between Canvas and SVG:

– Canvas is resolution dependent while SVG is not.

– Canvas does not provide any support for event handlers while SVG does.

– Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.

– Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.

Q72. Differentiate between localStorage and sessionStorage objects?

– localStorage object stores the data without an expiry date while sessionStorage object stores the data only for one session.

– With localStorage object, data will not be deleted when the browser window is closed while the data is deleted when the browser window closes with sessionStorage objects

Q73. What is a Web Worker?

A web worker is a JavaScript which runs in the background.

1. It exists in external files.
2. It is independent of other scripts and does not affect the performance of the page.
3. Web workers are usually used for CPU intensive tasks.

Q74. Which JavaScript objects are not accessible to web worker?

Following JavaScript objects are not accessible to web worker:

1. The window object
2. The document object
3. The parent object

Q75. What is canvas in HTML5?

Canvas is an HTML area which is used to draw graphics.

Q76. What is “Semantic HTML”?

Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like for bold, and for italic should not be used, reason being they just represent formatting, and provide no indication of meaning or structure. The semantically correct thing to do is use and . These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).

Q77. What is SVG?

HTML SVG is used to describe the two dimensional vector and vector/raster graphics.

Q78. What are the different new form element types in HTML 5?

Following is a list of 10 important new elements in HTML 5:

Color
Date
Datetime-local
Email
Time
Url
Range
Telephone
Number
Search

Q79. Is there any need to change the web browsers to support HTML5?

No. Almost all browsers (updated versions) support HTML 5. For example: Chrome, Firefox, Opera, Safari, IE etc.

Q80. What is output element in HTML 5?

Output element is needed when you need calculation from two inputs to be summarized in to a label. For instance you have two textboxes( see the below figure) and you want to add numbers from these textboxes and send them to a label.

Q81. Which video formats are supported by HTML5?

HTML 5 supports three types of video format:

mp4
webm
ogg

Q82. HTML Audio Tag Example?

Let’s see the code to play mp3 file using HTML audio tag.

<audio controls>
<source src=”koyal.mp3″ type=”audio/mpeg”>
Your browser does not support the html audio tag.
</audio>

Q83. Is audio tag supported in HTML 5?

Yes. It is used to add sound or music files on the web page.

Q84. What is the difference between progress and meter tag?

The progress tag is used to represent the progress of the task only while the meter tag is used to measure data within a given range.

Q85. What is the use of figure tag in HTML 5?

The figure tag is used to add a photo in the document on the web page. But HTML 5 <figure> tag is used to handle the group of diagrams, photos, code listing etc. with some embedded content. You can also add a caption for the photo with the help of <figcaption> tag.

Q86. HTML figure tag example?

The Taj Mahal is widely recognized as “the jewel of Muslim art in India and one of the universally admired masterpieces of the world’s heritage”. It is regarded by many as the finest example of Mughal architecture, a style that combines elements from Islamic, Persian, Ottoman, Turkish and Indian architectural styles.

Q87. What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within HTML form on the web page. It is generally used to create a “submit” or “reset” button.

he <button> tag is used to create a clickable button within HTML form on your webpage. You can put content like text or image within the <button>……..</button> tag.

You should always specify the type attribute for a <button> tag. Different browsers use different default type for the button element.

HTML Button tag can be used inside and outside the form.

<button name=“button” type=“button”>Click Here</button>

Q88. What does details and summary tag?

The details tag is used to specify some additional details on the web page. It can be viewed or hidden on demand. The summary tag is used with details tag.

The <details> tag wraps all the content which you want to show or hide and the <summary> tag contains the summary and the title of the section.

HTML details tag example

<details>
<summary>Copyright 2011-2014.</summary>
<p> – by JavaTpoint. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the javatpoint.com</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>

Q89. What is datalist tag?

The HTML 5 datalist tag provides an auto complete feature on form element. It facilitates users to choose the predefined options.

The <datalist> tag should be used with an <input> element that contains a “list” attribute. The value of “list” attribute is linked with the datalist id.

Q90. Give me simple example of HTML5 datalist tag?

Let’s see the simple example of HTML5 datalist tag.

<label>

Enter your favorite cricket player: Press any character<br />
<input type=“text” id=“favCktPlayer” list=“CktPlayers”>
<datalist id=“CktPlayers”>
<option value=“Sachin Tendulkar”>
<option value=“Brian Lara”>
<option value=“Jacques Kallis”>
<option value=“Ricky Ponting”>
<option value=“Rahul Dravid”>
<option value=“Shane Warne”>
<option value=“Rohit Sharma”>
<option value=“Donald Bradman”>
<option value=“Saurav Ganguly “>
<option value=“AB diVilliers”>
<option value=“Mahendra Singh Dhoni”>
<option value=“Adam Gilchrist”>
</datalist>
</label>

Q91. How tags are migrated from HTML4 to HTML5?

No	Typical HTML4	Typical HTML5
1)	<div id=”header”>	<header>
2)	<div id=”menu”>	<nav>
3)	<div id=”content”>	<section>
4)	<div id=”post”>	<article>
5)	<div id=”footer”>	<footer>

Q92. Header and Footer Example?

HTML 4 Header and Footer:

<h1>Monday Times</h1>
</div>
.

HTML 5 Header and Footer:

Menu Example

<header>
<h1>Monday Times</h1>
</header>

HTML 4 Menu:

<div id=”menu”>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>

HTML 5 Menu:

<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>

Q93. If I do not put <!DOCTYPE html> will HTML 5 work?

No, browser will not be able to identify that it is a HTML document and HTML 5 tags will not function properly.

Q94. What is the use of required attribute in HTML5?

It forces user to fill text on textfield or textarea before submitting form. It is used for form validation.

Example:

Name: <input type=“text” name=“name” required>

Q95. What are the new <input> types for form validation in HTML5?

The new input types for form validation are email, url, number, tel and date.

Example:

Q96. When a session storage data gets deleted?

The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.

Q97. When a local storage data gets deleted?

local storage data has no time limit. To clear a local storage setting you would need to call localStorage.remove(‘key’); where ‘key’ is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.

Q98. What is Geolocation API in HTML?

HTML5 Geolocation API lets you share your location with your favorite web sites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.

Today most of the browsers and mobile devices support Geolocation API. The geolocation APIs work with a new property of the global navigator object ie. Geolocation object which can be created as follows:

var geolocation = navigator.geolocation;

The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.

Q99. What is the purpose of ‘autofocus’ attribute in HTML5?

This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.

Q100. What is the purpose of ‘placeholder’ attribute in HTML5?

HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.