TestMu 2025 - The Largest Virtual Software Testing Conference is Back | 50,000+ Attendees
Next-Gen App & Browser
Testing Cloud
Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles
- Testing Basics
- Home
- /
- Learning Hub
- /
- Top 50+ HTML Interview Questions and Answers [2025]
Top 50+ HTML Interview Questions and Answers [2025]
Discover essential HTML interview questions for freshers, intermediates, and experienced professionals to prepare and excel in your web development career.
Published on:
- Share:
OVERVIEW
HTML interview questions and answers help reinforce your understanding of important concepts like semantic tags, forms, multimedia elements, accessibility, and responsive design. Mastering these questions increases your chances to land your desired web development role.
Note: We have compiled all HTML Interview Questions for you in a template format. Feel free to comment on it. Check it out now!
HTML Interview Questions for Freshers
Here are the HTML interview questions for freshers covering concepts such as basic tags, an HTML document structure and more.
1. What Is HTML?
HTML stands for HyperText Markup Language and is used to create the structure of web pages. It combines HyperText, which allows linking between web pages, and a Markup Language, which uses tags to define the structure and presentation of content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h2>Learning Hub</h2>
<p>Top 50+ HTML Interview Questions and Answers [2025] </p>
</body>
</html>2. What Is the Difference Between HTML and XHTML?
HTML and XHTML are markup languages designed for web page creation and display. HTML offers a more lenient syntax, whereas XHTML follows a stricter syntax that complies with XML rules.
3. What Are the Building Blocks of an HTML Document?
This is one of the commonly asked HTML interview questions. HTML document is built using a combination of these three building blocks:
- Tags: Define the structure and semantics of the content.
- Attributes: Provide additional information or properties to the tags.
- Elements: Consist of tags, attributes, and content, forming the complete structure of the document.
4. What Is !DOCTYPE?
The !DOCTYPE is an instruction used by web browsers to determine the version of HTML the website is written in. This helps browsers understand how the document should be interpreted, simplifying the rendering process. The !DOCTYPE is neither an element nor a tag. It should be placed at the very top of the document, has no content, and do not require a closing tag.
5. What Are HTML Tags?
This is one of the frequently asked HTML interview questions. HTML tags are the building blocks of any web page, which are keywords that structure web pages in different formats. These tags are paired with opening and closing tags, although some are standalone and do not require closing.
Example:
<tagname> Content... </tagname>6. What Are HTML Attributes?
HTML attributes provide additional information about elements within an HTML document. Every HTML element can have attributes, which are always defined in the start tag. Attributes use a name/value pair format, where the attribute name defines the property and the value provides specific details. These attributes affect how content is displayed and interacted with on web pages.
7. How Do <strong> and <b>, and <em> and <i> Tags Differ?
Here are the difference between <strong>, and <b> tags and <em> and <i> tags:
<strong> and <b> tags:
- <strong>: This tag indicates that the enclosed text has strong importance or emphasis in the content context. It conveys semantic meaning, suggesting that the text is of higher relevance or significance.
- <b>: This tag makes the enclosed text bold or visually emphasized. It conveys no semantic meaning; it is a purely presentational tag.
<em> and <i> tags:
- <em>: This tag indicates that the enclosed text should be stressed or emphasized from the surrounding text. It conveys semantic meaning, suggesting that the text should be read with stress or emphasis.
- <i>: This tag makes the enclosed text appear in italics. Like the <b> tag, it is purely presentational and conveys no semantic meaning.
8. How Can You Add an Image in HTML?
You can use an HTML tag called <img> to add an image to a web page. This tag tells the browser that you want to display a picture.
Inside the <img> tag, you need to provide the source or location of the image file. You do this by using the src attribute.
Syntax:
<img src="image.jpg" alt="Description of the image">9. Why Is the alt Attribute Used in HTML Images?
This is one of the frequently posed HTML interview questions. The alt attribute is used to specify alternate text for an image. This is helpful when the image cannot be displayed and provides alternative information for the image.
10. How to Comment in HTML?
In HTML, you can add comments between <!-- ... -- > tags. The start tag includes an exclamation mark (!), but the end tag does not.
There are two types of comments in HTML:
- Single-line comment: This comment adds a single line within the HTML code. The syntax is as follows:
<!-- Single-line comment -->
<!--
Multi-line
comment
-->
11. How Do You Define Headings in HTML?
This is one of the popular HTML interview questions. HTML headings are defined using the <h1> to <h6> tags.
- <h1> defines the most important heading with the biggest font size.
- <h6> defines the least important heading and has the smallest font size.
Example:
<h1>Learning Hub</h1>
<h2>Learning Hub</h2>
<h3>Learning Hub</h3>
<h4>Learning Hub</h4>
<h5>Learning Hub</h5>
<h6>Learning Hub</h6>12. How to Create a Table in HTML?
To create a basic table in HTML:
- Use the <table> tag to define the table.
- Create rows with the <tr> (table row) tag.
- Define headers using <th> (table header) tags.
- Add data cells using <td> (table data) tags.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jim</td>
<td>3</td>
</tr>
<tr>
<td>Jam</td>
<td>2</td>
</tr>
</table>13. What Are the Different Types of Lists in HTML?
This is one of the frequently asked HTML interview questions. HTML lists are used to organize information into a structured format. They can contain various types of content, such as paragraphs or images. There are three main types of lists:
- Ordered lists (<ol>): These lists are numbered.
- Unordered lists (<ul>): These lists use bullets.
- Description lists (<dl>): These lists are used for terms and their descriptions.
Example:
<!-- Unordered list -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>14. How to Create a Link in HTML?
In HTML, links are used to connect web pages or HTML documents. To create a link, you can use the anchor tag (<a>) with the href attribute specifying the URL or destination.
<a href="https://www.lambdatest.com/learning-hub/">Learning Hub</a>15. What Is the Use of the Target Attribute in the <link> Tag?
The target attribute in the <a> tag specifies where the linked document should open. Some common values are:
- _self (default): Opens the linked document in the same window/tab.
- _blank: Opens the linked document in a new window or tab.
- _parent: Opens the linked document in the parent frame (for iframes).
- _top: Opens the linked document in the full body of the window.
16. How Many Ways Can You Display HTML Elements?
HTML elements can be displayed in various ways, including block, inline, inline-block, and none. The display property is used to specify how an element should be rendered on the page.
17. What Is the Difference Between Block and Inline Elements?
Here are the primary differences between block elements and inline elements:
| Characteristic | Block-Level Elements | Inline-Level Elements |
|---|---|---|
| New Line | Starts on a new line. | Does not start on a new line. |
| Width | Takes up the full available width. | Takes up the width of its content only. |
| Height | Can have a height set. | Height is determined by its content. |
| Margins/Padding | Can have margins/padding on all sides. | Can have left/right margins/padding, but not top/bottom. |
| Alignment | Can be aligned using text-align and margin properties. | Can be aligned using the vertical-align property. |
18. Is It Possible to Change an Inline Element Into a Block-Level Element?
This is one of the commonly asked HTML interview questions. Yes, it is possible to change the display behavior of an HTML element using CSS. You can use the display property to change an inline element into a block-level element or vice versa.
Example:
/* Change an inline element to block-level */
span {
display: block;
}
/* Change a block-level element to inline */
div {
display: inline;
}19. How to Align Text in HTML?
Text alignment in HTML is achieved using CSS. The text-align property is used to horizontally align text within an element.
Example:
/* Align text to the left */
p {
text-align: left;
}
/* Align text to the right */
h1 {
text-align: right;
}
/* Align text in the center */
div {
text-align: center;
}20. How to Change Text Color in HTML?
You can use the color property in CSS to change the color of text in HTML.
/* Change text color to blue*/
p {
color:blue;
}21. How to Apply Multiple Text Colors in a Single HTML Line?
You can use <span> elements with the style attribute to wrap each part of the text you want to color differently.
<p>
<span style="color: blue;">Hello</span>
<span style="color: orange;">World</span>
</p>
22. How to Change the Background Color in HTML?
To change the background color of an HTML element, you can use the background-color property in CSS.
/* Change body background color to gray */
body {
background-color: gray;
}
/* Change div background color to white*/
div {
background-color: white;
}23. How to Change Font Style in HTML?
This is one of the commonly asked HTML interview questions. To change the font style in HTML, you can use various CSS properties:
- font-family: Specifies the font family to be used.
- font-size: Sets the font size.
- font-style: Specifies whether the text should be normal, italic, or oblique.
- font-weight: Sets the boldness of the text (normal, bold, or a numeric value).
Example:
/* Change font family, size, and style */
h1 {
font-family: sans-serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
}24. What Is DOM?
The DOM, or Document Object Model, is a programming interface that represents structured documents such as HTML and XML as a tree of objects. It defines how to access, manipulate, and modify document elements using scripting languages like JavaScript.
25. How to Create a Form in HTML?
To create a form in HTML, you can use the <form> element. Inside the <form> element, you can include various form controls like input fields, dropdowns, checkboxes, radio buttons, and more.
Example:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>The action attribute in the <form> tag specifies the URL or server-side script where the form data will be submitted. The method attribute specifies the HTTP method used to submit the form data.
26. How to Link CSS to HTML?
This is one of the frequently posed HTML interview questions. There are three ways to link CSS to an HTML document:
- Inline CSS: CSS styles are applied directly to an HTML element using the style attribute.
<p style="color: pink; font-weight: bold;">This text is pink and bold.</p><!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This text is red and bold.</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"27. How to Use a <div> Tag in HTML to Divide the Page?
This is among the commonly asked HTML interview questions. The <div> (division) tag is a block-level element in HTML commonly used to divide a web page into sections or create layout structures. It acts as a container for other HTML elements and can be styled using CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<style>
.header, .nav, .content{
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="header">
<h1>Website Header</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<h2>Content Section</h2>
</div>
</body>
</html>28. How to Add a Scroll Bar in HTML?
To add a scroll bar in HTML, you can use CSS to control the overflow behavior of an element. When the content inside an element exceeds its specified height or width, a scroll bar will automatically appear.
29. How to Add a Footer in HTML?
This is listed among the top HTML interview questions. To add a footer in HTML, you can use a <footer> element or a <div> element with an appropriate class or ID. The footer is placed at the bottom of the web page and can contain various elements like copyright information, navigation links, or other relevant content.
HTML Interview Questions for Intermediate
Here are the HTML interview questions for intermediate professionals:
30. How to Create a Form in HTML?
To create a form in HTML, use the <form> element. Inside this element, add various input fields using different HTML elements such as <input>, <textarea>, <select>, and more.
Example:
<form>
Name: <input type="text"><br>
<input type="submit" value="Submit">
</form>31. How to Add a Video to an HTML Document?
This is one of the commonly asked HTML interview questions. To add a video to an HTML document, use the <video> element. It allows for the inclusion of one or more video sources using the <source> tag. It supports MP4, WebM, and Ogg formats across all modern browsers except for Safari, which does not support the Ogg video format.
Syntax:
<video>
<source src=”file_name” type=”video_file_type”>
</video>
Example:
<!DOCTYPE html>
<html>
<body style="text-align: center">
<h2>How to add video in HTML</h2>
<video width="600px"
height="500px"
controls="controls">
<source src= "https://www.lambdatest.com/resources/videos/lambdatest-smart-ui-testing.mp4" type="video/mp4" />
</video>
</body>
</html>32. How to Embed Audio in an HTML Document?
To embed audio in an HTML document, use the <audio> element.
Syntax:
<video>
<source src=”file_name” type=”audio_file_type”>
</video>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Listen to Audio</h2>
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>33. How Do You Create a Responsive Image in HTML?
This stands out among frequently asked HTML interview questions. There are three methods to create responsive images in HTML:
- Art direction: As an alternative to the srcset and sizes attributes, the <picture> element in HTML lets you set breakpoints. These are critical points where the page design changes to improve user experience. This method, art-directing images, lets you display different images at various breakpoints.
- Resolution switching: Resolution switching uses the srcset and sizes attributes to provide multiple versions of an image, allowing browsers to choose the most appropriate one based on device resolution and viewport size.
- Image format switching: This technique adapts image formats based on browser support, using the <picture> element to provide fallback options. It's particularly useful for serving modern, efficient formats to support browsers while ensuring compatibility with older ones.
34. How to Create a Nested Web Page in HTML?
This is one of the go-to HTML interview questions. A nested web page refers to embedding one web page's content within another from a different domain. This technique allows you to display external content directly within your web page.
There are two primary methods to achieve this in HTML:
- Using the <iframe> tag: The <iframe> tag creates a rectangular region within your document where a separate web page can be displayed, complete with scrollbars and borders if needed.
Syntax:
<iframe src="URL"></iframe>Example:
<iframe src="https://www.lambdatest.com/learning-hub/"
height="400px" width="900px">
</iframe>Syntax:
<embed src="URL" type="text/html" />Example:
<embed src="https://www.lambdatest.com/learning-hub/"
type="text/html" />35. What Are HTML Entities?
HTML entities are special characters or symbols represented by a specific code or sequence, usually starting with an ampersand (&) and ending with a semicolon (;). They display characters that cannot be easily typed or are reserved for specific purposes in HTML.
Some common HTML entities:
<represents the less-than symbol (<) used for opening tags.>represents the greater-than symbol (>) used for closing tags.&represents the ampersand symbol (&) used for HTML entities."represents the double quote symbol (").'represents the single quote symbol ('). represents a non-breaking space.©represents the copyright symbol (©).®represents the registered trademark symbol (®).Arepresents the character code for "A" (use &#code; for any character code).
36. What Are Symbols in HTML?
This is one of the commonly asked HTML interview questions. HTML uses certain characters as part of its syntax, giving them special significance. To display these characters as regular text or symbols without triggering their special functions, we use HTML entities. These entities allow us to safely include reserved characters and symbols in our web pages.
Some common special symbols and their corresponding HTML entities:
- Copyright Entity: ©
- Registered Trademark Entity: ®
- Trademark Entity: ™
- At Symbol Entity: @
- Paragraph Mark Entity: ¶
- Section Symbol Entity: §
- Double-Struck Capital Entity: 𝕔
37. What Is HTML Encoding?
HTML encoding refers to converting special characters in HTML into their respective character entities. For example, consider the double quotation mark (").
In HTML, double quotes are used to define attribute values in tags. If you want to display a double quotation mark as part of your visible text, you must encode it. The HTML entity for a double quote is ".
HTML encoding is essential for preserving the intended appearance of your content while maintaining valid HTML syntax. It's particularly important when displaying text that includes characters with special HTML meanings, such as direct quotes, code samples, or technical documentation.
38. How to Add CSS Styling in HTML?
This is one of the commonly posed HTML interview questions. There are three main ways to add CSS styling to an HTML document:
- Inline CSS: You can add CSS styles directly to an HTML element using the style attribute.
<h1 style="color: blue; font-size: 24px;">Learning Hub</h1><head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>CSS (styles.css):
h1 {
color: blue;
font-size: 24px;
}HTML:
<head>
<link rel="stylesheet" href="styles.css">
</head>39. How to Add JavaScript to an HTML Web Page?
There are three main ways to add JavaScript to an HTML web page:
JavaScript inside <head> tag
This method places JavaScript code within <script> tags in the <head> of your HTML document. It's useful for scripts that need to load before the page content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript in Head</title>
<script>
function changeContent() {
document.getElementById("demo").innerHTML = "Top 50+ HTML Interview Questions and Answers [2025]";
}
</script>
</head>
<body>
<h1>JavaScript in Head Example</h1>
<p id="demo">Learning Hub</p>
<button onclick="changeContent()">Change Content</button>
</body>
</html>JavaScript inside <body> tag
This method places the <script> tags just before the closing <body> tag. It's beneficial for scripts interacting with page elements, ensuring the DOM is fully loaded before the script runs.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript in Body</title>
</head>
<body>
<h1>JavaScript in Body Example</h1>
<p id="demo">Learning Hub</p>
<button id="changeButton">Change Content</button>
<script>
document.getElementById("changeButton").addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Top 50+ HTML Interview Questions and Answers [2025]";
});
</script>
</body>
</html>External JavaScript
This method involves creating a separate .js file and linking it to your HTML document. It's ideal for larger scripts and promotes better organization and reusability.
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External JavaScript</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>External JavaScript Example</h1>
<p id="demo">Learning Hub</p>
<button id="changeButton">Change Content</button>
</body>
</html>JavaScript (script.js):
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("changeButton").addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Top 50+ HTML Interview Questions and Answers [2025]";
});
});40. What Are Forms in HTML and How to Create Them?
Forms in HTML are used to collect user input data and send it to a server for processing. They allow users to enter information such as names, email addresses, passwords, comments, and other data types.
The <form> element is used to create a form, and it can contain various form control elements such as:
- <input>: Used for various input fields like text, email, password, checkbox, radio button, etc.
- <textarea>: Used for multi-line text input.
- <select> and <option>: Used for creating dropdown lists.
- <button>: Used for creating clickable buttons, often used for form submission.
Example:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
<button type="submit">Submit</button>
</form>41. What Is the Difference Between Cellpadding and Cellspacing?
In HTML tables, cellpadding and cellspacing are properties that control the appearance of table cells, but they have different objectives.
Here are the differences between cellpadding and cellspacing:
| Parameter | Cellpadding | Cellspacing |
|---|---|---|
| Purpose | Defines the space between a table cell's border and its content. | Defines the space between adjacent cells. |
| Creation | Created using the HTML <table> tag with cellpadding. attribute. | Created using the HTML <table> tag with cellspacing attribute. |
| Scope | Applies to a single cell. | Applies to multiple cells simultaneously. |
| Default Value | 1 | 2 |
| Effectiveness | More effective and widely used. | Comparatively less effective than cellpadding. |
42. What Is the Purpose of the data-* Attribute in HTML?
The data-* attribute is used to store custom data in HTML elements. These attributes do not affect the rendering of the page and can be accessed easily via JavaScript, making them useful for storing extra information like IDs, status, or metadata directly within HTML tags.
43. What Are Some HTML5 APIs, and How Are They Used?
HTML APIs, known as Application Programming Interfaces, include definitions and protocols designed specifically for HTML. Tools associated with HTML APIs are utilized for direct configuration within HTML code.
Here are some common HTML5 APIs and their uses:
- Canvas API: Allows you to draw graphics, animations, and visualizations directly on a web page using JavaScript. It provides a programmable rendering surface for creating dynamic and interactive content.
- History API: Allows web applications to manipulate the browser's session history, enabling features like single-page applications and deep linking.
- Geolocation API: Enables web applications to retrieve the user's geographic location with the user's permission. It can be used for location-based services, mapping applications, and context-aware features.
- File API: Allows web applications to interact with the user's local file system, enabling features like file upload, drag-and-drop, and file manipulation.
- Web workers API: Enables the creation of background threads in JavaScript, allowing for parallel processing and computationally intensive tasks without blocking the main user interface thread.
- WebSocket API: Facilitates real-time, bidirectional communication between a web client and a server through a persistent connection, enabling features like chat applications, real-time updates, and multiplayer games.
- Web audio API: Provides a high-level JavaScript API for processing and synthesizing audio, enabling advanced audio manipulation and creating audio visualizations.
- Fullscreen API: Allows web applications to display content in full-screen mode, providing an immersive experience for multimedia applications, games, and presentations.
44. How Do You Optimize an HTML Page’s Load Time?
To optimize an HTML page’s load time, you can minimize the use of large images, compress and minify HTML, CSS, and JavaScript files, and use asynchronous loading for scripts. You should also reduce the number of HTTP requests by combining files where possible, enable browser caching, and use a content delivery network (CDN) to serve assets faster. Lazy loading images and deferring non-critical resources can also improve performance.
45. How Do You Create a Navigation Bar Using HTML and CSS?
To create a navigation bar using HTML and CSS, follow these steps:
- HTML structure: Use an unordered list (<ul>) with list items (<li>) for each navigation link.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>nav {
background-color: #333;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #111;
}46. What Are the Differences Between <blockquote> and <q> Tags?
The following are the differences between <blockquote> and <q> tags:
| Parameter | <blockquote> | <q> |
|---|---|---|
| Purpose | Long quotations. | Short, inline quotations. |
| Display | Block-level element. | Inline element. |
| Default styling | Indented on both sides. | Adds quotation marks. |
| Length | Multiple lines. | Usually, within a sentence. |
| Line breaks | Preserves line breaks. | Do not add line breaks. |
| Citation | Can use cite attributes. | Can use cite attributes. |
| Nesting | Can contain other block elements. | Cannot contain block elements. |
HTML Interview Questions for Experienced
Following are the HTML interview questions for experienced professionals:
47. What Are Logical and Physical Tags in HTML?
HTML uses physical and logical tags to improve users' readability and understanding of text, although these tags have distinct functions, as their names suggest.
- Logical tags: Logical tags in HTML are utilized to present text in logical styles.
- Physical tags: Physical tags in HTML apply actual physical formatting to text.
| Logical Tag | Uses |
|---|---|
| <header> | Defines a header for a document or section |
| <nav> | Defines navigation links |
| <article> | Defines independent, self-contained content |
| <section> | Defines a section in a document |
| <side> | Defines content aside from the page content |
| <footer> | Defines a footer for a document or section |
| <strong> | Indicates strong importance |
| <em> | Emphasizes text |
| <cite> | Defines the title of a work |
| <time> | Defines a date/time |
| Physical Tag | Uses |
|---|---|
| <b> | Bold text |
| <i> | Italic text |
| <u> | Underlined text |
| <font> | Specifies font face, size, and color (deprecated) |
| <center> | Centers text (deprecated) |
| <big> | Increases text size (deprecated) |
| <small> | Decreases text size |
48. Explain MathML in HTML5
MathML (Mathematics Markup Language) has been part of HTML5 since its third version, allowing web browsers to display mathematical equations and expressions like other HTML elements.
It provides an accessible means to visually represent complex mathematical formulas and equations. Its integration into HTML5 mandates that all MathML tags be nested within <math> and </math> tags.
Note: It's important to note that MathML is not a calculator or a programming language. It cannot solve equations but rather displays them in a standardized format.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 MathML Example</title>
</head>
<body>
<math>
<!-- MathML content goes here -->
</math>
</body>
</html>Some of the most common MathML tags include:
| MathML Tags | Uses |
|---|---|
| <mrow> | Creates a row containing mathematical expressions. |
| <mi> | Represents identifiers (variables, function names). |
| <mn> | Displays numeric characters. |
| <mo> | Shows mathematical operators. |
| <mfrac> | Creates fractions. |
| <msqrt> and <mroot> | Display square roots and nth roots. |
| <msub> <msub> and <msub> | Handle subscripts and superscripts. |
| <mtable> <mtr> and <mtd> | Create tables or matrices. |
49. What Do You Mean by Manifest File in HTML5?
A manifest is a text file that directs the browser to cache particular files or web pages, allowing them to remain accessible even offline. The <html> tag in HTML5 includes a manifest attribute to specify which web pages should be cached. When a web page has this attribute or is listed in the manifest file, it will be stored for offline access upon user visits.
Manifest files, which use the .appcache extension, always start with CACHE MANIFEST. These files are divided into three sections: CACHE, NETWORK, and FALLBACK.
- CACHE: This section lists resources (web pages, CSS, JavaScript, images) cached after the first download, allowing offline use.
Example:
<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<h1>LambdaTest Learning Hub</h1>
</body>
</html>This file, when listed in the CACHE section of offline.appcache, will be available offline.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>LambdaTest Learning Hub</h1>
<p>Only available in online mode!</p>
</body>
</html>When listed in the NETWORK section, this file will only be accessible online.
Online version (offline.html):
<!DOCTYPE html>
<html>
<body>
<h1>LambdaTest Learning Hub</h1>
<p>Working in online mode</p>
</body>
</html>Offline fallback (fallback.html):
<!DOCTYPE html>
<html>
<body>
<h1>LambdaTest Learning Hub</h1>
<p>You are working in offline mode.</p>
</body>
</html>A sample manifest file (offline.appcache) might look like this:
CACHE MANIFEST
CACHE:
cache.html
NETWORK:
network.html
FALLBACK:
offline.html fallback.htmlTo implement this, create an index.html file linking all the above files:
<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<h1>LambdaTest Learning Hub</h1>
<a href="cache.html">Cached File</a>
<a href="network.html">Network File</a>
<a href="offline.html">Fallback File</a>
</body>
</html>50. How to Open a Hyperlink in Another Window or Tab in HTML?
In HTML, you can open a hyperlink in another window or tab using the target attribute of the anchor (<a>) tag with "_blank" as the value, directing the browser to open the linked document in a new tab or window.
Syntax:
<a href="URL" target="_blank">Link Text</a>51. How to Handle JavaScript Events in HTML?
To handle JavaScript events in HTML, add a function to an HTML tag that executes JavaScript when any associated event is triggered. HTML provides multiple event attributes, including keyboard events, mouse events, and form events, each serving specific roles.
Syntax:
<element eventAttribute="myScript">HTML offers various event attributes, categorized into different types such as keyboard events, mouse events, and form events.
- onblur: This event occurs when an object loses focus.
<element onblur="myScript"><element onchange="myScript"><element onfocus="myScript">52. What Is the Purpose of the “datetime” Attribute in the “time” Element?
In HTML, the datetime attribute defines the date and time connected with the content, making it machine-readable. It is used with elements like <time> to present structured time-related data.
Syntax:
<element datetime="YYYY-MM-DDThh:mm:ssTZD">This attribute uses a single value string that encodes date and time information. The components of this string are:
- YYYY: Four-digit year (e.g., 2025)
- MM: Two-digit month (e.g., 06 for June)
- DD: Two-digit day of the month (e.g., 13)
- T: A mandatory separator between date and time
- hh: Two-digit hour in 24-hour format (e.g., 15 for 3 PM)
- mm: Two-digit minutes
- ss: Two-digit seconds
- TZD: Time Zone Designator (e.g., Z for UTC, or +/-hh:mm for offsets)
The datetime attribute is particularly useful with these HTML elements:
- <time>: To show up specific times or date ranges.
- <ins>: To indicate when content was inserted into a document.
- <del>: To show when content was removed from a document.
53. What Is an Anchor Tag in HTML?
The <a> tag in HTML defines a hyperlink, allowing navigation from one page to another. Its primary attribute, href, specifies the destination URL. Clicking the link directs the user to this specified location.
Syntax:
<a href="link">Link Name</a>Common usage examples:
- Basic link:
<a href="https://www.lambdatest.com/learning-hub/">Visit Learning Hub</a><a href="https://www.lambdatest.com/learning-hub/" target="_blank">Visit Learning Hub</a><a href="mailto:example@xyz.com">Send email</a>
<a href="tel:+910000000">+910000000</a><a href="#sectionA">Go to Section A</a>Note: Test your HTML websites across 3000+ real desktop browsers. Try LambdaTest Now!
54. Write HTML5 Code to Demonstrate the Use of Geolocation API
The provided code illustrates the use of the HTML5 geolocation API to track a user's movement. It uses the watchPosition() method to continuously monitor location changes.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation Example</title>
</head>
<body>
<h1>Geolocation Distance Tracker</h1>
<button onclick="startTracking()">Start Tracking</button>
<button onclick="stopTracking()">Stop Tracking</button>
<div id="status"></div>
<div id="distance"></div>
<script>
let watchId, startPos;
function startTracking() {
if (navigator.geolocation) {
document.getElementById('status').textContent = 'Tracking started...';
watchId = navigator.geolocation.watchPosition(updatePosition, handleError);
} else {
document.getElementById('status').textContent = 'Geolocation not supported';
}
}
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
document.getElementById('status').textContent = 'Tracking stopped';
}
}
function updatePosition(position) {
if (!startPos) {
startPos = position.coords;
return;
}
let distance = calculateDistance(startPos, position.coords);
document.getElementById('distance').textContent = `Distance moved: ${distance.toFixed(2)} meters`;
}
function calculateDistance(start, end) {
const R = 6371e3; // Earth's radius in meters
const φ1 = start.latitude * Math.PI/180;
const φ2 = end.latitude * Math.PI/180;
const Δφ = (end.latitude - start.latitude) * Math.PI/180;
const Δλ = (end.longitude - start.longitude) * Math.PI/180;
const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ/2) * Math.sin(Δλ/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c;
}
function handleError(error) {
document.getElementById('status').textContent = `Error: ${error.message}`;
}
</script>
</body>
</html>When tracking starts, it records the initial position and then calculates the distance moved from this starting point using the Haversine formula. The script includes functions to start and stop tracking, update the position, calculate distance, and handle errors.
55. How to Add Scalable Vector Graphics to Your Web Page?
To add Scalable Vector Graphics to your web page, you can embed the SVG code directly into your HTML document or include it as an external file.
Embedding SVG code directly:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>In this example, the SVG code is written directly inside the <svg> element, which defines the dimensions and the vector graphics content (in this case, a circle).
Including an external SVG file:
<img src="example.svg" alt="Example SVG">You can include an external SVG file in your HTML document using the <img> tag, just like a raster image like PNG or JPEG. The browser will render the SVG file as an image.
Besides these HTML interview questions and answers, you can also refer to this HTML Cheat Sheet. It’s a handy resource that can help you quickly review essential tags, attributes, and best practices as you prepare.
Conclusion
To conclude, developers must be well-prepared for various HTML interview questions during recruitment. Interviews involve multiple stages, and the questions and answers provided in this article are designed to address each of these stages, with a particular focus on the technical interview.
This comprehensive list serves as a valuable resource for both interviewers and candidates. For interviewers, it offers diverse questions to assess a candidate's HTML proficiency across various skill levels. For candidates, it provides an opportunity to review and reinforce their knowledge, ensuring they're ready to demonstrate their expertise.
Frequently Asked Questions (FAQs)
Did you find this page helpful?
