HTML Interview Questions And Answer

HTML Interview Questions and Answers :

1. What is HTML?

HTML stands for HyperText Markup Language.
It is used to design web pages using a markup language.
HTML is a combination of Hypertext and Markup language.
Hypertext defines the link between the web pages.
The markup language is used to define the text document within the tag which defines the structure of web pages.
HTML is used to structure the website and is therefore used for Web Development.

2. Difference between HTML and XHTML

S.No.	HTML	XHTML
1.	HTML stands for Hypertext Markup Language.	XHTML stands for Extensible Hypertext Markup Language.
2.	It was developed by Tim Berners-Lee.	It was developed by W3C i.e.lowercase World Wide Web Consortium.
3.	It was developed in 1991.	It was released in 2000.
4.	It is extended from SGML.	It is extended from XML and HTML.
5.	The format is a document file format.	The format is a markup language.
6.	All tags and attributes are not necessarily to be in lower or upper case.	In this, every tag and attribute should be in lower case.
7.	Doctype is not necessary to write at the top.	Doctype is very necessary to write at the top of the file.
8.	It is not necessary to close the tags in the order they are opened.	It is necessary to close the tags in the order they are opened.
9.	While using the attributes it is not necessary to mention quotes. For e.g. <Geeks>.	While using the attributes it is mandatory to mention quotes. For e.g. <Geeks=”GFG”>.
10.	The used filename extensions are .html, .htm.	The used Filename extensions are .xhtml, .xht, .xml.

3. What are the various markup languages available?

HTML: Hypertext Markup Language
KML: Key whole Markup Language
MathML: Mathematical Markup Language
SGML: Standard Generalized Markup Language
XHTML: eXtensible Hypertext Markup Language
XML: eXtensible Markup Language

4. What is the difference between HTML and HTML 5?

HTML	HTML5
It didn’t support audio and video without the use of Flash player support.	It supports audio and video controls with the use of <audio> and <video> tags.
It uses cookies to store temporary data.	It uses SQL databases and application cache to store offline data.
Does not allow JavaScript to run in the browser.	Allows JavaScript to run in the background. This is possible due to JS Web worker API in HTML5.
Vector graphics are possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc.	Vector graphics is additionally an integral part of HTML5 like SVG and canvas.
It does not allow drag-and-drop effects.	It allows drag-and-drop effects and support target blank attribute.
Not possible to draw shapes like circles, rectangles, triangles, etc.	HTML5 allows drawing shapes like circles, rectangles, triangles, etc.
It works with all old browsers.	It is supported by all-new browsers like Firefox, Mozilla, Chrome, Safari, etc.
Older versions of HTML are less mobile-friendly.	HTML5 language is more mobile-friendly.
The doctype declaration is too long and complicated.	The doctype declaration is quite simple and easy.
Elements like nav and header were not present.	New elements for web structure like nav, header, footer, etc.
Character encoding is long and complicated.	Character encoding is simple and easy.
It is almost impossible to get the true GeoLocation of users with the help of the browser.	One can track the Geo Location of a user easily by using JS GeoLocation API.
It can not handle inaccurate syntax.	It is capable of handling inaccurate syntax.
Attributes like charset, async, and ping are absent in HTML.	Attributes of the charset, async, and ping are a part of HTML 5.

5. What is the current version of HTML?

HTML 5 is the fifth and current version of HTML.

6. What is !DOCTYPE?

A doctype or document-type declaration is an instruction that tells the web browser about the markup language in which the current page is written. The doctype is not an element or tag, it lets the browser know about the version of or standard of HTML or any other markup language that is being used in the document. The DOCTYPE for HTML5 is case-insensitive and can be written as shown below:

<!DOCTYPE html>

7. What are elements and tags, and what are the differences between them?

HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.

Syntax:

<b> </b>

HTML elements: Elements enclose the contents in between the tags. They consist of some kind of structure or expression. It generally consists of a start tag, content, and an end tag.

Syntax:

<b>This is the content.</b>

Difference between HTML Tag & HTML Element:

