HTML Interview Questions and Answers | Top 42 HTML Questions

Top 42 HMTL Interview Questions and Answers for Job Interview

Is your HTML Interview lined up? Are you worried about the encounter? Don’t know what type of questions will be asked? Don’t worry just refer to these few questions on HTML and prepare yourself well in advance.

1. What Does HTML Stand For?

Answer: HTML stands for Hyper Text Markup Language. Let’s understand it in detail: –

1. Hyper Text: – Hypertext simply means “Text within Text.” A text that has a link within it, is a hypertext. Whenever you click on that link it will bring you to a new webpage.
2. Mark-up language: – A mark-up language is a computer language that is used to apply layout and formatting conventions to a text document. It is different from a programming Language.
3. Web Page: – A web page is a document which is commonly written in HTML and translated by a web browser.

(Though the probability of such a question being asked is very low, but one should be prepared well in advance no matter how simple a question might look).

2. What Is HTML?

Answer: HTML is a language of World Wide Web. It is used for creating web pages and web applications.  It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.

HTML pages are saved by adding .html or .htm in web page name.

3. Who Developed HTML?

Answer:  HTML was Developed by TIM BERNERS LEE during 1990’s. He is also known as the father of HTML.

4. What Are Tags?

Answer:  HTML tags are used to create HTML documents. Content is placed in between HTML tags in order to properly format it.

It makes use of the – less than symbol (<)

– the greater than symbol (>).

– A slash symbol is also used as a closing tag (/)

HTML tags are composed of three things:

1. an opening tag
2. content and
3. ending tag.

For Example: – <title> Content </title>

5. Do All HTML Tags Comes in Pair?

Answer:  No, Not necessary. There are some Tags which are of self-closing nature.

For Example: –

1. <img/>
2. <input/>
3. <source/>

6. What Are the Different Versions Of HTML?

Answer: 

7. What Is Semantic HTML?

Answer:  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> (opening Tag) </b> (closing tag) tag is not used for bold statement as well as <i> (opening Tag) </i> (closing tag) tag is used for italic. Instead of these we use <strong> (opening Tag) </strong> (closing tag) and <em> (opening Tag) </em> (closing tag) tags.

8. Mention some examples of Semantic HTML.

Answer: 

9. What Is HTML5?

Answer:  HTML5 is the latest version of Hypertext Mark-up Language (HTML). There were various deficiencies with the older versions, to remove all such inadequacies and to make HTML more flexible and new technology friendly, HTML 5 was brought.

New features that were added in HTML5 were related to embedding graphics, audio, video, and interactive documents

10. Name Some New Features Added to HTML5?

Answer:  HTML5 brought a new revolution in the world of HTML. It brought so many new features along with it and made HTML more flexible and useful.

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

Answer:  In HTML5 many new elements were added to make it more useful and flexible. Following is a list of new elements: –

• Date
• Colour
• Datetime-local
• Email
• Time
• URL
• Range
• Telephone
• Number
• Search

12. What Are the New Attributes used for <Input> Element in HTML5?

Answer: There are plenty number of attributes which were added in HTML 5 for <Input> Element. Some of them are as follows: –

13. Explain the difference between HTML 4.1 and HTML5?

Answer:  Following are the differences between these HTML 4.1 and HTML 5

14. Differences in HTML4 and HTML5 Tags.

Answer: There are differences between the tags of HTML 4 and HTML 5 plus the functions of some Tags have changed over time. Following is the gist of tags: –

Let’s explain this in detail: –

1. The Tag <Applet> which was used in HTML 4.1 for displaying applets in a web browser has been changed to <object> tag in HTML 5.
2. The Tag <Acronym> which was used in HTML 4.1 used for displaying abbreviation’s in a web browser has been changed to <Abbr> tag in HTML 5.
3. The tag <hr> was used to draw a line in HTML 4.1, but its usage changed in HTML 5 to only defining thematic break in web pages.
4. The tag <a> was used as an anchor as well as for referring to a link. But In HTML5, this tag is used only as a hyperlink.
5. The Tag <meta> has been removed altogether. The usage was to contain an attribute called schema that defined the schema of the document.

