HTML Interview Questions

CTA

HTML-Hypertext Markup Language is the standard language used for developing web pages and applications. Indeed reports over 16,000 job openings require this skill across the world. The average salary for a professional who knows HTML ranges from ₹4 to ₹12 lakhs per annum. Here is a list of some common HTML interview questions for your web development interview preparation.

Table of content

• Basic HTML Interview Questions for Freshers
• Intermediate HTML Interview Questions and Answers
• Advanced HTML Interview Questions

Most Frequently Asked HTML Interview Questions

1. Define the list types in HTML.
2. Compare HTML & XML
3. What are void elements in HTML?
4. What is the advantage of collapsing white space?
5. What is “Semantic HTML?”
6. What are HTML entities?
7. What is the ‘class’ attribute in HTML?
8. What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?
9. Describe the HTML layout structure.
10. What is $() in JQuery library?

Basic HTML Interview Questions for Freshers

First, let’s get started with the HTML Interview Questions and Answers for Freshers:

1. What is HTML?

HTML stands for HyperText Markup Language and it is the language of the internet. This standard text formatting language is used to create and display pages on the Internet. HTML documents include elements and tags that format it for proper display on pages.

2. Define the list types in HTML.

Following are the list types in HTML:

• Ordered list – The ordered list displays elements in a numbered format with the help of the <ol> tag.
• Unordered list – The unordered list displays elements in a bulleted format with the help of the <ul> tag.
• Definition list – The definition list uses <dl>, <dt>, and <dd> tags for displaying elements in definition form.

3. What are HTML tags?

HTML tags are used for placing elements in the proper and appropriate format. The tags, < and >, set them apart from the HTML content. It is not always necessary to close these HTML tags. For example, in the case of images, the closing tags are not required as tag.

4. What are HTML attributes?

Attributes are properties that are added to an HTML tag. They change the way the tag behaves or is displayed. Attributes are added right after the name of the HTML tag, inside the brackets. Attributes can be added to opening or self-closing tags, but never in closing tags.

For example, the tag has an src attribute, which can add the source from which the image should be displayed.

5. What is a marquee in HTML?

Marquee in HTML is used to scroll text or images on a web page. It can scroll up, down, left, or right automatically. Marquee can be applied by using tags.

6. How do you separate a section of text in HTML?

A section of text in HTML can be separated with the help of the following tags:

• <br> – It is used to separate the line of text by breaking the current line and moving the flow of the text to a new line.
• <p> – It is used to write a paragraph of text.
• <blockquote> – It is used to define large quoted sections.

Check out this video on HTML Interview Questions and Answers

7. Compare HTML & XML

8. What are void elements in HTML?

HTML elements that do not have closing tags or do not need to be closed are known as void elements. For example:

<br/>,<hr />, <img />, <input/>, <link/>, and, <meta/> etc.

9. What is the advantage of collapsing white space?

In HTML, a blank sequence of whitespace characters is treated as a single space character. The browser collapses the multiple spaces into a single space character thus aiding a developer to indent lines of text without the need to worry about multiple spaces. In this way, the readability and understandability of HTML codes are maintained.

10. What is “Semantic HTML?”

Semantic HTML is a coding style where the tags embody what the text is meant to convey. Also known as semantic markup, this HTML introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph.

Tags for bold and italic are not examples of semantic HTML as they just represent formatting and provide no indication of meaning or structure.

11. What are HTML entities?

In HTML some characters like ‘<’, ‘>’, ‘/’, etc. are reserved. To use them in web pages, character entities or HTML entities need to be used. Below are a few mapping between the reserved character and its respective entity character to be used.

12. What is the ‘class’ attribute in HTML?

The ‘class’ attribute specifies the class name for an HTML element. Multiple HTML elements can have the same class value. It is primarily used to associate the styles on the stylesheet with the HTML elements.

13. What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?

Multiple elements in HTML can have the same class value. The same is not true for an id attribute of an element.

14. Describe the HTML layout structure.

For the purpose of displaying the intended content and specific UI, each web page has to include different components. However, few things in the HTML layout structure come templated and are universally accepted practices. For example:

• <header>: It is used to include the starting information about the web page
• <footer>: A footer represents the final section of a web page
• <nav>: It involves the navigation menu of the HTML page
• <article>: It is a set of information
• <section>: This defines the basic structure of a page and is used inside the article block
• <aside>: It is used for the sidebar content of a web page

15. What is $() in jQuery library?

The $() function is an alias of the jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love its brevity. $() function is used to wrap any object into a jQuery object, which then allows you to call various method-defined jQuery objects. You can even pass a selector string to the $()function, and it will return a jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it being quite basic. It is used to differentiate between developers who know jQuery and those who do not.

Intermediate HTML Interview Questions and Answers

16. What are the advantages of using jQuery?

• Easy to use and learn
• Easily expandable
• Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
• Easy to use for DOM manipulation and traversal
• Large pool of built-in methods
• AJAX capabilities
• Methods for changing or applying CSS, creating animations
• Event detection and handling
• Tons of plug-ins for all kinds of needs

17. Explain the difference between the ID selector and a class selector in jQuery.

If you have used CSS, then you might know the difference between ID and class selector. It’s the same with jQuery. ID selector uses ID e.g. #element1 to select elements, while class selector uses CSS class to select elements. When you just need to select only one element, use the ID selector, while if you want to select a group of elements, having the same CSS class then use a class selector. There is a good chance that the interviewer will ask you to write a code using ID and class selector. From a syntax perspective, as you can see, another difference between ID and class selector is that the former uses “#” and later uses the “.” character.

18. What is the difference between $(this) and this keyword in jQuery?

This could be a tricky question for many jQuery beginners, but it’s in fact the simplest one. $(this) returns a jQuery object, on which you can call several jQuery methods e.g. text() to retrieve text, val() to retrieve value, etc. While this represents the current element, it’s one of the JavaScript keywords to denote the current DOM element in a context. You can not call the jQuery method on this until it’s wrapped using the $() function i.e. $(this).

19. What is the main advantage of loading the jQuery library using CDN?

This is a slightly advanced jQuery question, and don’t expect that jQuery beginners can answer that. Well, apart from many advantages including reducing server bandwidth and faster download, one of the most important advantages is that if the browser has already downloaded  the same jQuery version from the same CDN, then it won’t download it again. Nowadays, almost any public website uses jQuery for user interaction and animation, so there is a very good chance that browsers already have the jQuery library downloaded.

20. 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.

.test {
font-family: Helvetica;
font-size: 20;
background: black;
}
test

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;
}

21. What is Grouping?

When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.h1, h2, h3 {background: red;}

22. Why do we use alternative texts in images?

Image mapping can get confusing if it is hard to understand which hotspots correspond to a particular link. Alternative texts include a description at each link making it easier to understand the hotspot links.

23. How to create a new HTML element?

New HTML elements can be created in the following way:

<script>
document.createElement﴾"myElement"﴿
</script>

or

<myElement>hello Intellipaat!</myElement>

24. What are the uses of a span tag? Explain with an example.

The span tag is used for styling purposes like:

• Adding color to text
• Highlighting any color text
• Adding background on text

Example:

<span style="color:#ffffff;">

In this page we use span.

</span>

25. Explain the key differences between localStorage and sessionStorage objects.

The key differences between localStorage and sessionStorage objects are:

• The localStorage object stores data indefinitely, while sessionStorage object stores them for only one session.
• In the case of a localStorage object, when the browser window is closed, the data will not be erased. However, in the case of sessionStorage objects, the data will get erased after the browser window is closed.
• The data that is stored in the sessionStorage is accessible only in the current browser window. The data that is stored in the localStorage can be accessed by multiple browser windows.

26. What is the hierarchy when it comes to style sheets?

If there are three different style definitions in a single selector, precedence is given to the definition that is closest to the actual tag. Inline style sheets take priority over embedded style sheets. Between embedded style sheets an external style sheets, embedded style takes precedence.

27. How do active links differ from normal links?

Normal and active links have blue as their default color. Certain browsers are capable of detecting an active link when the mouse cursor hovers over that link. The other browsers detect the active link when the link has the focus. An active link is in the action of opening the resource that is being pointed to.

Normal link contains a pointer to another resource. Those links don’t have a mouse cursor over it. A normal link becomes an active link when the user clicks on it.