HTML Tag	HTML Element
Either opening or closing is used to mark the start or end of an element.	Collection of a start tag, end tag, and its attributes.
Used to hold the HTML element.	Holds the content.
Starts with < and ends with >.	Whatever is written within an HTML tag are HTML elements.

8. What are the various heading tags and their importance?

There are 6 levels of headings defined by HTML. These six heading elements are H1, H2, H3, H4, H5, and H6; with H1 being at the highest level and H6 at the least.

Importance of Heading:

Search Engines use headings for indexing the structure and content of the webpage.
Headings are used for highlighting important topics.
They provide valuable information and tell us about the structure of the document.

9. How to redirect to a particular section of a page using HTML?

One can use the anchor tag to redirect to a particular section on the same page.
You need to add “id attribute” to the section that you want to show and use the same id in href attribute with “#” in the anchor tag.
So that On click a particular link, you will be redirected to the section that has the same id mentioned in the anchor tag.

Syntax:

<a href="#home_section">home</a>

<section id="home_section">
    Information About Page
</section>

10. What are attributes?

An attribute is used to provide extra or additional information about an element.

All HTML elements can have attributes. Attributes provide additional information about an element.
It takes 2 parameters ie., name and value. These define the properties of the element and are placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the property value or extent of the property names that can be aligned over the element.
Every name has some value that must be written within quotes.

11. Are <b> and <strong> tags same? If not, then why?

HTML strong tag: The strong tag is one of the elements of HTML used in formatting HTML texts. It is used to show the importance of the text by making it bold or highlighting it semantically.

Syntax:

<strong> Contents... </strong>

HTML bold tag: The bold tag or <b> is also one of the formatting elements of HTML. The text written under the <b> tag makes the text bold presentationally to draw attention.

Syntax:

<b> Contents... </b>

The main difference between the <bold> tag & <strong> tag is that the strong tag semantically emphasizes the important word or section of words while the bold tag is just offset text conventionally styled in bold.

12. What is the difference between <em> and <i> tags?

<i> tag: It is one of the elements of HTML which is used in formatting HTML texts. It is used to define a text in technical terms, alternative mood or voice, a thought, etc.

Syntax:

<i> Content... </i>

<em> tag: It is also one of the elements of HTML used in formatting texts. It is used to define emphasized text or statements.

Syntax:

<em> Content... </em>

By default, the visual result is the same but the main difference between these two tags is that the <em> tag semantically emphasizes the important word or section of words while the <i> tag is just offset text conventionally styled in italic to show alternative mood or voice.

13. How are comments added in HTML?

The comment tag (<!– Comment –>) is used to insert comments in the HTML code.

Types of HTML Comments: There are three types of comments in HTML which are:

Single-line comment
Multi-lines comment
Using <comment> tag

14. What are the different formats in which colors in HTML can be declared?

The color of an element can be defined in the following ways:

Built-In Color
RGB Format
RGBA Format
Hexadecimal Notation
HSL
HSLA
Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
Lightness: It takes a percentage value, where 100% represents white, while 0% represents black.

15. How to create a link in HTML?

A Link is a connection from one Web resource to another. A link has two ends, An anchor and a direction. The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document, or an element within an HTML document.

HTML Link Syntax: Links are specified in HTML using the “a” tag.

<a href="url">Link Text<a>

Explanation:

href: The href attribute is used to specify the destination address of the link used.
Text link: The text link is the visible part of the link.

16. What is the use of the target attribute in the <link> tag?

The HTML <link> target Attribute is used to specify the window or a frame where the linked document is loaded. It is not supported by HTML 5.

Syntax:

<link target="_blank|_self|_parent|_top|framename">

Attribute Values:

_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame.
_parent: It opens the linked document in the parent frameset.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame.

17. What is the use of alt attribute in images?

The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image.

Syntax:

<img alt="text">

18. What are the HTML tags used to display a table?

<table>: It is used to define a table.
<tr>: It is used to define a row in a table.
<th>: It is used to define a header cell in a table.
<td>: It is used to define a cell in a table.
<caption>: It is used to define the table caption.
<colgroup>: It is used to define a group of one or more columns in a table for formatting.
<col>: It is used with <colgroup> element to specify column properties for each column.
<tbody>: It is used to define a group of body content in a table.
<thead>: It is used to group the header content in a table.
<tfooter>: It is used to group the footer content in a table.

