Top 65 HTML Interview Questions & Answers

Published in

The Startup

12 min readMay 11, 2020

Strong knowledge of HTML is highly recommended to crack the interviews for any web development posts. I hope this informative article would help you much to clear the interviews successfully.

1) Do all HTML tags have an end tag?

No. There are some HTML tags that don’t need a closing tag. For example: <image> tag, <br> tag.

2) What is formatting in HTML?

The HTML formatting is a process of formatting the text for a better look and feel. It uses different tags to make text bold, italicized, underlined.

3) What is the difference between HTML elements and tags?

HTML tag is just opening or closing entity. For example:

<p> and </p> are called HTML tags

HTML element encompasses opening tag, closing tag, content (optional for content-less tags) Eg:

<p>This is the content</p> : This complete thing is called a HTML element

4) What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> — Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> — Clearly defines its content.

5) What is an image map?

Image map facilitates you to link many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to make part of an image mapping.

6) How to create a nested webpage in HTML?

The HTML iframe tag is used to display a nested webpage. In other words, it represents a webpage within a webpage.

7) How do you keep list elements straight in an HTML file?

You can keep the list elements straight by using indents.

8) Can you create a multi-colored text on a web page?

Yes. To create a multicolor text on a web page you can use <font color =”color”> </font> for the specific texts you want to color. (not supported in html 5)

9) Is it possible to change the color of the bullet?

The color of the bullet is always the color of the first text of the list. So, if you want to change the color of the bullet, you must change the color of the text.

10) What is a marquee?

Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically.

11) How many tags can be used to separate a section of texts?

Three tags are used to separate the texts.

<br> tag — Usually <br> tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line
<p> tag — The <p> tag contains the text in the form of a new paragraph.
<blockquote> tag — It is used to define a large quoted section. If you have a large quotation, then put the entire text within <blockquote>………….</blockquote> tag.

12) How to make a picture of a background image of a web page?

To make a picture a background image on a web page, you should put the following tag code after the </head> tag.

13) What are empty elements?

HTML elements with no content are called empty elements. For example: <br>, <hr> etc.

14) What is the use of a span tag? Give one example.

The span tag is used for following things:

For adding color on text
For adding background on text
Highlight any color text

15) 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.

16) 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.

17) Does a <!DOCTYPE html> tag is a HTML tag?

No, the <!DOCTYPE html> declaration is not an HTML tag. There are many type of HTML e.g. 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.

18) What is the canvas element in HTML5?

The <canvas> element is a container that is used to draw graphics on the web page using scripting language like JavaScript. It allows for dynamic and scriptable rendering of 2D shapes and bitmap images.

19) What is SVG?

HTML SVG is used to describe the two-dimensional vector and vector/raster graphics. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with the text editor. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.

20) What are the different new form element types in HTML 5?

Following is a list of 10 frequently used new elements in HTML 5:

Color, Date, Datetime-local, Email, Time, Url, Range, Telephone, Number, Search

21) Which type of video formats are supported by HTML5?

HTML 5 supports three types of video format:

mp4, WebM, Ogg

22) Is audio tag supported in HTML 5?

Yes. It is used to add sound or music files on the web page. There are three supported file formats for HTML 5 audio tag.

mp3, WAV, Ogg

23) What is the difference between progress and meter tag?

According to the latest HTML5 working draft, the progress tag is best used to display the progress of a specific task at hand. meter is best used for task-unrelated guages, such as disk space or memory usage.

you can think like that: progress = dynamic ; meter = static

24) What is the use of figure tag in HTML 5?

The figure tag is used to add a photo in the document on the web page. It is used to handle the group of diagrams, photos, code listing with some embedded content.

25) What is the use of figcaption tag in HTML 5?

The <figcaption> element is used to provide a caption to an image. It is an optional tag and can appear before or after the content within the <figure> tag. The <figcaption> element is used with <figure> element and it can be placed as the first or last child of the <figure> element.

26) What is the use of details and summary tag?

The details tag is used to specify some additional details on the web page. It can be viewed or hidden on demand. The summary tag is used with details tag.

27) 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.

28) If I do not put <!DOCTYPE html> will HTML 5 work?

