In this article, we will discuss the top 50 HTML Interview Questions you should know to crack those trying interviews and land your dream job.
You donât have to remember every question & answer just understand it I know you will explain it to the interviewer.
You can also use ChatGPT or Google Bard to Prepare HTML Interview Questions & Answers.
Here Following prompts which you can use in ChatGPT and Google Bard
Generate a list of 10 HTML interview questions along with their answers.
Provide me with some interview questions related to HTML and their respective answers.
Generate a set of HTML interview questions and answers that a frontend developer might be asked in an interview.
Can you generate some commonly asked HTML interview questions and their answers for a frontend developer job role?
I need a set of HTML interview questions and answers that would be relevant for a frontend developer interview.
Generate a list of HTML interview questions and their answers to help me prepare for my upcoming front-end developer interview.
Can you provide me with HTML interview questions and answers that are commonly asked in frontend developer interviews?
Generate a set of HTML interview questions and answers that cover both basic and advanced topics for a front-end developer role.
Iâm looking for a list of HTML interview questions and answers to brush up my skills for a frontend developer job interview.
Can you help me with HTML interview questions and answers that would be suitable for a frontend developer interview, including both theoretical and practical aspects?
Best of luck.
HTML Interview Questions
1. What is HTML?
HTML stands for HyperText Markup Language and is the language of the internet. It is the standard text formatting language used for creating and displaying pages on the Internet
HTML documents are made up of the elements and the tags that format it for proper display on pages.
2. What are HTML tags?
We use HTML tags for placing the elements in the proper and appropriate format. Tags use the symbols <, and > to set them apart from the HTML content.
The HTML tags need not be closed always. For example, in the case of images, the closing tags are not required as <img> tag.
3. What are HTML Attributes?
Attributes are the properties that can be added to an HTML tag. These attributes change the way the tag behaves or is displayed. For example, a <img> tag has an src attribute, which you use to add the source from which the image should be displayed.
We add attributes right after the name of the HTML tag, inside the brackets. We can only add the attributes to opening or self-closing tags, but never be in closing tags.
4. What is a marquee in HTML?
Marquee is used for scrolling text on a web page. It scrolls the image or text up, down, left, or right automatically. To apply for a marquee, you have to use </marquee> tags.
5. How do you separate a section of texts in HTML?
We separate a section of texts in HTML using the below tags:
<br> tag â It is used to separate the line of text. It breaks the current line and shifts the flow of the text to a new line.
<p> tagâThis tag is used to write a paragraph of text.
<blockquote> tagâThis tag is used to define large quoted sections.
6. Define the list types in HTML?
The list types in HTML are as below:
Ordered listâThe ordered list uses <ol> tag and displays elements in a numbered format.
Unordered listâThe unordered list uses <ul> tag and displays elements in a bulleted format.
Definition listâThe definition list uses <dl>, <dt>, <dd> tags and displays elements in definition form like in a dictionary.
7. How do you align list elements in an HTML file?
We can align the list elements in an HTML file by using indents. If you indent each nested list in further than the parent list, you can easily align and determine the various lists and the elements that it contains.
8. Differentiate between an Ordered list and an Unordered list?
An unordered list uses <ul> </ul> tags and each element of the list is written between <li> </li> tags. The list items are displayed as bullets rather than numbers.
An ordered list uses <ol> </ol> tags and each element of the list is written between <li> </li> tags. The list items are displayed as numbers rather than bullet points.
<!DOCTYPEhtml><html><body><h2>HTML List Example</h2><ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol></body></html>
9. How do we insert a comment in HTML?
We can insert a comment in HTML by beginning with a lesser than sign and ending with a greater than sign. For example, <!- and ->.
An empty sequence of space characters is called the white space in HTML. This white space is considered as a single space character in the HTML.
White space helps the browser to merge multiple spaces into one single space, and so taking care of indentation becomes easier. White space helps in better organizing the content and tags, making them readable and easy to understand.
12. How do you create links to different sections within the same HTML web page?
We use the <a> tag, along with referencing through the use of the # symbol, to create several links to different sections within the same web page.
13. How do you create a hyperlink in HTML?
We use the anchor tag <a> to create a hyperlink in HTML that links one page to another page. The hyperlink can be added to images too.
14. Define an image map?
An image map in HTML helps in linking with the different kinds of web pages using a single image. It can be used for defining shapes in the images that are made part of the image mapping process.
15. Why do we use a style sheet in HTML?
A style sheet helps in creating a well-defined template for an HTML webpage that is both consistent as well as portable. We can link a single style sheet template to various web pages, which makes it easier to maintain and change the look of the website.
16. 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 not used for italic. Instead of these we use <strong></strong> and <em></em> tags.
17. What is SVG in HTML?
HTML SVG is used to describe the vector or raster graphics. SVG images and their behaviors are defined in XML text files.
We mostly use it for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.
18. What would happen if there is no text between the HTML tags?
There would be nothing to format if there is no text present between the tags. Therefore, nothing will appear on the screen.
Some tags, such as the tags without a closing tag like the <img> tag, do not require any text between them.
19. How do you create nested web pages in HTML?
Nested web pages basically mean a webpage within a webpage. We can create nested web pages in HTML using the built-in iframe tag. The HTML <iframe> tag defines an inline frame. For example:
<!DOCTYPEhtml><html><body><h2>HTML Iframes example</h2><p>specify the size of the iframe using the height and width attributes:</p><iframesrc="https://aguidehub.com/"height="600"width="800"></iframe></body></html>
20. How do you add buttons in HTML?
We can use the built-in Button tag in HTML to add buttons to an HTML web page.
<!DOCTYPEhtml><html><body><h2>HTML Button Tag Example</h2><buttonname="button"type="button">CLICK ME</button></body></html>
21. What are the different types of headings in HTML?
There are six types of heading tags in HTML which are defined with the <h1> to <h6> tags. Each type of heading tag displays a different text size from another. <h1> is the largest heading tag and <h6> is the smallest. For example:
<!DOCTYPEhtml><html><body><h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6></body></html>
22. How do you insert an image in the HTML webpage?
You can insert an image in the HTML webpage by using the <img> tag check followinf code for example:
You can add colour to the text in HTML by using the style attribute:
<!DOCTYPEhtml><html><body><h2>HTML Color Text Example</h2><h1style="color: Red">Hello HTML</h1><pstyle="color: Blue">Line 1</p><pstyle="color: Green">Line 2</p></body></html>
26. How do you add CSS styling in HTML?
There are three ways to include the CSS with HTML:
Inline CSS: It is used when less amount of styling is needed or in cases where only a single element has to be styled. To use inline styles add the style attribute in the relevant tag.
External Style Sheet: This is used when the style is applied to many elements or HTML pages. Each page must link to the style sheet using the <link> tag:
Internal Style Sheet: It is used when a single HTML document has a unique style and several elements need to be styled to follow the format. Internal styles sheet is added in the head section of an HTML page, by using the <style> tag:
If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.
28. How do you add JavaScript to an HTML webpage?
JavaScript is used for making HTML web pages more interactive, and user-friendly. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three major ways of including JavaScript:
Inline:
You can add JavaScript to your HTML elements directly whenever a certain event occurs. We can add the JavaScript code using attributes of the HTML tags that support it. Here is an example that shows an alert with a message when the user clicks on it:
<buttononclick="alert('Click the Button!');">Click!</button>
Script block:
You can define a script block anywhere on the HTML code, which will get executed as soon as the browser reaches that part of the document. This is why script blocks are usually added at the bottom of HTML documents.
<html><script>var x =1;var y =2;var result = x + y;alert("X + Y is equal to "+ result);</script></html>
External JavaScript file:
You can also import the JavaScript code from a separate file and keep your HTML code clutter-free. This is especially useful if there is a large amount of scripting added to an HTML webpage.
<html><scriptsrc="my-script.js"></script></html>
As you get prepared for your job interview, we hope that these HTML Interview Questions have provided more insight into what types of questions you are likely to come across.
29. What is the difference between HTML elements and tags?
Elements
The element is an individual component of the HTML web page or document. It represents semantics or meaning. For example, the title element represents the title of the document.
Tags
It is the root of the HTML document which is used to specify that the document is HTML. For example, the Head tag is used to contain all the head element in the HTML file.
30. Explain the layout of HTML.
HTML layout specifies a way in which the web page is arranged. Every website has a specific layout to display content in a specific manner. Following are different HTML elements which are used to define the different parts of a webpage:
<header>: It is used to define a header for a document or a section.
<nav>: This defines a container for navigation links
<section>: It is used to define a section in a document
<article>: This is used to define an independent, self-contained article
<aside>: It is used to define content aside from the content
<footer>: It is used to define a footer for a document or a section
31. Is the <!DOCTYPE html> tag considered as a HTML tag?
No, the <!DOCTYPE html> declaration is not an HTML tag.
There are many type of HTML, such as, HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct the web browser about the HTML page.
32. Why is a URL encoded in HTML?
An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a â%â followed by hexadecimal digits.
33. What are the entities in HTML?
The HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. These characters are replaced because some characters are reserved in HTML.
34. Can you create a multi-colored text on a web page?
Yes, we can create a multi-colored text on a web page. To create a multicolor text, you can use <font color="color"> </font> for the specific texts that you want to color.
35. What is the advantage of collapsing white space?
White spaces are a blank sequence of space characters, which is 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.
36. How do you create text on a webpage that allows you to send an email when clicked?
To change the text into a clickable link to send an email, you need to use the mailto command within the href tag. You can write it in the following way:
<ahref="mailto:youremailaddress">text to be clicked</a>
37. How are active links different from normal links?
The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link. Whereas, others recognize active links when the link has the focus. Those that donât have a mouse cursor over that link is considered a normal link.
38. Are there instances where the text will appear outside of the browser?
By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.
39. What are the limits of the text field size?
The default size for a text field is around 13 characters. However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. Also, if the size attribute is set to 0, the size will be set to the default size of 13 characters.
40. What happens if there is no text between the tags? Does this affect the display of the HTML file?
If there is no text present between the tags, there is nothing to format. Therefore, no formatting will appear. Some tags, such as the tags without a closing tag like the tag, do not require any text between them.
41. List the media types and formats supported by HTML.
HTML supports a wide range of media formats for sound, music, videos, movies, and animations. Some of the extensions supported by each media format are:
Cell Spacing is referred to as the space or gap between the two cells of the same table. Whereas, Cell Padding is referred to as the gap or space between the content of the cell and cell wall or cell border.
HTML is an application of Standard Generalized Markup Language. Whereas, XML is an application of Extensible Markup Language.
The first one is a static Web Page whereas the later one is a dynamic Web Page.
HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
HTML is about displaying information whereas XHTML is about describing the information.
44. What are logical and physical tags in HTML?
Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclose the text in the strong tag, it tells the browser that enclosed text is more important than other texts.
Physical tags are used to tell the browser how to display the text enclosed in the physical tag. Some of the examples of physical tags are <b>, <big>, <i>.
45. What is a class? What is an ID?
A class is a style (i.e., a group of CSS attributes) that can be applied to one or more HTML elements. This means it can apply to instances of the same element or instances of different elements to which the same style can be attached. Classes are defined in CSS using a period followed by the class name. It is applied to an HTML element via the class attribute and the class name.
The following snippet shows a class defined and its application to an HTML DIV element.
Also, you could define a style for all elements with a defined class. This is demonstrated with the following code that selects all P elements with specified column class.
p.column{font-color: black;}
An ID selector is a name assigned to a specific style. It can be associated with one HTML element with the assigned ID. Within CSS, ID selectors are defined with the # character followed by the selector name.
The following snippet shows the CSS example1 defined followed by the use of an HTML elementâs ID attribute, which pairs it with the CSS selector.
#example1{background: blue;}
46. What is microdata in HTML5?
Microdata are a group of name-value pairs that extract data for search engines and site crawlers. Each name-value pair is called a property and a group of them is called an item. Most search engines follow schema.org vocabulary for the extraction of microdata.
itemid â A unique, global identifier of an item
itemprop â Adds properties to an item
itemref â Provides a list of element IDs with additional properties
itemtype â Specifies the vocabularyâs URL that will be used to define itemprop
itemscope â Defines the itemtypeâs scope that is associated with it
47. What is HTML5? What are some of its new features that were not present in HTML?
HTML5 is the latest version of the Hypertext Markup Language. Some of the new features of HTML5 are:
HTML5 supports SVG, canvas, and other virtual vector graphics. In HTML, vector graphics could only be used in conjunction with Flash, VML (Vector Markup Language), or Silverlight.
HTML5 allows JavaScript to run within a web browser. In the previous version, JavaScript was allowed to run in the browser interface thread.
HTML5 is not based on SGML. It comes with enhanced parsing rules for improved compatibility.
In HTML5, web SQL databases are used to store data temporarily. Previously, only browser cache was used.
Some elements have been removed â applet, isindex, noframes, acronym, dir, font, frame, frameset, and big are removed.
New elements have been added â time, summary, aside, audio, command, and data.
48. Will HTML5 work if I donât use ?
No, the HTML 5 tags wonât work properly and the browser wonât be able to tell that itâs an HTML document.
49. What is datalist tag?
The HTML 5 datalist tag provides an autocomplete feature on the form element. It facilitates users to choose the predefined options to the users to select data.
<label>
Enter your favorite cricket player: Press any character<br/><inputtype="text"id="favCktPlayer"list="CktPlayers"/><datalistid="CktPlayers"><optionvalue="Sachin Tendulkar"></option><optionvalue="Brian Lara"></option><optionvalue="Jacques Kallis"></option><optionvalue="Ricky Ponting"></option><optionvalue="Rahul Dravid"></option><optionvalue="Shane Warne"></option><optionvalue="Rohit Sharma"></option><optionvalue="Donald Bradman"></option><optionvalue="Saurav Ganguly "></option><optionvalue="AB diVilliers"></option><optionvalue="Mahendra Singh Dhoni"></option><optionvalue="Adam Gilchrist"></option></datalist></label>
50. What are void elements in HTML?
HTML elements which do not have closing tags or do not need to be closed are Void elements. For Example <br />, <img />, <hr />, etc.
51. Define multipart form data?
Multipart form data is one of the values of the enctype attribute. It is used to send the file data to the server-side for processing. The other valid values of the enctype attribute are text/plain and application/x-www-form-urlencoded.
52. How to optimize website assets loading?
To optimize website load time we need to optimize its asset loading and for that:
CDN hosting - A CDN or content delivery network is geographically distributed servers to help reduce latency.
File compression - This is a method that helps to reduce the size of an asset to reduce the data transfer
File concatenation - This reduces the number of HTTP calls
Minify scripts - This reduces the overall file size of js and CSS files
Parallel downloads - Hosting assets in multiple subdomains can help to bypass the download limit of 6 assets per domain of all modern browsers. This can be configured but most general users never modify these settings.
Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be loaded on a need basis.
53. What are the various formatting tags in HTML?
HTML has various formatting tags:
<b> - makes text bold
<i> - makes text italic
<em> - makes text italic but with added semantics importance
<big> - increases the font size of the text by one unit
<small> - decreases the font size of the text by one unit
<sub> - makes the text a subscript
<sup> - makes the text a superscript
<del> - displays as strike out text
<strong> - marks the text as important
<mark> - highlights the text
<ins> - displays as added text
54. How can we club two or more rows or columns into a single row or column in an HTML table?
HTML provides two table attributes rowspan and colspan to make a cell span to multiple rows and columns respectively.
55. Is it possible to change an inline element into a block level element?
Yes, it is possible using the display property with its value as block, to change the inline element into a block-level element.
56. In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?
There are mainly 7 values of position attribute that can be used to position an HTML element:
static: Default value. Here the element is positioned according to the normal flow of the document.
absolute: Here the element is positioned relative to its parent element. The final position is determined by the values of left, right, top, bottom.
fixed: This is similar to absolute except here the elements are positioned relative to the element.
relative: Here the element is positioned according to the normal flow of the document and positioned relative to its original/ normal position.
initial: This resets the property to its default value.
inherit: Here the element inherits or takes the property of its parent
57. What is the difference between display: none and visibility: hidden, when used as attributes to the HTML element.
When we use the attribute visibility: hidden for an HTML element then that element will be hidden from the webpage but still takes up space. Whereas, if we use the display: none attribute for an HTML element then the element will be hidden, and also it wonât take up any space on the webpage.
58. How to specify the link in HTML and explain the target attribute?
HTML provides a hyperlink - <a> tag to specify the links in a webpage. The href attribute is used to specify the link and the target attribute is used to specify, where do we want to open the linked document. The âtargetâ attribute can have the following values:
_self: This is a default value. It opens the document in the same window or tab as it was clicked.
_blank: It opens the document in a new window or tab.
_parent: It opens the document in a parent frame.
_top: It opens the document in a full-body window.
59. Difference between link tag <link> and anchor tag <a>?
The anchor tag <a> is used to create a hyperlink to another webpage or to a certain part of the webpage and these links are clickable, whereas, link tag <link> defines a link between a document and an external resource and these are not clickable.
60. What are forms and how to create forms in HTML?
The HTML form is used to collect the user inputs. HTML provides a <form> tag to create forms. To take input from the user we use the <input> tag inside the form so that all collected user data can be sent to the server for processing. There are different input types like âbuttonâ, âcheckboxâ, ânumberâ, âtextâ, âpasswordâ, âsubmitâ etc.
<formaction="/submit_data.php"><label>Enter your name: </label><inputtype="text"name="name"/><label>Enter Mobile number </label><inputtype="number"name="mobile_no"/><inputtype="submit"value="Submit"/></form>
61. What is the difference between tag and tag?
The <figure> tag specifies the self-contained content, like diagrams, images, code snippets, etc. <figure> tag is used to semantically organize the contents of an image like image, image caption, etc., whereas the <img> tag is used to embed the picture in the HTML5 document.
62. Is the <datalist> tag and <select> tag same?
No. The <datalist> tag and <select> tag are different. In the case of <select> tag a user will have to choose from a list of options, whereas <datalist> when used along with the <input> tag provides a suggestion that the user selects one of the options given or can enter some entirely different value.
63. What is the difference between <meter> tag and <progress> tag?
<progress> tag should be used when we want to show the completion progress of a task, whereas if we just want a scalar measurement within a known range or fraction value. Also, we can specify multiple extra attributes for <meter> tags like âformâ, âlowâ, âhighâ, âminâ, etc.
64. Is drag and drop possible using HTML5 and how?
Yes, in HTML5 we can drag and drop an element. This can be achieved using the drag and drop-related events to be used with the element which we want to drag and drop.
65. Explain new input types provided by HTML5 for forms?
Following are the significant new data types offered by HTML5:
Date - Only select date by using type = âdateâ
Week - Pick a week by using type = âweekâ
Month - Only select month by using type = âmonthâ
Time - Only select time by using type = âtimeâ.
Datetime - Combination of date and time by using type = âdatetimeâ
Datetime-local - Combination of date and time by using type = âdatetime-local.â but ignoring the timezone
Color - Accepts multiple colors using type = âcolorâ
Email - Accepts one or more email addresses using type = âemailâ
Number - Accepts a numerical value with additional checks like min and max using type = ânumberâ
Search - Allows searching queries by inputting text using type = âsearchâ
Tel - Allows different phone numbers by using type = âtelâ
Placeholder - To display a short hint in the input fields before entering a value using type = âplaceholderâ
Range - Accepts a numerical value within a specific range using type = ârangeâ
Url - Accepts a web address using type = âurlâ
MathML stands for Mathematical Markup Language. It is used for displaying mathematical expressions on web pages. For this <math> tag is used.
<!DOCTYPEHTML><html><head></head><body><math><mrow><mrow><msup><mi> a </mi><mn> 2 </mn></msup><mo> + </mo><msup><mi> b </mi><mn> 2 </mn></msup><mo> + </mo><mn> 2 </mn><mn> a </mn><mn> b </mn></mrow><mo> = </mo><mn> 0 </mn></mrow></math></body></html>
This displays the equation a2 + b2 + 2ab = 0.
67. What is the usage of a novalidate attribute for the form tag that is introduced in HTML5?
Its value is a boolean type that indicates whether or not the data being submitted by the form will be validated beforehand. By making this false, forms can be submitted without validation which helps users to resume later also.
Raster Images - The raster image is defined by the arrangement of pixels in a grid with exactly what color the pixel should be. Few raster file formats include PNG(.png), JPEG(.jpg), etc.
Vector Images - The vector image is defined using algorithms with shape and path definitions that can be used to render the image on-screen written in a similar markup fashion. The file extension is .svg
69. What are different approaches to make an image responsive?
Art direction - Using <picture> element the landscape image fully shown in desktop layout can be zoomed in with the main subject in focus for a portrait layout.
Resolution switching - Instead of zoom and crop the images can be scaled accordingly using vector graphics. Also, this can be further optimized to serve different pixel density screens as well.
70. What is a manifest file in HTML5?
The manifest file is used to list down resources that can be cached. Browsers use this information to make the web page load faster than the first time. There are 3 sections in the manifest file
CACHE Manifest - Files needs to be cached
Network - File never to be cached, always need a network connection.
Fallback - Fallback files in case a page is inaccessible