19. What are the different types of lists in HTML?

A list is a record of short pieces of related information used to display the data or any information on web pages in the ordered or unordered form. HTML offers 3 ways for specifying lists of information. All lists must contain one or more list elements. The types of lists that can be used in HTML are:

Unordered List: It will list the items using plain bullets.
Ordered List: It will use different schemes of numbers to list your items.
Definition List: It arranges your items in the same way as they are arranged in a dictionary.

20. What is the difference between block and inline elements?

Every element in HTML has a default display value which depends upon the element type. Block or inline is the default display value for most of the elements.

Block-Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can.

div element: The div element is used as a container for other HTML elements. It has no required attributes. Style, class, and id are the commonly used attributes.
span element: The span element is used as a container for text. It has no required attributes. Style, class, and id are the commonly used attributes.

50 Questions and Their Short Answers :

Question 1. What is HTML?
Answer: HTML stands for Hypertext Markup Language. It is a markup language used to create web pages and web applications.

Question 2. What are the basic elements of an HTML document?
Answer: The basic elements of an HTML document include the HTML tag, head tag, and body tag.

Question 3. What is the purpose of the HTML tag?
Answer: The HTML tag is the top-level tag in an HTML document. It tells the browser that the document is an HTML document.

Question 4. What is the purpose of the head tag?
Answer: The head tag is used to contain meta information about the document, such as the title and links to stylesheets.

Question 5. What is the purpose of the body tag?
Answer: The body tag is used to contain the main content of the web page.

Question 6. What are some of the common HTML tags?
Answer: Some common HTML tags include the p tag, h1-h6 tags, img tag, a tag, ul and ol tags, and div and span tags.

Question 7. What is the difference between the div and span tags?
Answer: The div tag is used to group elements together, while the span tag is used to apply styles to a specific section of text.

Question 8. What is the purpose of the alt attribute in the “img tag”?
Answer: The alt attribute provides alternative text for an image, which is used when the image cannot be displayed.

Question 9. What is the difference between the “ol and ul” tags?
Answer: The ol tag is used to create an ordered list, while the ul tag is used to create an unordered list.

Question 10. What is the difference between the “a tag” and the button tag?
Answer: The “a tag” is used to create links, while the button tag is used to create clickable buttons.

Question 11. What is the difference between the id and class attributes?
Answer: The id attribute is used to uniquely identify an element, while the class attribute is used to group elements together.

Question 12. What is the purpose of the “href” attribute in the “a tag”?
Answer: The “href” attribute specifies the URL of the page or resource that the link goes to.

Question 13. What is the purpose of the target attribute in the “a tag”?
Answer: The target attribute specifies where to open the linked document, such as in a new window or in the same window.

Question 14. What is the purpose of the “rel attribute” in the a tag?
Answer: The “rel attribute” specifies the relationship between the linked document and the current document.

Question 15. What is the purpose of the type attribute in the script tag?
Answer: The type attribute specifies the MIME type of the script.

Question 16. What is the difference between a script tag with a src attribute and a script tag with script code inside?
Answer: A script tag with a src attribute references an external script file, while a script tag with script code inside contains the script code directly in the HTML document.

Question 17. What is the purpose of the lang attribute in the HTML tag?
Answer: The lang attribute specifies the language of the document.

Question 18. What is the difference between the br tag and the p tag?
Answer: The br tag creates a line break, while the p tag creates a new paragraph.

Question 19. What is the purpose of the meta tag?
Answer: The meta tag is used to provide metadata about the document, such as the author, keywords, and description.

Question 20. What is the purpose of the title tag?
Answer: The title tag specifies the title of the document, which is displayed in the browser’s title bar.

Question 21. What is the purpose of the style tag?
Answer: The style tag is used to define styles for HTML elements.

Question 22. What is the purpose of the table tag?
Answer: The table tag is used to create tables on a web page.

