Top 50 HTML Interview Questions to Crack your next HTML Interview
Free Web development courses with real-time projects Start Now!!
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.
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 difference | HTML5 | HTML |
| Vector Graphics | HTML5 supports Canvas, SVG and other virtual vector graphics. | HTML implements vector graphics using VML, Silver-light, etc. |
| Mobile-friendly | HTML5 is more mobile-friendly because of its high responsiveness. | HTML is less mobile-friendly. |
| Declaration | The doctype declaration is simple and easy. | The doctype declaration is complex. |
| Drag and drop effect | Supports drag and drop effect. | Does not support drag and drop effect. |
| JavaScript support | HTML5 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 ©.
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 Difference | HTML | XHTML |
| Definition | HTML, HyperText Markup Language is the markup language for creating web pages | XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that extend versions of the widely used HTML. |
| Type of format | Document File | Markup Language |
| Function | Web-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. |
| Parser | Flexible framework with lenient HTML parser. | Restrictive subset of XML parsed with standard XML parsers. |
| Case-sensitivity | It is not case-sensitive | It is case-sensitive. |
| Internet media type | It is text/html | It is application/xhtml+xml. |
| Extended from | SGML | XML, HTML |
| Expressive | Less Expressive | More Expressive |
| Filename Extension | .htm or .html | .xhtml, .xht, .xml, .htm or .html. |
| Constraints | No such well-organized constraints | Well-organized constraints. |
| Application | Application of Standard Generalized Markup Language (SGML). | It’s Application of XML |
| Developer | Proposed by Tim Berners-Lee in 1987. | World Wide Web Consortium Recommendation in 2000. |
| Versions | HTML2, 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 Difference | SVG | Canvas elements |
| Model | It is an Object-Based Model | It is a pixel based model. |
| Modification | Through CSS and script. | Through script only. |
| Scalability | Better scalability | Poor scalability. |
| Vector/Raster based | Vector based (composed of shapes). | Raster based (composed of a pixel). |
| Suitability | SVG is not suitable for Games graphics. | Canvas is suitable for games graphics. |
| Dependence on resolution | Does not depend on resolution. | Completely dependent on resolution. |
| API animation | Capable of API animation. | No API for animation. |
| Display | It 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.
We work very hard to provide you quality material
Could you take 15 seconds and share your happy experience on Google
