HTML is the standard markup language use for displaying designed documents in web browser. Without this language, it is nearly impossible to organize text, add videos or images in the web page.
Table of Contents
- Basic HTML Interview Questions
- Advanced HTML Interview Questions
- Scenario-Based HTML Interview Questions
- HTML Interview Questions for professionals with 5 years of experience
- HTML Interview Questions for professionals with 10 years of experience
Top HTML Interview Questions and Answers
Here are the HTML interview questions that are most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead in your career in web development or HTML. Here we have gathered both the basic as well as advanced HTML Interview questions for freshers and experienced level candidates.
Basic HTML Interview Questions
Here is the list of the most important basic HTML interview questions for freshers:
Q1. What is HTML?
Ans. HTML or Hypertext Markup Language was created by Berners-Lee in 1991. It is a markup language used to create and structure website templates or web pages to present the content on the World Wide Web. It consists of a series of elements and the HTML elements tell the browser how to display the content. HTML helps in making the text more interactive and dynamic. You can save an HTML page by adding .html or .html in web page name.
Q2. What are the features of HTML?
Ans. The following are the features of HTML:
- It is a markup language that provides flexibility to design web pages with text.
- It is easy to use and learn.
- HTML is platform-independent and can be used on Windows, Linux, and Macintosh, etc.
- It enables programmers to add images, video, and audio to a web page to make it more interactive.
- HTML allows programmers to add a link on the web pages, helping the readers to browse the information of their interest.
- It is case-insensitive. You can use tags either in lower-case or upper-case.
Q3. What is the difference between HTML elements and tags?
Ans. The differences between HTML elements and tags are:
|1. The element is an individual component of the HTML web page or document that consists of a start tag, its attributes, an end tag, and everything in between.||1. HTML tag (either opening or closing) is used to mark the start or end of an element.|
|2. They usually consist of a start tag, content, and an end tag.||2. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.|
|3. HTML Elements hold the content.||3. HTML Tags hold the HTML element.|
|4. They specify the general content.||4. HTML tags are like keywords. Each tag has a unique meaning.|
|5. For example, <p>This is an example of a paragraph.</p>||5. For example, <a> is an opening anchor tag and </a> is a closing anchor tag.|
Q4. Do all HTML tags have an end tag?
Ans. No, all HTML tags do not have an end tag. For example, <br> tag is used to break the line, <image> tag is used to insert an image into a document. They are considered as self-closing tags and do not require an end tag.
Q5. Which HTML tags are used while displaying the data in the tabular form?
Ans. The following HTML tags are used to display the data in the tabular form:
|1||<table>||Defines a table.|
|2||<tr>||Defines a row in a table.|
|3||<th>||It defines a header cell in a table.|
|4||<td>||Defines a cell in a table.|
|5||<caption>||This tag defines the table caption.|
|6||<colgroup>||This tag 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>||This tag groups the body content in a table.|
|9||<thead>||It groups the header content in a table.|
|10||<tfooter>||It groups the footer content in a table.|
Q6. Write the basic structure of the HTML template.
Ans. The basic structure of the HTML template is:
<title>Title of the page</title>
<body>content of the page</body>
Q7. What is HTML5? What are some of its new features that were not present in HTML?
Ans. 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 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.
Q8. What are the most commonly used lists that are used while designing a page?
Ans. The following are the most commonly used lists that are used while designing a page:
- unordered list (<ul> tag) – displays elements in a bulleted format.
- ordered list (<ol> tag) – displays elements in a numbered format.
- definition list (<dl>, <dt> and <dd> tags) – displays elements in definition form like in a dictionary.
Q9. What are HTML Attributes?
Ans. HTML attributes provide additional information about HTML elements. They are defined directly after the tag name. They only appear in opening tags and not in closing tags.
HTML attributes usually consist of name/value pairs like name=”value”. The Attribute values should always be enclosed in quotation marks. The name parameter takes the name of the property that is to be assigned to the element. The value takes the property value or extent of the property names that can be aligned over the element.
Some commonly used HTML attributes include src Attribute, alt Attribute, id Attribute, and href Attribute.
Q10. What is semantic HTML?
Ans. Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics, or meaning of the content in webpages and web applications rather than just defining its look or appearance. It introduces meaning to the code we write.
For example: <form>, <table>, and <article> these tags clearly defines its content.
Q11. What is the HTML article element?
Ans. The HTML <article> Element specifies independent and self-contained content in a document, page, application, or site, which is independently distributable or reusable. Since it is independent of the document or website, hence, it can be viewed, reused, and distributed separately.
For example, syndication. The HTML article element is used in:
- Forum post
- Blog post
- Newspaper article
Q12. Explain the layout of HTML.
Ans. HTML layout represents how all the elements in the document are arranged. It is a vital part of basic page design and is important for creating a website so that the website can appear professional and attractive. Every website has a specific layout to display content in a specific manner. The following HTML elements are used to define the different parts of a webpage:
- <header>: define a header for a document or a section.
- <nav>: defines a container for navigation links
- <section>: it defines a section in a document
- <article>: define an independent, self-contained article
- <aside>: it defines content aside from the content
- <footer>: define a footer for a document or a section
- <details>: define additional details
Q13. What is the difference between a block-level element and an inline element?
Ans. The differences between block-level elements and inline elements are:
|Block-level Elements||Inline Elements|
|They start on a new line.||Do not start on a new line and can begin within a line.|
|Stretch to fill the full width available to them.||Take up as much width as necessary. Its width only extends as far as it is defined by its tags.|
|They have a top and a bottom margin.||Inline elements do not have a top and a bottom margin.|
|Examples of block-level elements in HTML: <div>, <img>, <form>, <main>, <table>, <video>.||Examples of inline elements: <span>, <img>, <strong>, <code>, <input>, <time>, <i>.|
Q14. How to insert an image in HTML?
Ans. Images can be inserted in an HTML page by using the <img> tags. It is an empty tag that has only attributes and it does not require a closing tag. The <img> tag must be used inside <body>…</body> tag. Following parameters will be required to insert an image using <img> tag
- src attribute – It is used to add the path to the image (URL of the image).
- alt attribute – It is for adding alternate text.
- Width – To add the width of the image
- Height – To add the height of the image
<img src=”img_pancakes.jpg” alt=”Blueberry Pancakes” width=”500″ height=”600″>
Below is the code to insert an image in an HTML page:
<img src=”URL” alt=”add_alttext” width=”width” height=”height”>
Q15. How to align text in HTML?
Ans. HTML content is aligned on a page using the CSS text-align property. It sets the horizontal alignment of the content inside a block element or table-cell box. The text-align property works like vertical-align but in the horizontal direction. It works on text as well as on all other content inside the block element, such as images and buttons.
Below is the code to align text in HTML:
Q16. How to write text on image in HTML
Ans. Below is the code to write text on image in HTML:
<img src=”img_tree_wide.jpg” alt=”Tree” style=”width:100%;”>
<div class=”bottom-left”>Bottom Left</div>
<div class=”top-left”>Top Left</div>
<div class=”top-right”>Top Right</div>
<div class=”bottom-right”>Bottom Right</div>
Q17. How comments can be added in CSS?
Ans. We can add comments in CSS using /* and */.
Q18. How to underline text in HTML?
Ans. To underline the text in HTML, we use the <u> tag.
Q19. How do you bold text in HTML?
Ans. The <b> </b> tag or <strong> </strong> tag are used to bold text in HTML.
Advanced HTML Interview Questions and Answers
The following are the commonly asked advanced-level HTML interview questions:
Q20. What are the new input types in HTML5 for forms?
Ans. The following are the new input types in HTML5 for forms:
|INPUT TYPE||DESCRIPTION||HTML MARKUP|
|date||Allows the user to select a date||<input type=”date”>|
|datetime||Allows the user to select date and time using UTC date and time format||<input type=”datetime”>|
|datetime-local||To select the date and time as per the local time||<input type=”datetime-local”>|
|month||Select month and year||<input type=”month”>|
|time||The time of day||<input type=”time”>|
|week||Enables you to select the week and year||<input type=”week”>|
|color||Enables you to enter a simple color value||<input type=”color””>|
|Validates the input using the standard email format||<input type=”email”>|
|search||Searches a data set||<input type=”search”>|
|+ More 2 Rows|
Q21. What is a marquee?
Ans. Marquee tag is a non-standard HTML element that causes text to scroll up, down, left, or right automatically. You can put the text which you want to scroll on a web page within the following tag:
Q22. What happens if you open the external CSS file in a browser?
Ans. If you try to open the external CSS file in a browser, the browser will not open the file. This is because the file has a different extension. The only way to use an external CSS file is to reference it using the <link/> tag within another HTML document.
Q23. Which tags are used to separate a section of texts?
Ans. The following three tags are used to separate a section of texts:
- <br> – to separate the line of text. It breaks the current line and conveys the flow to the next line
- <p> – It contains the text in the form of a new paragraph.
- <blockquote> – defines a large quoted section.
Q24. Explain the use of an iframe tag.
Ans. The <iframe> tag specifies an inline frame. It is used to display a web page within a web page (to embed another document within the current HTML document).
For example – The src attribute is used to specify the URL of the document that occupies the iframe.
Q25. What is the difference between LocalStorage and SessionStorage Objects?
Ans. The differences between LocalStorage and SessionStorage Objects are:
|LocalStorage Object||SessionStorage Object|
|1. It stores the data without an expiry date.||1. Stores the data for only one session.|
|2. The data can be shared between multiple windows of the browser.||2. Data is accessible only in the current window of the browser.|
|3. Data is not deleted when the browser window closes.||3. The data is deleted if the browser window closes.|
Q26. What are the different media types and formats supported by HTML?
Ans. HTML supports a variety of media formats for sound, music, videos, movies, and animations. The different formats supported by HTML are:
- Images: jpg, jpeg, png, gif, svg, apng, BMP ico
- Audio: RealAudio, WMA, MIDI, AAC, WAV, MP3, MP4
- Video: MPEG, AVI, QuickTime, RealVideo, WMV, Flash, WebM, and MP4
Q27. Explain an image map in HTML.
Ans. An image map is defined by the <map> tag. Using this the image map tag, we can linking the different web pages using a single image. We can add one or more clickable areas in a single image using <area> tags.
Q28. How to create multi-colored text on a web page?
Ans. We can use <font color =”color”> </font> to create multi-colored text on a web page for the specific texts that you want to color.
Q29. How to add a favicon in HTML?
Ans. Below is the code to add a favicon. Access the code of your webpage and in the <HEAD> section add the following code.
<link rel=”icon” type=”image/png” href=”/favicon.png”/>
<link rel=”icon” type=”image/png” href=”https://example.com/favicon.png”/>
Q30. What is the difference between HTML and XHTML?
Ans. The differences between HTML and XHTML are:
|HTML stands for Hypertext Markup Language.||XHTML stands for Extensible Hypertext Markup Language.|
|It is extended from SGML (Standard Generalized Markup Language).||It has features of both XML and HTML.|
|HTML is a static Web Page.||XHTML is a dynamic Web Page.|
|It uses a document file format.||It uses markup language.|
|HTML is about displaying information.||It is about describing the information.|
|Not case sensitive.||XHTML is case-sensitive. Every tag and attribute should be in lower case.|
|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.|
|All content can be included in the body element.||All contents must be put in blocks.|
|It requires a lenient HTML-specific parser.||Parsing is done with a standard XML parser.|
|+ More 1 Rows|
Q31. What is URL Encoding? Why are URLs encoded in HTML?
Ans. URL Encoding is the process of encoding non-ASCII characters in URLs to a format that is universally accepted by web browsers. URLs are sent over the Internet using the ASCII character set. If a URL contains characters outside the ASCII set, the URL has to be converted.
URL is encoded in HTML as it converts non-ASCII characters into a format that can be transmitted over the web. The URL encoding replaces non-ASCII characters with a “%” followed by hexadecimal digits.
Q32. What is an empty element?
Ans. An empty element is an HTML element that has no content. Example <br>
Q33. How many types of CSS can be included in HTML?
Ans. This is one of the commonly asked HTML CSS interview questions.
There are three types of CSS:
- Inline CSS – using the style attribute inside HTML elements
Inline CSS is used for styling small contexts. It contains the CSS property in the body section attached with the element. The style attribute is used in the relevant tag to use inline styles add.
<h1 style=”color:red;”>A Red Heading</h1>
<p style=”color:blue;”>A blue paragraph.</p>
- Internal or Embedded CSS – using <style> element in the <head> section
It requires you to add <style> tag in the <head> section of the HTML document. It is most suited for styling a single page that has a unique style. However, using this style for multiple pages is time-consuming as CSS rules need to be added to every page of the website.
- External CSS – using a <link> element to link to an external CSS file
It is used when the style is applied to many pages. To use an external CSS, add a link to it in the <head> section of each HTML page.
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
Q34. What is the use of the figure tag in HTML 5?
Ans. The <figure> tag identifies self-contained content related to the main content. It is used for adding self-contained content like photos, diagrams, illustrations, etc. The figure, its caption, and its contents are referenced as a single unit from the main flow of the document. The <figure> tag has two elements img src and figcaption. Img src is used for adding image source in a document while figcaption sets the caption of an image.
<img src=”pancakes.jpg” alt=”Blueberry Pancakes”>
<figcaption>A Stack of Blueberry Pancakes</figcaption>
Q35. What is a datalist tag?
Ans. The <datalist> tag provides autocomplete feature in the HTML files. It enables users to add the autocomplete form based on the predefined options. It can be used with an input tag so that users can easily fill the data in the forms using predefined options.
Example: If you press A, it will show a list of cars starting with A letter.
<label for=”car”>Choose your car from the list:</label>
<input list=”cars” name=”car” id=”car”>
Q36. What are HTML entities?
Ans. A Group of characters that are used to represent reserved and invisible characters in HTML are known as HTML entities. These strings start with an ampersand(&) symbol and end with a semicolon(;). They can also be used to replace some characters challenging to type on a standard keyboard.
Syntax: &entity_name; or &#entity_number;
Few entity symbols and their number are mentioned in below table:
|Character||Symbol||Entity Name||Entity Number|
|“||Double quotation mark||"||"|
Q37. What is the difference between cell padding and cell spacing?
|Cell Padding||Cell Spacing|
|cell padding is the white space that exists between the edge of a table cell and its contents.||The space that exists between specific neighboring cells is known as “cell spacing.”|
|It is associated with just one cell.||It is associated with multiple cells.|
|Cellpadding’s default value is 1.||Cellspacing’s default value is 2.|
Q38. What are the different ways to display HTML elements?
Ans. The different ways to display HTML elements are listed below:
- inline: Any element at the block level can be shown as an inline element using this technique. Aspect values for the element’s height and width have no bearing.
- none: The HTML element can be hidden by using this property.
- block: used to display inline element as a block element.
- inline-block: This property is identical to inline, however utilizing the display as inline-block, allows us to format the element by using its height and width values.
- flex: The element and container are shown as flexible construction. It adheres to flexbox properties.
- inline-flex: While its content adheres to the flexbox specifications, the flex container is shown as an inline element.
- grid: It presents the HTML elements in a grid container.
Q39. What is the difference between display: none and visibility: hidden?
Ans. When an HTML element has the property “visibility: hidden,” it will be hidden from the webpage yet still occupy space. However, if we apply the “display: none” property for an HTML element, the element will be hidden and will not occupy any space on the website.
Q40. What is the canvas element in HTML5?
Q41. Will HTML5 work if I don’t use <!DOCTYPE html>?
Ans. No, the HTML 5 tags won’t work properly and the browser won’t be able to tell that it’s an HTML document.
Q42. Why is the required attribute used in HTML5?
Ans. This attribute is mainly used for form validation. Before submitting the form, it compels the user to enter text in the text area or text field.
Q43. What is the difference between <em>, <i> and <strong>, <b> tags?
Ans. The effects of the tags <strong>, <b> and <em>, <i> on a typical webpage are identical. Italic and bold are indicated by the tags <b> and <i>. These two tags do little more than apply font styles, while the bold tag (<b>) simply adds extra ink to the text.
While the <strong> and <em> tags indicate that a section of text is more important than other material in both terms of importance and emphatic stress. These tags’ meanings are semantic.
Q44. What is the difference between <div> and <span> tag?
Ans. The difference between the span and div elements is that the span element is in-line and typically used for a brief paragraph or another tiny block of HTML inside a line. A div or division element, on the other hand, is a block line, which is comparable to having a line break before and after it and is used to combine larger portions of code.
Scenario-Based HTML Interview Questions
Q1. If there isn’t any text in between the HTML tags, what will happen?
Ans. If no text is present in between the tags, there would be nothing to format. As a result, nothing will show up on the screen. Some tags, such as those that don’t have a closing tag, like the <img> tag, don’t need any text in between them.
Q2. How can you tell what character set an HTML5 document is using? What distinguishes this from earlier HTML standards?
Ans. In HTML5, the charset attribute of a <meta> tag inside the document’s <head> element can be used to specify the encoding being utilized.
Since the charset attribute wasn’t present in earlier HTML standards, this syntax is a little bit simpler. The following is an example of how the <meta> element would be used in an HTML 4.01 document:
Q3. What is the use of Geolocation API in HTML5?
HTML Interview Questions for Intermediate – 5 years experience
Q1. What is the benefit of collapsing the white space in HTML?
Ans. White space is a term used to describe empty or blank values in the code the browser reads and displays. The collapsing of these white spaces is a unique characteristic of HTML. The advantage of this feature is in its ability to reduce the time of transmitting data between server and client by removing unused bytes taken up by the white spaces. If you accidentally leave excess white space, the browser will disregard it and perfectly display the UI.
Q2. What is the use of the MathML element in HTML5?
Ans. Mathematics Markup Language is known as MathML. Like other HTML elements, it is used to display mathematical statements or equations in web browsers.
Q3. Is it possible for the text to occasionally appear elsewhere other than the browser?
Ans. The text is automatically wrapped to fit the browser window by default. The text might, however, go outside the browser window if it is a component of a table cell with a fixed width.
Q4. In terms of style sheets, what is the hierarchy that is being used?
Ans. The style definition that is closest to the actual tag takes precedence when a single selector has three separate style definitions. External style sheets have a lower priority than embedded style sheets, which have a lower priority than the inline style.
Q5. Compare and contrast an HTML specification with a browser’s implementation.
Ans. For a document to be considered “valid” in accordance with an HTML specification, such as HTML5, it must follow a set of requirements. In addition, a specification gives guidelines for how a browser should comprehend and display such a document.
A browser is deemed to “support” a specification if it processes legitimate documents in accordance with the specifications’ guidelines. Although most of the HTML5 specification is supported by all of the main browsers, not all of it is supported by any browser as of yet, hence it is up to the developer to determine whether the feature they plan to utilize will be supported by all of the browsers they intend to use to view their content.
Due to this, despite the enhanced specifications, cross-browser support still causes developers problems. Additionally, while HTML5 specifies certain guidelines for invalid documents (those with syntactical faults), faulty documents may contain anything, making it hard for the specification to fully address every scenario. Thus, the browser is left in charge of making numerous decisions regarding how to handle damaged documents.
Q6. Can elements from articles be found in sections? Can a section element be found in an article? Give usage illustrations.
Ans. The answer to both queries is “yes,” meaning that both “section” and “article” elements can be found in both a section and an article.
A personal dashboard page might, for instance, have sections for social network interactions and the most recent news stories, the latter of which might have many article elements.
On the other hand, an article can have a section at the end for reader feedback.
Q7. What is an SVG tag in HTML? Give Example.
Ans. Scalable Vector Graphics is the abbreviation for the HTML SVG. A modularized language called HTML SVG is used to describe visuals in XML. Vector and hybrid vector/raster graphics in two dimensions are described in XML. It comes from the W3C. Text files containing XML define the actions of SVG images. The ability to produce and edit SVG images as XML files means that they can be done with a text editor, but usually speaking, drawing applications like Inkspace are preferred for this purpose.
Q8. What is the difference between meter and progress tag?
Ans. The meter tag measures data within a specified range, whereas the progress tag just represents the task’s progress.
HTML Interview Questions for Intermediate – 10 years experience
Q1. How can website assets be optimized?
Ans. To optimize website assets, we must comprehend a few fundamental optimization principles. First, we need to reduce the download size and the number of HTTP queries. We can use the following strategies to optimize website assets:
- File compression
- File concatenation
- CDN Hosting
- Offloading assets
- Refining code
Q2. What is data transfer API?
Ans. The management of data transfers from one user to another within a domain is handled by the Data Transfer API. This transfer can be used, for example, to redistribute application data that belonged to a user who has left the company. You must first define a transfer before starting it with the insert method in order to use the Data Transfer API. The transfer can include application-specific parameters and is described in terms of one or more apps whose data will be transmitted.
- Choose which application(s) you want to transmit data to.
- Create a transfer resource that lists the users at the source and destination as well as the programs to which the data is to be sent.
- To add the transfer request, use the insert method.
Q3. What does HTML5’s application cache do and why is it necessary?
Ans. The HTML 5 application cache functionality is used to cache website data, making it accessible even when there is no internet connection. For desktop-based web applications that need to save data on local systems, it is highly helpful.
Q4. What does an HTML5 web worker do?
- The window object
- The document object
- The parent object
Q5. What is Microdata?
Ans. A standardized method of adding extra semantics to your web pages is by using microdata.
You can define your own unique elements using microdata and begin adding unique attributes to your web pages. Microdata is a general term for a collection of name-value pairs.
Each name-value pair in the groups is referred to as a property. Regular elements are used to represent objects and properties.
Q6. What are the custom attributes in HTML5?
Ans. Custom attributes are those that are specifically designed and are not included in the standard HTML5 attributes. They enable us to customize HTML tags by adding our own data. These can be used with any HTML element because they are not specialized. Custom attributes allow for the storage of additional data that is not required to have a specific purpose.
Q7. What is the use of the <output> tag in HTML and what are its attributes?
Ans. To represent a result for any kind of calculation in HTML <output> tag is used. Its attributes are mentioned below:
- for: It outlines the connection between the calculation’s inputs and outputs.
- form: This specifies the form to which the output element belongs.
- name: An <output> element’s name is specified via the name attribute.
If you are preparing to crack the interview for a web development post, this blog on top HTML interview questions will serve as the perfect guide for you to learn all the concepts required to clear an HTML interview and start your career in web development or HTML. We hope that the frequently asked HTML interview questions and answers mentioned in this blog will help you to crack your next interview and acquire your dream job.
Recently completed any professional course/certification from the market? Tell us what liked or disliked in the course for more curated content.