Top 50 HTML Interview Questions to Crack your next HTML Interview

HTML has proven to be the most basic building block of any web-page on the world wide web. Now that we have become familiar with the concepts of HTML, it is time to enhance our skills with some quick HTML interview questions. The article is divided into 2 parts:

  • HTML Interview Questions for Beginners
  • HTML Interview Questions for Intermediates and Experts

So let us start with HTML Interview Questions and Answers for Beginners.

Top HTML Interview questions answers (beginner intermediate level)

Stay updated with latest technology trends
Join DataFlair on Telegram!!

HTML Interview Questions for Beginners

1. What is HTML?

HTML is the core or skeleton of the internet or browser. We can use it with CSS, JavaScript, PHP, and other technologies to provide dynamism to a website. Hypertext refers to cross-referencing between different web-pages on the world-wide-web. HTML5 has come with new attributes, elements, and features that have made it possible for us to create more diverse and powerful web-applications.

2. Enumerate some of the new features of HTML5.

  • HTML 5 has come up with semantic elements like <header>,<section>, <footer>.
  • We can add multimedia onto the web pages by <audio> and <video> tags.
  • We can store data offline using Structured Query Language(SQL) as the database.
  • HTML5 allows users to store their data locally within the browser with more security, unlike its previous versions.
  • We can program Canvas i.e. a two-dimensional surface with JavaScript.
  • Geolocation − We can use the geolocation API to get or share the geographical coordinates of a user.
  • We can define microdata for our own customized elements beyond HTML5 and embed them onto our web page.

3. What is the difference between HTML and HTML5?

Basis for differenceHTML5HTML
Vector GraphicsHTML5 supports Canvas, SVG and other virtual vector graphics.HTML implements vector graphics using VML, Silver-light, etc.
Mobile-friendlyHTML5 is more mobile-friendly because of its high responsiveness.HTML is less mobile-friendly.
DeclarationThe doctype declaration is simple and easy.The doctype declaration is complex.
Drag and drop effectSupports drag and drop effect.Does not support drag and drop effect.
JavaScript supportHTML5 supports javascript and it can run in the background.Does not support javascript to run in the background.

4. What is <!DOCTYPE> in HTML?

The <!DOCTYPE html> indicates to the browser that the document is HTML5 type.

5. What are HTML tags?

We use HTML tags or keywords to display web-pages with certain properties. We can define HTML elements using tags i.e. an element consists of a starting tag, some content, and an ending tag.

6. What are the new media elements in HTML5?

  • <audio> -Adds audio to the web-page with this tag.
  • <video> – Embeds a video content in an HTML document.
  • <source> -Applies multiple media resources in media elements, such as audio, video, picture etc.
  • <embed> -We can use this tag to apply an external application or embedded content (a plug-in).
  • <track> -We can use this tag for subtitles or caption files while the video media is playing.

7. What is an image-map?

We can use image maps to create clickable regions in an image. The requirements for an image map are an image and a map. A map contains the information or rules related to an image’s clickable regions. We can define an image-map using the <map> element. We can insert an image using the <img> element. Along with this, an attribute ‘usemap’ is specified, which acts as a link between the image and the map.

8. How to embed audio and video in HTML5?

Embed video-

<!DOCTYPE html>
<html>
<body>
<video width = “650” height = “200” controls>
<source src = “myVideo.mp4” type = “video/mp4”>
</video>
</body>
</html>

Embed audio-

<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src = “myMusic.mp3” type = “audio/mpeg”>
</audio>
</body>
</html>

9. What is the use of the <article> tag?

The article tag defines the self-contained article or content.

10. How to insert a copyright symbol in a web-page?

We can insert the copyright symbol using the entity number © and entity name &copy.

11. How do we comment in an HTML document?

We can insert comments using <!–comment –> and the <comment> tag.

12. List some formatting elements in HTML?

  • <h1> to <h6> – Use this to add headings.
  • <b>- This to make the text bold.
  • <u>- We can use this to underline the text.
  • <strong>- This displays the content in a manner such that it appears as important.
  • <mark>- We can use this to highlight the text.
  • <sup>- This displays the content in superscript.
  • <sub>- We can use this to display the content in subscript.

13. What is the difference between HTML and XHTML?

Basis for DifferenceHTMLXHTML
DefinitionHTML, HyperText Markup Language is the markup language for creating web pagesXHTML (Extensible HyperText Markup Language) is a family of XML markup languages that extend versions of the widely used HTML.
Type of formatDocument FileMarkup Language
FunctionWeb-pages written in HTML and rendered by the browsers.Web-pages written in XHTML which is stricter than HTML and provides a XML-based environment.
ParserFlexible framework with lenient HTML parser.Restrictive subset of XML parsed with standard XML parsers.
Case-sensitivityIt is not case-sensitiveIt is case-sensitive.
Internet media typeIt is text/htmlIt is application/xhtml+xml.
Extended fromSGMLXML, HTML
ExpressiveLess ExpressiveMore Expressive
Filename Extension.htm or .html.xhtml, .xht, .xml, .htm or .html.
ConstraintsNo such well-organized constraintsWell-organized constraints.
ApplicationApplication of Standard Generalized Markup Language (SGML).It’s Application of XML
DeveloperProposed by Tim Berners-Lee in 1987.World Wide Web Consortium Recommendation in 2000.
VersionsHTML2, HTML3.2, HTML4, HTML5.XHTML1, XHTML1.1, XHTML2, XHTML5.