15. Which all browsers support HTML5?

Answer: The following Browsers easily support HTML 5

• Apple Safari,
• Google Chrome,
• Mozilla Firefox,
• Opera
• Internet Explorer 9.0

Along with all these the mobile web browsers that come pre-installed on iPhones, iPads, and Android phones also support HTML5.

16. How many types of heading does an HTML contain?

Answer:  There are 6 types of Headings in HTML which varies from <h1> to <h6> tags. Each heading distinguishes itself from other by Size, which means <h1> will be largest heading tag and <h6> will be the smallest one. For example:

1. <h1> Heading no. 1
2. <h2> Heading no. 2
3. <h3> Heading no. 3
4. <h4> Heading no. 4
5. <h5> Heading no. 5
6. <h6> Heading no. 6

The tags that are used for Heading purpose are as follows: –

17. What Are the Various Elements for Media Content Provided by HTML5?

Answer:  HTML provides the support of various elements for representing the media content. Some of them are as follows: –

18. What Is Doctype?

Answer:  DOCTYPE is the Document Type Declaration which tells the browser about the document type. It gives instruction to the web browser about what version of HTML the page is written in.

It is described by tag: –

<!DOCTYPE>.

19. How many types of DOCTYPE are there in HTML 4.1.

Answer: There are 3 types of DOCTYPE are there in HTML 4.1. They are as follows: –

1. HTML 4.01 Transitional
2. HTML 4.01 Strict
3. HTML 4.01 Frameset

HTML 4.01 Transitional: –

This DOCTYPE contains all HTML elements and attributes, including presentational and deprecated elements. Framesets are not allowed.

HTML 4.01 Strict: –

This DOCTYPE contains all HTML elements and attributes but does NOT INCLUDE presentational or deprecated elements. Framesets are not allowed.

HTML 4.01 Frameset: –

This DOCTYPE is equal to HTML 4.01 Transitional but allows the use of frameset content.

20. What is the Major Difference Between Transitional and Strict Doctype?

Answer: The major difference between Transitional and Strict Doctype: –

Strict – This Doctype contains all HTML components and properties except the Framesets. However, it does NOT INCLUDE presentational or expostulated components.

Transitional – This Doctype contains all HTML components and properties, INCLUDING presentational and belittled components. It also allows the use of Framesets.

21. Describe the meaning and Usages of following tags.

Answer: 

22. Is JavaScript supported by HTML?

Answer:  Yes, HTML supports JavaScript. It can be used anywhere in the HTML Coding.

23. How to insert JavaScript in HTML?

Answer:  To insert JavaScript in HTML, one will have to use <Script tag>.

JavaScript can be enclosed in <script type = text/ JavaScript> and it will end with </script> tag.

24. How many types of Web Storage is Provided by HTML5?

Answer:  There are two types of Web Storage that are provided by HTML5

1. Session Storage
2. Local Storage

1. Session Storage: –

In this the data of Current Session only gets stored. It gets cleared when the browser is closed. It’s a temporary Storage.

2. Local Storage

The second type of HTML Web Storage is Local Storage. It stores data as KEY/VALUE pair.

25. Mention the difference between Local Storage and Session Storage.

Answer:  The difference between these two types of Storages are as follows: –

• Local Storage: – It stores the data without an expiry date.

Session Storage: – It stores the data for only one session.

• Local Storage: – The data will not get deleted when the browser window closes.

Session Storage: – If the browser window closes, the data will get deleted.

• Local Storage: – It can be shared between multiple windows of the browser.

Session Storage: – This storage is accessible only in the current window of the browser.

26. How many lists are there in HTML.

Answer:  There are 3 types of list elements in HTML.

1. Ordered List
2. Unordered List
3. Definition List

Ordered List (<ol>) –An Ordered List or ol tag, is the list in which the items are listed in an ordered way, i.e. numbered or alphabetically. 

Unordered List (<ul>) – An Unordered List or ul tag, is the in which the items will be in an unordered way, i.e. either in bulleted format or in any other format.

Definition List (<dl>)– A definition List or dl tag arranges the items in the way in which they are arranged in a dictionary.

27. How to draw an Ordered List?