28. What is the role of the 'head' and 'body' tags in an HTML document?

<head> contains the information about the document. It is always enclosed in the <html> tag. <head> contains the webpage metadata and tags like <style>, <link>, <meta>, <script>, etc. that are not displayed on the web page. In an HTML document. there can be only one <head> tag and it is one used before the <body> tag.

<body> defines the body of an HTML document and is always enclosed within the <html> tag. Any content that needs to be displayed on the web page, such as text, audio, images, video, contents, can be done using tags like <p>, <img>, <audio>, <heading>, <video>, <div>, etc. These tags have to be enclosed within the <body> tag. There can be only one <body> element in an HTML document and it is used after the <head> tag.

29. How can a table be displayed on an HTML webpage?

Data can be displayed in a tabular format with the help of the <table> tag. It can also be used to manage the layout of the web page. For example, the header section, the navigation bar, the content of the body, and the footer section.

The following HTML tags are used for when building a table on an HTML webpage:

30. How do you create links to different sections within the same HTML web page?

Links to different sections can be created within the same web page by using the <a> tag, along with the # symbol for referencing.

31. How can you create nested web pages in HTML?

When there are web pages within a webpage, these are called nested web pages. These nested web pages in HTML can be developed with the help of the built-in <iframe> tag. It defines an inline frame. For example:

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Iframes example</h2>
    <p>
      specify the size of the iframe using the height and width attributes:
    </p>
    <iframe src="https://intellipaat.com/" height="500" width="700"></iframe>
  </body>
</html>

32. How can you add buttons in HTML?

Buttons can be added to an HTML web page by using the built-in Button tag.

<!DOCTYPE html>
<html>
<body>
<h2>Example of HTML Button Tag</h2>
<button name="button" type="button">CLICK HERE</button>
</body>
</html>

33. What are the different types of headings in HTML?

There are six different types of headings in HTML. These are defined using the <h1> to <h6> tags. Each heading type has a different text size–<h1> being the largest and <h6> being the smallest. For example:

<!DOCTYPE html>
<html>
<body>
<h1>Place Heading 1 here</h1>
<h2>Place Heading 2 here</h2>
<h3>Place Heading 3 here</h3>
<h4>Place Heading 4 here</h4>
<h5>Place Heading 5 here</h5>
<h6>Place Heading 6 here</h6>
</body>
</html>

Advanced HTML Interview Questions for Experienced

34. How do CSS precedence/cascading rules work? How does the !important directive affect the rules?