14. What is the minimum number of HTML tags required to create an HTML web-page?

We can use at least three tags to create a Web page, <head>, <body>, <html>.

15. Explain metadata in HTML?

The <meta> tag of <head> contains additional information related to the document such as page, keywords, description, author, character set, etc. Web browsers use this data to display content. Search engines and other web-services use keywords. For example,

Character Set-

<meta charset="UTF-8">

16. What is a hyperlink in HTML?

A hyperlink is a text or an image that redirects the control of the user to some other web-page.

17. What are the migrated tags from HTML4 to HTML5?

<footer>, <header>, <nav>, <article> and <section>.

18. Which element provides an autocomplete feature in a textbox?

The <datalist> element provides the autocomplete feature in a textbox.

19. How many tags are removed in HTML5?

1.<acronym> – We can use this element to specify the usage of an abbreviation within the HTML document. In HTML 5, we use the <abbr> element.
2.<applet> –This tag was used until HTML 4 to specify a plug-in. A plug-in is an additional program that enhances the functionality of the browser. For example, it can be used to run a java applet. HTML 5 uses the <object> tag instead, which is a container for such external resources.
3.<basefont> -This tag was used until HTML 4 to specify the font attributes such as font-size, font-family, font-color. In HTML 5, all the attributes related to font can be manipulated using CSS.
4.<big>,<center> – These tags have been replaced by the CSS properties. The <big> tag defines a big text which can now be set using the font-size attribute of CSS . The <center> tag which is used to centrally align the text, has now been replaced with the ‘text-align:center’ property of CSS.
5.<dir> – This tag was used up until HTML 4 for defining a directory list. In HTML 5, the <ul> tag is used.

Other removed elements are-

  • <font> -CSS font color used instead.
  • <strike> -<del> tag or <s> tag are used instead.
  • <frame>,<frameset>,<noframes> -<iframe> element is used instead.

20. How to create a link to connect to another web-page when clicked in HTML5?

We can specify links using anchor, or <a> tag.

<a href=”URL of the web-page or HTML document”>Text</a>

21. Are HTML tags case-sensitive?

No, they are not case-sensitive.

22. What are the drawbacks of cookies?

  • Cookies are included in every Http request and hence they slow down web application by transmitting the same data.
  • These send unencrypted data over the internet.
  • Cookies can store only up to 4 KB of data which is not sufficient.

HTML Interview Questions and Answers for Intermediate Level

23. What is the difference between SVG and canvas?

Basis for DifferenceSVGCanvas elements
ModelIt is an Object-Based ModelIt is a pixel based model.
ModificationThrough CSS and script.Through script only.
ScalabilityBetter scalabilityPoor scalability.
Vector/Raster basedVector based (composed of shapes). Raster based (composed of a pixel).
SuitabilitySVG is not suitable for Games graphics.Canvas is suitable for games graphics.
Dependence on resolutionDoes not depend on resolution.Completely dependent on resolution.
API animationCapable of API animation. No API for animation.
DisplayIt displays with high quality and any resolution.Not suitable.

24. Is it possible for a web-page to contain multiple <header> and <footer> elements?

Yes, it is possible.

25. What is microdata?

With microdata, we can nest the metadata of an HTML document with existing content on web pages. Search engines extract this microdata from a web page to provide a better browsing and surfing experience.

26. What are the new input types in HTML5?

  • Date: This is a Date picker. We can pick a date using type = “date”.
  • Week: This is a Week picker. We can pick a week using type = “week”.
  • Month: This is a Month picker. We can pick a month using type = “month”.
  • Time: This is a Time picker. We can pick the time using type = “time”.
  • Email: This adds multiple email addresses. We can enter multiple email addresses with type = “email”.
  • Search: Allows to search queries by an input text. We can enter multiple queries with type = “search”.
  • Range: Allows to insert a numerical value within a specific range. We can enter a numerical value within a range using type = “range”.
  • Placeholder: Allows to display a hint or gist in the input fields, to help users give a specific input. We can write a hint in the input field by using type = “placeholder”.

27. What are the different ways to apply colors in an HTML document?

  • Using predefined colors-
<!DOCTYPE html>
           <html lang="en-US">
<head>
</head>
 <body style="background-color: yellow;">
<p>Welcome to DataFlair</p>
</html>
  • RGB and RGBA colors
    RGB specifies red, green, and blue colors. These values can range from 0 to 255. Some common colors-
    rgb(0,0,0)-Black
    rgb(255,255,255)-White
    rgb(255,0,0)-Red
    rgb(0,255,0)-Green
    rgb(0,0,255)-Blue
  • Hex Colors
    Hex colors are specified in hexadecimal system i.e. #RRGGBB where RR is red, GG is green, and BB is blue.They range from 0 to 255 and by mixing the intensities of reg, green and blue, different colors can be obtained. Some common colors-
    Red-#ff0000
    Green-#00ff00
    Blue-#0000ff
    Black-#000000
    White-#ffffff