Question 23. What are some common attributes used in the table tag?
Answer: Common attributes used in the table tag include the border attribute, which specifies the border around the table, and the “cellpadding” and “cellspacing attributes”, which control the spacing between cells.

Question 24. What is the difference between a “th” and a “td tag”?
Answer: The “th tag” is used to create a table header cell, while the td tag is used to create a regular table cell.

Question 25. What is the purpose of the colspan attribute?
Answer: The colspan attribute is used to specify the number of columns that a cell should span.

Question 26. What is the purpose of the rowspan attribute?
Answer: The rowspan attribute is used to specify the number of rows that a cell should span.

Question 27. What is the purpose of the form tag?
Answer: The form tag is used to create a form on a web page, which allows users to input data and submit it to a server.

Question 28. What are some common attributes used in the form tag?
Answer: Common attributes used in the form tag include the action attribute, which specifies the URL of the server-side script that processes the form data, and the method attribute, which specifies the HTTP method used to submit the form data.

Question 29. What is the difference between the get and post methods?
Answer: The get method submits form data as a query string in the URL, while the post method sends form data in the body of the HTTP request.

Question 30. What is the purpose of the input tag?
Answer: The input tag is used to create various types of form elements, such as text boxes, radio buttons, checkboxes, and buttons.

Question 31. What is the purpose of the select tag?
Answer: The select tag is used to create a dropdown list on a form.

Question 32. What is the purpose of the option tag?
Answer: The option tag is used to create individual options within a dropdown list.

Question 33. What is the purpose of the label tag?
Answer: The label tag is used to associate a label with a form element, which helps to make the form more accessible.

Question 34. What is the purpose of the “textarea tag”?
Answer: The “textarea tag” is used to create a multiline text input field on a form.

Question 35. What is the purpose of the “button tag”?
Answer: The “button tag” is used to create clickable buttons on a web page.

Question 36. What is the purpose of the audio tag?
Answer: The audio tag is used to embed audio content, such as music or sound effects, into a web page.

Question 37. What is the purpose of the video tag?
Answer: The video tag is used to embed video content into a web page.

Question 38. What is the purpose of the canvas tag?
Answer: The canvas tag is used to create graphics and animations on a web page using JavaScript.

Question 39. What is the purpose of the source tag?
Answer: The source tag is used to specify alternative media resources, such as different video or audio formats, for the browser to choose from.

Question 40. What is the purpose of the header tag?
Answer: The header tag is used to create a header section at the top of a web page.

Question 41. What is the purpose of the footer tag?
Answer: The footer tag is used to create a footer section at the bottom of a web page.

Question 42. What is the purpose of the “nav tag”?
Answer: The nav tag is used to create a navigation section on a web page.

Question 43. What is the purpose of the article tag?
Answer: The article tag is used to contain standalone content, such as a blog post or news article.

Question 44. What is the purpose of the aside tag?
Answer: The aside tag is used to create a section of content that is related to the main content of the web page, but not essential to its understanding.

Question 45. What is the purpose of the section tag?
Answer: The section tag is used to create a section of content that is semantically distinct from other sections of the web page.

Question 46. What is the purpose of the main tag?
Answer: The main tag is used to identify the main content of a web page, which is typically the most important content.

Question 47. What is the purpose of the figure tag?
Answer: The figure tag is used to encapsulate media content, such as images or videos, along with a caption.

Question 48. What is the purpose of the figcaption tag?
Answer: The figcaption tag is used to create a caption for media content encapsulated within a figure tag.

Question 49. What is the purpose of the “datalist tag”?
Answer: The “datalist tag” is used to create a list of pre-defined options for a form element, such as an input field.

Question 50. What is the purpose of the “meter tag”?
Answer: The meter tag is used to create a gauge, such as a progress bar or a speedometer, on a web page to indicate the status of a value within a specific range.

Conclusion :

So, you learned here Top 50, HTML Interview Questions with Answers, all these questions are very important,. I hope you have understood all questions and answers very well and if you have any doubt, regarding it then you can ask in the comment section.

Key HTML Interview Questions and How to Answer Them