No, the browser will not be able to identify that it is an HTML document and HTML 5 tags do not function properly..

29) What are the new <input> types for form validation in HTML5?

The new input types for form validation are email, URL, number, tel, and date.

30) How can we get the geographical position of a user in HTML5?

Yes, HTML5 can retrieve the location of a user with the use of Geolocation API. It provides getCurrentPosition() method to get the user’s current position.

31) What are the new features introduced in HTML5?

HTML5 introduces a number of new elements and attributes that help in building an attractive webSite, that we see nowadays.

It supports following new features.

New Semantic Elements , Forms 2.0, Persistent Local Storage
WebSocket, Server-Sent Events(SSE)
Canvas, Audio & Video, Geolocation
Microdata, Drag and drop

32) Explain the key differences between SVG and Canvas?

Canvas is resolution dependent while SVG is not.
Canvas does not provide any support for event handlers while SVG does provide the support for event handlers.
Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.
Canvas provides a less interactive animated user interface. Whereas, the interface provided by SVG is very highly interactive.

33) How can we create a new HTML element?

Answer.

We can even create new elements for the document as follows.

document.createElement﴾”myElement”﴿

</script>

34) What is HTML5 Web Storage?

HTML5 Web Storage, also known as DOM Storage is a way to preserve state on either the client or server which makes it much easier to work against the stateless nature of HTTP. It allows the web pages to store the data locally in the user’s browser.

35) What are the advantages of HTML5 Web Storage?

It can store 5 to 10 MB data. That is far more than what cookies allow.
HTML5 never transfers Web storage data with any HTTP request. Thus creating less overhead than cookies and in turn, increase the performance of the application.
Apps can work both online and offline.
This API is easy to learn and use.

36) What are the different types of Web Storage provided by HTML5?

sessionStorage, localStorage

37) Explain the key differences between localStorage and sessionStorage objects?

Following are the key differences between localStorage and sessionStorage objects.

The localStorage object stores the data without an expiry date. However, sessionStorage object stores the data for only one session.
In the case of a localStorage object, data will not delete when the browser window closes. However, the data gets deleted, if the browser window closes, in the case of sessionStorage objects.
The data in sessionStorage is accessible only in the current window of the browser. But the data in the localStorage can be shared between multiple windows of the browser.

38) What is the concept of Application Cache in HTML5? What are its advantages?

HTML5 introduced the concept of Application Cache. It means that a web application is cached, and is accessible without an internet connection.

39) What are the key advantages of Application Cache ?

Offline browsing — Users can use the application even when they are offline.
Speed — Cached resources load faster as compared to content that gets downloaded, directly from the server.
Reduced server load — The browser will only download updated/modified resources from the server.

40) What is a Manifest file?

A Manifest file is a simple text file, that tells the browser what to cache and what not to cache.

A Manifest file contains three Sections as

CACHE MANIFEST — HTML5 performs the caching of files listed under this section after they get downloaded for the first time.
NETWORK — Files listed here, always need a connection to the server. The browser can never cache them.
FALLBACK — Files listed here specify the fallback pages, if any page in it is not accessible.

41) What is the difference between HTMl5 Application cache and regular HTML browser cache?

Following are the key differences between the two.

In AppCache, we can define all the assets the browser should cache in a manifest file (even the entire site). For fetching this content, it is not necessary for the user to have accessed it previously. In other words, Application Cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. However, the browser cache will only store the pages (and associated assets) the user has visited actually.
The AppCache allows web apps (and websites) to be made available offline, that too, with the same speed benefits as the regular browser cache could provide only when the user is online.

42) What is a Web Worker? How does it work?

A web worker is a script, which runs in the background. It exists in external files. The user can perform actions like clicking, selecting things and so on. Meanwhile, the Web worker runs in the background. It is appropriate, to use Web worker for CPU intensive tasks.

Since Web workers are in external files, they do not have access to the following JavaScript objects.

The window object
The document object
The parent object

43) What are the new attributes provided in HTML5 for <form>?

The new attributes provided in HTML5 for <form> are.

autocomplete — If autocomplete is set to on, it enables the browser to fill the values, based on the values that the user starts to enter.
novalidate — It is a boolean attribute. Its presence signifies that the form-data should not get validated at the time of submission.