28. What is <iframe> and when can we use it?

We use the HTML iframe or inline frame to display different web-pages within the current, single web-page. It consists of a rectangular region where different web-pages are displayed, separated into sections or divisions. An iframe is defined by the <iframe> element in HTML5.

<iframe src=””></iframe>

29. What are the new attributes of <form> tag in HTML5?

  • <datalist> – It specifies a list of options for auto-completion and input control.
  • <keygen> – It represents a key-pair generator field.
  • <output> – This represents the result of scripting calculation.

30. Explain the <figure> tag.

We can use the <figure> tag to define a self-contained content as a single unit. Its position is independent of the main flow and acts as a single unit. For example, we can use the <figure> tag to mark up an image.

31. How can you represent the result of a calculation?

We use the <output> element to display the result of a calculation.

32. Can an <article> element have a <section> element and vice-versa?

Yes, it is possible.

33. What will happen if the doctype is not specified in an HTML web-page?

When doctype is not mentioned by the developer, browsers use a different mode of rendering that may be incompatible with some specifications mentioned in the web-page.

34. Explain the difference between div and span.

The div element starts on a new line and stretches across the entire width of the web-page wherein it is displayed. Unlike the div element, the span element does not start on a new line and does not take up the whole width of the web-page; only the necessary width is taken to stretch.

35. What are the different types of lists used in HTML5?

In HTML, there are three ways of creating a list-

  • Unordered List – The items are sequenced and displayed using bullets. We can specify this list using the <ul> tag, followed by <li> tags.
  • Ordered List – The items are sequenced and displayed using numbers. We can specify this list using the <ol> tag, followed by <li> tags.
  • Definition List – These lists contain definition terms and their definition. These are specified using the <dl> tag followed by <dt> and <dd> tags.

36. Explain the page structure elements of HTML.

<!doctype html>
<html>
<head>
<title> Welcome to DataFlar<title>
</head>
<body>
<h1></h1>
<p> Hi </p>
</html>

37. Do all character entities display properly on all the systems?

When the operating system that the browser is running on does not support the character entities, they are displayed as boxes.

38. What do you understand about HTML-responsiveness?

It is essential for a developer to create web-pages that are responsive on all devices and make sure they fit as per the device’s size. Responsive web-pages automatically adjust themselves as per the different devices and viewports. We can use HTML and CSS to hide, shrink, enlarge, etc. a web-page so that it looks attractive and fits on all devices.

39. What is the advantage of collapsing white-spaces in HTML?

We can indent lines of text without considering any multiple spaces because the browser collapses these multiple spaces into a single space. This makes the HTML code readable.

40. How do you create links to sections within the same web-page?

We can use bookmarks for this purpose. Links can be created using the <a> tag, with referencing through the use of the number # symbol (id). For example, you can have one line as <a href=”#topmost”>TOP</a>, which would link to a bookmark named topmost.

41. Do older HTML files work on new browsers?

Yes, but some features may not work.

42. What are style sheets in HTML?

One of the major requirements or necessities of a developer creating a web-page is to make it attractive and aesthetic to the target audience. HTML5 facilitates the development of static web-page and allows us to add more styles(content, images, backgrounds, etc.) to it using the cascading style sheets. These style sheets contain the required code needed to make the web-page aesthetic.

43. Can a single text link point to two different web-pages?

No, the <a> tag takes only one href attribute.

44. Can you change the color of bullets in HTML?

The bullet color is always the same as that of the first character of the item of the list. If the <li> tag and the first character is surrounded with a set of <font> tags with the color attribute, the bullet color, and the first character will be a different color from the text.

45. What are the different tags used to separate sections of text?

Following tags are used- <p>, <br>, <div>, <span>, <hr>, etc.

46. How are active links different from normal links in HTML?

An active link is recognized with a mouse cursor on it or a link that has the focus. Links without these two obligations are considered as normal links.

47. What is the priority that is followed in case of style sheets?

The priority is as follows- inline style> Internal stylesheet> External stylesheet.

48. How can you align images and wrap text?

  • Tables can be used to align text and images.
  • Stylesheets are also used to wrap text around an image.

49. What is Canvas in HTML5?

The canvas element helps us to create graphs, charts, bypass Photoshop to create 2D images and place them directly into our HTML5 code.

50. What is the <datalist> tag in HTML5?

The <datalist> tag in HTML5 incorporates the auto-complete feature for web-pages. It specifies an existing or predefined list of options, the user can choose from. Hence, it facilitates auto-completion and saves time.

<datalist id="cars">   
          <option value="Maruti">Maruti</option>   
          <option value= “Mercedes">Mercedes</option>   
          <option value="Toyota">Toyota</option>       
     </datalist>  

Conclusion

In this article, we have discussed the 50 commonly asked interview questions on HTML. We hope that these questions will turn out to be great resources and will help you to crack any HTML5 interview with ease.

Did you like our efforts? If Yes, please give DataFlair 5 Stars on Google | Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.