Answer:  An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

This is the way an Ordered List is drawn: –

<ol>
<li>Ram</li>
<li>Shyam</li>
<li>Vyam</li>
</ol>

28. How to draw an Unordered List?

Answer: An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

This is the way an Unordered List is drawn: –

<ul>
<li>Ram</li>
<li>Shyam</li>
<li>Vyam</li>
</ul>

29. How to draw a definition List?

Answer:  The description list is a list of terms, with a description of each term.

1. The <dl> tag defines – the description list,
2. The <dt> tag defines – the term (name),
3. The <dd> tag – describes each term.

This is the way a definition List is drawn: –

<dl>
<dt>Ram</dt>
<dd>- Tall guy</dd>
<dt>shyam</dt>
<dd>- short guy</dd>
</dl>

30. How will you draw a simple HTML structure.

Answer:  The basic structure of HTML document always remains same, only the detailing are changed according to the requirements. Let’s look at the structure below: –

1.    DOCTYPE tag

Every HTML Document starts with DOCTYPE tag. It is a special tag and must be used at the starting of an HTML document. It tells the browser what version of HTML to be used.

It is used in the following way: –

<!DOCTYPE html>

2.    HTML tag

The Next tag that is used in the document is HTML tag. Each document has only one HTML tag, and it serves as a ‘container’ for the rest of the page’s elements. One will place the rest of your html code for the page within the HTML tag.

<html> whole code </html>

3.   Head tag

The first element inside the <html> tag is the <head> tag. The Content that is written inside this tag is only useful for the browser and is not visible on the page directly.

It contains the following things: –

Title of the page.

Description of content.

Any other instruction like usage of JavaScript etc is also given here.

<head>

<title>……. </title>

</head>>

4.   Body tag

After the <head> tag, we have another tag called as <body> tag. The whole content of document Is displayed in the browser. Tags like <h1> (used for headings), <p> (used for paragraphs), <B> (used for Bold letters insertion), <i> (used for italics) etc are also used here.

<body>

<h1>……</h1>

</body>

At the end we’ll have to insert all the Closing tags. Now let’s have a look at how it will finally look with all the tags placed together.

</DOCTYPE html>

<html>                                     

       <head>

               <title> Title of your page </title>

       </head>

       <body>

              <h1> My website My Space </h1>

              <p> The whole content in the form of paragraphs will be mentioned here </p>

        </body>

</html>

31. What all tags will be used in order to create a table in document.

Answer:  In order to make a Table in your document one will have to insert the following tags in it: –

32. How to create a hyperlink in HTML?

Answer:  An anchor tag or <a> tag in HTML is basically used to create hyperlinks which create a path between two different HTML web pages. The Hyperlink will serve the purpose of directing the reader to another page just by clicking the Hyperlinked word.

There are three ways in which Hyperlinks can be displayed in a document: –

1. Unvisited Link
2. Visited Link
3. Active Link

• Unvisited Link – These links are blue in colour and underlined.
• Visited Link – These links are purple in colour and underlined.
• Active Link – These links are red in colour and underlined.

33. What is the canvas element in HTML5?

Answer: The <canvas> element is a container that is used to draw graphics on the web page using scripting language like JavaScript. It allows for dynamic and scriptable rendering of 2D shapes and bitmap images. There are several methods in canvas to draw paths, boxes, circles, text and add images.

34. Do HTML 5 supports video formats?

Answer: HTML 5 supports video formats too. There are three types of video format:

• mp4
• WebM
• Ogg

35. Is audio tag supported in HTML 5?

Answer:  Yes. To add sound or music files on the web page, this Tag is used. There are three supported file formats for HTML 5 audio tag.

1. mp3
2. WAV
3. Ogg

36. What are web sockets?

Answer: Web sockets are basically a two-way communication which takes place between the servers and the clients, which mean both the parties, communicate and exchange data at the same time. It’s a next-generation bidirectional communication technology for web applications. This protocol defines a full duplex communication from the ground up. Web sockets take a step forward in bringing desktop rich functionalities to the web browsers. This was required from a very long time and with introduction of web sockets a revolution came into this industry.

