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: –
- 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.
- 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.
- 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:
- an opening tag
- content and
- 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: –
6. What Are the Different Versions Of HTML?
|HTML 1.0||1991||The original version of HTML was HTML 1.0. It had very limited features which greatly limited what you could do in designing your web pages.|
|HTML 2.0||1995||HTML 2.0 was able to support extra features such as form-based file upload, form elements such as text box, option button, etc.|
Until January 1997, HTML 2.0 was the standard in web page design.
|HTML 3.2||1997||This version was capable of creating tables and providing support for extra options.|
It can also support a web page with complex mathematical equations.
|HTML 4.0||1999||It was code-named COUGAR.|
It is a very stable version of HTML language. This version is the current official standard
It provides added support for stylesheets and scripting ability for various multimedia elements.
|XHTML||2000||XHTML stands for EXtensible Hyper Text Markup Language.|
XHTML was designed to address ever emerging technologies, so that one can access Internet using different devices.
It also addressed the need for those with disabilities (such as the blind and visually impaired) to access the internet.
|HTML 5||2014||The Newest Version Of HTML.|
There are two major organizations one is W3C (World Wide Web Consortium), and another one is WHATWG (Web Hypertext Application Technology Working Group) which are involved in the development of HTML 5 version.
The basic aim of HTML5 was to provide two things –
(1) to improve the language
(2) to support the latest multimedia.
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.
Fourth level headline
Fifth level headline
Sixth level headline
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.
These are like <header>, <footer>, and <section>.
|Next-generation bidirectional communication technology for web applications.|
|You can embed audio or video on your web pages without resorting to third-party plugins.|
|One can choose to share their physical location with their web application.|
Drag and drop
|Drag and drop the items from one location to another location on the same webpage.|
New Form Elements
|New Form Elements like number, date, calendar and Range were brought.|
Persistent Local Storage
|With HTML5, it is possible to achieve this, without resorting to third-party plugins.|
|It allows building our personal vocabulary beyond HTML5 and extends our web pages with those custom semantics.|
Server-Sent Events (SSE)
|These events got introduced in HTML5. The direction of the flow of the execution of these events is from the server to the Web Browser.|
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: –
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: –
|v It specifies the legal number intervals for an <input> element.|
v It works with the following input types: number, range, date, datetime, datetime-local, month, time, and week.
|required||v It is a Boolean attribute.|
v It indicates that it is mandatory to fill the particular field, before submitting the form.
|Autofocus||v It is a Boolean attribute.|
v The presence of this attribute means that an <input> element should automatically come into focus when the page gets loaded.
|Form action||v This attribute defines the URL of a file, that will process the input control after the form gets submitted.|
v This attribute is used along with type=” submit” and type=” image”.
v Also, it overrides the action attribute of the <form> element.
|Form method||v It defines the HTTP method used for sending form related data to the action URL.|
v It gets used with type=” submit” and type=” image”.
v It overrides the method attribute of the <form> element.
|Form enctype||v This attribute defines, the method to encode the form data before submitting it to the server.|
v It gets used with type=” submit” and type=” image”.
v Also, it overrides the enctype attribute of the <form> element.
|v It specifies a name or a keyword of the area where response received after submitting the form will be displayed.|
v It gets used with type=” submit” and type=” image”.
|v It is a Boolean attribute.|
v It gets used with type= “submit”.
v It indicates that the validation of the <input> element, should not be done at the time of submission.
It overrides the novalidate attribute of the <form> element
|height and width|
|v It specifies the height and width of an <input> element.|
v It gets used only with <input type=” image”>.
It refers to a <datalist> element, which contains a list of pre-defined options for an <input> element.
|v It specifies a regular expression with which the value of the <input> element gets compared.|
v It works with the following input types: text, search, URL, tel, email, and password.
|min and max|
|v It specifies the minimum and maximum value for an <input> element.|
v It works with the following input types, number, range, date, datetime, datetime-local, month, time, and week.
|v It is a boolean attribute.|
v It specifies that the user is allowed to enter more than one value in the <input> element.
v It works with the following input types: email and file.
|v It displays a short hint that indicates the expected value of an input field.|
v It works with the following input types: text, search, URL, tel, email, and password
13. Explain the difference between HTML 4.1 and HTML5?
Answer: Following are the differences between these HTML 4.1 and HTML 5
Audio-Video is supported
Clear and simple
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: –
|S. No.||Old Tag (HTML4)||New Tag|
|1||<Applet>||<Object>||Used for displaying applets in a web browser|
|2||<Acronym>||<Abbr>||Used for displaying abbreviation’s in a web browser|
|3||<hr>||<hr>||Earlier this tag was used to draw a line, but the functionality has been changed and now it’s used for defining thematic break in web page.|
|4||<a>||<a>||In older versions it 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||<meta>||REMOVED||This used to contain an attribute called schema that defined the schema of the document|
Let’s explain this in detail: –
- 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.
- 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.
- 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.
- 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.
- 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,
- 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:
- <h1> Heading no. 1
- <h2> Heading no. 2
- <h3> Heading no. 3
- <h4> Heading no. 4
- <h5> Heading no. 5
- <h6> Heading no. 6
The tags that are used for Heading purpose are as follows: –
|Opening Tag||Heading||Closing Tag|
|<h1>||Heading no. 1||</h1>|
|<h2>||Heading no. 2||</h2>|
|<h3>||Heading no. 3||</h3>|
|<h4>||Heading no. 4||</h4>|
|<h5>||Heading no. 5||</h5>|
|<h5>||Heading no. 6||</h6>|
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: –
|1||<video>||It represents the video content that needs to be attached to a Web page.|
|2||<audio>||It defines the sound content|
|3||<embed >||It provides a container for an external application.|
|4||<source>||This tag defines the source of video and audio.|
|5||<track>||It defines text tracks for video and audio.|
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: –
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: –
- HTML 4.01 Transitional
- HTML 4.01 Strict
- 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.
|S. No.||Tags Name||Usages of the tags|
|1||<header>||This tag represents the header of a section.|
|2||<footer>||This tag represents the footer of a section.|
It can also contain information about the author, copyright information, etc.
|3||<nav>||This tag is used for navigation purpose.|
|4||<dialog>||This tag is used to mark up a conversation.|
|5||<figure>||This tag is used for associating a caption together with some embedded content, such as a graphic or video.|
|6||<article>||This tag represents an independent piece of content of a document, such as a blog entry or newspaper article|
|7||<section>||This tag represents a generic document or application section.|
|8||<head>||It contains information about the document.|
|9||<title>||It is used to add title of that HTML page which appears at the top of the browser window.|
|10||<p>||<p> tag describes the paragraph|
|11||<body>||Body tag describes the body content of the page that is ultimately used by user.|
|12||<!DOCTYPE>||It defines the document type, or it tells the browser about the version of HTML.|
|13||<fieldset>||It draws a box around related elements.|
|14||<ul>||Defines an unordered list|
|15||<ol>||Defines an ordered list|
|16||<li>||Defines a list item|
|17||<dl>||Defines a description list|
|18||<dt>||Defines a term in a description list|
|19||<dd>||Describes the term in a description list|
|20||<U>||This is used for Underlining text|
|21||<I>||This is used for writing in Italic.|
|22||<BODY>||The body part of the HTML document.|
|23||<B>||This is used to show Content as bold type|
|24||<table>||It defines a table.|
|25||<tr>||It defines a row in a table.|
|26||<th>||It defines a header cell in a table.|
|27||<td>||It defines a cell in a table.|
|28||<caption>||It defines the table caption.|
|29||<colgroup>||It specifies a group of one or more columns in a table for formatting.|
|30||<col>||It is used with <colgroup> element to specify column properties for each column.|
|31||<tbody>||It is used to group the body content in a table.|
|32||<thead>||It is used to group the header content in a table.|
|33||<tfooter>||It is used to group the footer content in a table.|
|34||<aside>||It is used to define content aside from the content|
|35||<blockquote>||It is used to define a large quoted section.|
|36||<img>||The tag used for images.|
24. How many types of Web Storage is Provided by HTML5?
Answer: There are two types of Web Storage that are provided by HTML5
- Session Storage
- Local Storage
- 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.
- 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.
- Ordered List
- Unordered List
- 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: –
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: –
29. How to draw a definition List?
Answer: The description list is a list of terms, with a description of each term.
- The <dl> tag defines – the description list,
- The <dt> tag defines – the term (name),
- The <dd> tag – describes each term.
This is the way a definition List is drawn: –
<dd>- Tall guy</dd>
<dd>- short guy</dd>
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: –
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.
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.
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.
<title> Title of your page </title>
<h1> My website My Space </h1>
<p> The whole content in the form of paragraphs will be mentioned here </p>
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: –
|1||<table>||It defines a table.|
|2||<tr>||It defines a row in a table.|
|3||<th>||It defines a header cell in a table.|
|4||<td>||It defines a cell in a table.|
|5||<caption>||It defines the table caption.|
|6||<colgroup>||It specifies a group of one or more columns in a table for formatting.|
|7||<col>||It is used with <colgroup> element to specify column properties for each column.|
|8||<tbody>||It is used to group the body content in a table.|
|9||<thead>||It is used to group the header content in a table.|
|10||<tfooter>||It is used to group the footer content in a table.|
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: –
- Unvisited Link
- Visited Link
- 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?
34. Do HTML 5 supports video formats?
Answer: HTML 5 supports video formats too. There are three types of video format:
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.
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: –
- Online multiplayer games
- Chat apps
- Real-time applications
- 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
- External CSS
- Internal CSS
- 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.
- The first is to write the CSS code in Notepad and save it as a .css file,
- 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.