CSS style rules “cascade” in the sense that they follow an order of precedence. Global style rules apply first to HTML elements, and local style rules override them. For example, a style defined in a style element in a webpage overrides a style defined in an external style sheet. Similarly, an inline style that is defined in an HTML element in the page overrides any styles that are defined for that same element elsewhere. The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:p { color: #ff0000 !important; }p { color: #000000; }

35. 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

36. Explain HTML5 Graphics.

There are two kinds of graphics that are supported by HTML5:

1. Canvas – It is like drawing on a blank webpage. Different graphic designs can be added on web pages. There are various available methods for drawing different geometrical shapes. Following is an example of how it is used.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas width="300" height="300" style="border:2px solid;"></canvas>
</body>
</html>

2. SVG – SVG or Scalable Vector Graphics follows the XML format and these are used for diagrams or icons. Following is an example of how it is used.

<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:#FFF;stroke-width:2;stroke:#000" />
</svg>
</body>
</html>

37. What are the server-sent events in HTML5?

Server-sent events are those events that are pushed from the web server to the browsers. These events can be used to continuously update DOM elements.

In the case of polling, since every time an HTTP connection is established and torn down, there is a lot of overhead. In server-sent events, there the HTTP connection is long-lived, which is a big advantage over polling.

To use a server-sent event, <eventsource> is used. This element’s SRC attribute specifies the URL from which it sends a data stream that contains the events.

<eventsource src = "/cgi-bin/myfile.cgi" />

38. What are Web Workers?

Web workers are added to bring parallelism and async capabilities. They run in the background and perform computationally expensive tasks without yielding to make the page responsive. A separate thread has to be started for such tasks. Web workers don’t perform UI operations.

There are three types of web workers:

• Dedicated Workers – Used by a single script
• Shared Workers – Used by multiple scripts running in different windows, IFrames in HTML, etc.
• Service Workers – Mostly used for push notifications and sync APIs and act as proxy servers between the web applications, the browser, and the network

39. What is the use of a novalidate attribute for the form tag in HTML5?

The value of a novalidate attribute is a boolean type. It shows whether the data being submitted by the form will be validated in advance or not. The forms can be submitted without validation by making the value false. This helps users to resume it later as well.

<form action = "" method = "get" novalidate>
Name:<br><input type="name" name="sname"><br>
Doubt:<br><input type="number" name="doubt"><br>
<input type="submit" value="Submit">
</form>

40. What are the different ways of making an image responsive?

• Art Direction – The landscape image fully shown in desktop layout can be zoomed in with the main subject in focus for a portrait layout by using <picture>.

For example:

<picture>
<source media="(min-width: 650px)" srcset="img_flower.jpg">
 <img src="img_marsh.jpg" style="width:auto;">
</picture>

 For any other screen:

• Resolution Switching – Instead of zooming and cropping, the images can be scaled accordingly with the help of vector graphics. It can be set to serve different pixel-density screens as well.

For example SVG:

<svg width="100" height="100">
 <circle cx="50" cy="50" r="40"
 stroke="green" stroke-width="4" fill="yellow" />
</svg>

41. What is a manifest file in HTML5?

The manifest file lists the resources that can be cached. This information is used by browsers making the web pages load faster than the first time. The manifest file contains three sections:

• CACHE Manifest – Files that are needed to be cached
• Network – Files that are never to be cached but always need a network connection
• Fallback – Fallback files if a page is inaccessible

CACHE MANIFEST

# 2012-06-16 v1.0.0
/style.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
<!DOCTYPE HTML>
<html manifest="tutorial.appcache">
...
...
</html>

42. What is the geolocation API in HTML5?

The geolocation API in HTML5 shares a client’s physical location with websites. It provides a unique experience to users and locale-based content based on their location. The geolocation API works with a new property of the global navigator object. Most of the modern browsers support this.

var geolocation = navigator.geolocation;

43. What happens if there is no text between the tags? Is there any effect on the display of the HTML file?

If there is no text between tags, there is nothing to format so no formatting will be there. Some tags, like tags that don’t have a closing tag (for example,  the <img> tag), do not need to have text between them.

44. How can JavaScript be added to an HTML webpage?

JavaScript makes HTML web pages user-friendly and more interactive. Based on the user input, it allows one to interact with particular page elements. There are three ways one can add JavaScript:

i) Inline: JavaScript can be added to HTML elements directly whenever a certain event occurs. The code can be added using the attributes of the HTML tags that support it.

ii) Script block: A script block can be defined anywhere on the HTML code. When the browser reaches that specific part of the document, the script block will get executed. This is the reason why they are typically added at the bottom of HTML documents.

iii) External JavaScript file: JavaScript code can be imported from a separate file. This maintains a clutter-free HTML code. It is especially useful when there is a large amount of scripting added to an HTML webpage.

45. How can CSS styling be added in HTML?

There are three ways to add CSS in HTML:

• Inline CSS: Inline CSS is used when there is less amount of styling required or where only a single element needs styling. Add the style attribute in the relevant tag to use inline styles.
• External Style Sheet: External style sheets are used when the style is applied to several elements or HTML pages. Each page must be linked to the style sheet with the <link> tag.

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

• Internal Style Sheet: Internal style sheets are used when an HTML document has a unique style and multiple elements need to be styled to follow the format. This style sheet is added in the head section of an HTML page with the

CTA

Conclusion

HTML is the foundation of web development, and having a strong understanding of it is essential for web developers. These common HTML interview questions and answers should help you prepare for your web development interview. Remember to practice coding and experiment with different HTML elements and features to reinforce your knowledge. Good luck with your interview!

We hope these Full Stack developer course with placement guarantee interview questions will help you prepare for your upcoming interviews. If you are looking to learn Full Stack development course in a systematic manner with expert guidance and support then you can check our Full Stack developer course.