37. What is the difference between HTTP are Web Sockets.

Answer:  WebSocket is an advanced technology that allows real-time interactive communication between the client browser and a server. It uses a completely different protocol that allows bidirectional data flow, making it unique against HTTP.

Difference between WebSocket and HTTP working procedure: –

Here is how HTTP works: –

In HTTP if you want to receive a message then you must ask the server again and again whether that message has been received or not. Unless and until you will ask the server, you won’t be able to receive the message.

HTTP also allows you to have different types of requests such as post, get or put, each with a different purpose.

Here is how WebSocket works:  –

Web Sockets on the other hand don’t need you to send a request in order to respond. They allow bidirectional data flow, so you just have to listen for any data. So here you will not have to send the message constantly in order to get the response.

You can just listen to the server and it will send you a message when it’s available.

38. Where web sockets can be used?

Answer:  Web Sockets are very useful for the following purposes: –

1. Online multiplayer games
2. Chat apps
3. Real-time applications
4. IoT (Internet of things)

39. How Errors Can be Checked?

Answer:  A Document is not considered complete unless it is free from all types of errors and thinking about this thing Developers created some ways by which errors can be detected and rectification can be done:

• There are HTML validators which check HTML documents and tells whether there are errors or not. validation is important to give the best result with complete correctness on unknown browsers.
• HTML checkers (linters) are also useful. These programs check documents for specific problems, including some caused by invalid markup and others caused by common browser bugs. Checkers may pass some invalid documents, and they may fail some valid ones.

All validators do functioning equally; though the reporting styles may vary, the same errors will be given by each one of them giving identical input. Different checkers are programmed to look for different problems, so the reporting will vary significantly from each other. Also, some programs that are called validators (like “CSE HTML Validator”) are really linters/checkers. They are still useful, but they should not be confused with real HTML validators.

When checking a site for errors for the first time, it is often useful to identify common problems that occur repeatedly in your markup. Fix these problems everywhere they occur (with an automated process if possible), and then go back to identify and fix the remaining problems.

40. What are style sheets?

Answer:  Style sheets are just like templates. It helps one to build consistent, transportable, and well-defined style templates. These templates can be linked to several different web pages, making it easy to maintain and change the look and feel of all the web pages within site.

It also makes it easy to specify the amount of white space between text lines, the colours used for the text and the backgrounds, the font size and style, and other details.

41. What do you mean by CSS?

Answer:  CSS stands for Cascading Style Sheets. By using CSS with HTML, we can change the look of the web page as it will change the font size and colour 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.

42. What are the types of Style Sheets in HTML?

Answer:  There are three types of Style sheets in HTML

1. External CSS
2. Internal CSS
3. Inline CSS

a)   Internal CSS

Internal CSS is used in the condition when we want a style to be used in the complete HTML body. In Internal CSS the style of CSS is specified in the <head> section. This is internal CSS, it affects all the elements in the body section. For that we can use style in the head tag.

This style performs an action in the entire HTML body.

b)   External CSS

In External CSS we create a .css file and use it in the HTML page as per one’s requirements. Generally external Cascading Style Sheets are used whenever we have many HTML attributes and we can use them as required. It Is used when the style is applied to many pages; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file.

There are two ways to create a CSS file.

1. The first is to write the CSS code in Notepad and save it as a .css file,
2. The second one is to directly add the style sheet in the Solution Explorer and direct Visual Studio to use it on the HTML page.

c)   Inline CSS

For Inline CSS every style content is in HTML elements. It is used for a limited section. Whenever our requirements are very small, we can use inline CSS.

It will affect only single elements. In HTML we require that various HTML tag’s views are different so then we use inline Cascading Style Sheets. There are disadvantage of inline Cascading Style Sheets. It must be specified on every HTML tag. There is a lot of time consumed by that and it is not the best practice for a good programmer and the code will be quite large and very complex.

HTML is the core foundational component for any web application design. The formats and versions may change, but HTML is here to stay for several more decades. Irrespective of technology used, every UI developer and Web developer is expected to know HTML. Hence it is essential to learn HTML basics for every web developer. 42 top HTML interview questions given above will help you to crack the interview successfully.