44) What is output element in HTML5?

Output element gets used when you design a form, that displays the result of a computation. Along with the standard global attributes, <output> also accepts for, form, and name attributes.

45) What is the major difference between, Transitional and Strict doctype?

Strict — This DTD contains all HTML components and properties. However, it does NOT INCLUDE presentational or expostulated components (like text style). It does not permit the use of Framesets.

Transitional — This DTD contains all HTML components and properties, INCLUDING presentational and belittled components (like textual style). It does not allow the use of Framesets.

46) What is the use of <fieldset> tag in HTML5?

The <fieldset> tag groups related form elements. It is like a box. In other words, it draws a box around related elements.

It must start with a <legend>tag because the <legend> tag defines the title of the fieldset.

47) What are the HTML tags which get deprecated in HTML5?

48) Why do we need HTML5 Server-Sent Events?

HTML5 Server-Sent Events (SSE) is a new way for the web pages to communicate with the web server. It enables a webpage to get updates from a server automatically. It was possible earlier also, but for this, the web page needs to ask if any updates were available. The client makes a request and waits for the server to respond with data. Once the web server provides its response, the communication is over.

49) How can u generate public key in html? (obsolete)

html has a keygen element that facilitate generation of key and submission via a form.

extra: keygen has to be used inside a form.

50) How can you change direction of html text?

By using bdo (bidirectional override) element of html.

51) How can you highlight text in html?

By using mark element.

52) Can u apply css rule to a part of html document?

Yes, By using “scopped” in the style tag.

53) Does the following trigger http request at the time of page load?

<img src=”mypic.jpg” style=”visibility: hidden” alt=”My photo”>

yes

54) What are optional closing tag? and why would u use it?

p, li, td, tr, th, html, body, etc. you don’t have to provide end tag. Whenever browser hits a new tag it automatically ends the previous tag. However, you have to be careful to escape it.

55) What is the difference between span and div?

div is a block element and span is inline element.

56) How to serve a page content in multiple languages?

CMS could be used to deliver content in different language with same structure and style.

57) Difference between standard/ strict mode and quirks mode?

quirks mode in browser allows u to render page for as old browsers. This is for backward compatibility.

58) What are some of the common lists that can be used when designing a page?

Any or a combination of the following list types:

– ordered list

– unordered list

– definition list

– menu list

– directory list

59) Do all character entities display properly on all systems?

No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.

60) What are inline elements and block-level elements in HTML?

Block elements are the blocks that take the full available width and always start from a new line. It will stretch itself to the full available width of the available container width. Block-level elements are <div>, <p>, <img>, <section> and many more.

Inline elements are the elements that will only take the width that is required to fit into the container.

61) Can we modify the attribute’s value of the HTML tag dynamically?

Answer: Yes, we can modify the value of the attributes by using JavaScript.

Below is the input element whose attribute will be modified from text to password, JS code to modify the attribute value:

<input type=“text” id=“inputField”>document.getElementById(“inputField”).attr(“type”, “password”);

62) Can we change inline elements into block-level elements?

Answer: Yes, we can change inline elements into block-level elements by adding display equal to block in its CSS tag. Writing it will change the inline elements into block elements and then inline elements will also take the full width of the container.

63) Why Meta tags are used in HTML?

Answer: Meta tags in HTML are used by the developer to tell the browser about the page description, author of the template, character set, keywords and many more.

Meta tags are used for search engine optimization to tell the search engine about the page contents.

64) Differentiate between HTML and XHTML.

The differences between HTML and XHTML are:

HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Markup Language.
A static webpage is an HTML web page and dynamic web pages are XHTML.
XHTML are more stricter than HTML.
An XML application of HTML is defined as XHTML.
All modern browsers support XHTML.

65) What is Quirks mode in HTML5?

If we do not include the <!DOCTYPE> element in our HTML page or Document, it will go to Quirks Mode. In this mode, the HTML element depends on the browser. Hence the content will be displayed according to the browser.

I hope these interview questions and answers will help you to crack the Web development interview successfully. Most questions include the HTML experts’s answers during their interviews. Have a good day!