HTML Interview Questions

HTML stands for HyperText Markup Language.

The <head> tag contains meta-information about the document, such as the title, links to stylesheets, scripts, and metadata.

By using the <a> tag with the href attribute specifying the URL, e.g., <a href="https://example.com">Link</a>.

<div> is a block-level container, while <span> is an inline container for grouping content.

Comments are added like this: .

Use the <img> tag with the src attribute pointing to the image URL, e.g., <img src="image.jpg" alt="Description">.

Semantic elements clearly describe their meaning, e.g., <article>, <section>, <header>, <footer>.

Ordered lists (<ol>) are numbered; unordered lists (<ul>) use bullets. Both use <li> for list items.

The href attribute specifies the link URL.

Use the <video> tag with source(s), e.g., <video controls><source src="movie.mp4" type="video/mp4"></video>.

The <title> tag sets the title of the webpage shown in the browser tab.

Void elements are self-closing and do not have an end tag, e.g., <br>, <hr>, <img>.

An id is unique and used once per page, while classes can be reused on multiple elements.

The <form> tag is used to collect user input and submit it to a server.

Use the <table>, <tr>, <th>, and <td> tags to define the table and its contents.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

The <meta> tag provides metadata such as character encoding, author, and viewport settings.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

The <a> tag defines a hyperlink that links one page to another or to a specific section.

<a href="https://example.com">Visit Example</a>

Use the <img> tag with the src and alt attributes to display an image.

<img src="image.jpg" alt="Description of image">

The <head> tag contains metadata, links to stylesheets, scripts, and other information for the browser.

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
</head>

Use <ul> for unordered lists and <ol> for ordered lists, with <li> for list items.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

It sets the title of the HTML document, which appears in the browser tab.

<title>My Website</title>

Use the <a> tag with the href attribute.

<a href="https://example.com">Visit Example</a>

<div> is block-level, <span> is inline-level.

<div>Block Element</div>
<span>Inline Element</span>

Use the <br> tag.

Line 1<br>Line 2

Semantic HTML uses elements that clearly describe their meaning.

<header></header>
<nav></nav>
<article></article>

Use the <table>, <tr>, <th>, and <td> tags to create a table.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>24</td>
  </tr>
</table>

Use the <b> or <strong> tag to make text bold.

<b>Bold Text</b>
<strong>Strong Text</strong>

<div> is a block-level element; <span> is an inline element.

<div>This is block</div>
<span>This is inline</span>

Use the <video> tag with source elements to embed a video.

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

Use the style attribute or CSS to set background color.

<body style="background-color:lightblue">
  Content here
</body>

The <strong> tag defines text with strong importance and usually renders in bold.

<p>This is <strong>important</strong> text.</p>

The <em> tag is used to emphasize text, typically displayed in italics.

<p>This is <em>emphasized</em> text.</p>

Add the title attribute to an element to display a tooltip on hover.

<p title="This is a tooltip">Hover over me</p>

The <id> attribute is unique per element, while <class> can be shared by multiple elements.

<div id="header">Unique ID</div>
<div class="box">Shared class</div>

Use the target attribute with the value _blank in an <a> tag.

<a href="https://example.com" target="_blank">Open in new tab</a>

The <form> tag collects user input and sends it to a server.

<form action="submit.php" method="post">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

Use the placeholder attribute in an input field.

<input type="text" placeholder="Enter your name">

The <input> tag is used to create interactive fields for user input.

<input type="text" name="username">

Use the <input> tag with type="checkbox".

<input type="checkbox" name="subscribe"> Subscribe

Use <input type="radio"> with the same name attribute for grouped options.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

The class attribute is used to define a group of elements, while id uniquely identifies a single element on the page.

<div class="container">...</div>
<div id="header">...</div>

Use the <iframe> tag with the YouTube video URL in the src attribute.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Data attributes allow you to store custom data on HTML elements using attributes that start with data-.

<div data-user-id="12345">User Info</div>

Use the <form> tag with input elements to collect user data.

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="Username">
  <input type="submit" value="Submit">
</form>

The <section> tag defines a thematic grouping of content, usually with a heading.

<section>
  <h2>About Us</h2>
  <p>Some info here...</p>
</section>

Use the <link> tag in the <head> to link to a favicon image.

<link rel="icon" href="favicon.ico" type="image/x-icon">

<div> is a block-level element used for grouping, while <span> is inline and used to style part of text.

<div>Block content</div>
<span>Inline content</span>

You can wrap the row content in a link or use JavaScript to handle row clicks.

<tr onclick="location.href='page.html';">
  <td>Clickable Row</td>
</tr>

The <label> tag defines labels for input elements, improving accessibility and usability.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Use the <script> tag with the src attribute to include external JavaScript files.

<script src="script.js"></script>

<strong> indicates importance and is semantic, while <b> just styles text bold without meaning.

<strong>Important</strong>
<b>Bold Text</b>

Use the <meta charset="UTF-8"> tag inside the <head> to specify encoding.

<meta charset="UTF-8">

<input type="text"> creates a single-line input, while <textarea> is for multi-line text input.

<input type="text" name="name">
<textarea name="message"></textarea>

Use the <select> element with <option> elements inside a form.

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

The <nav> element represents a section of navigation links.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

The <article> element represents a self-contained composition, such as a blog post, news article, or forum post.

<article>
  <h2>Blog Title</h2>
  <p>Blog content here...</p>
</article>

To make elements responsive, use relative units (%, em, rem), CSS media queries, and flexible layouts like Flexbox or Grid.

img {
  max-width: 100%;
  height: auto;
}

The <footer> tag defines a footer section for a document or section, often containing copyright, links, or author info.

<footer>
  <p>© 2025 My Website</p>
</footer>

Use to comment out code or notes in HTML.

<!-- This is a comment -->

The <iframe> tag embeds another HTML page or external content inside the current page.

<iframe src="https://example.com" width="600" height="400"></iframe>

Use the <ul> tag for unordered lists and <li> for each item.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<em> emphasizes text semantically (usually italics), while <i> styles text italic without semantic emphasis.

<em>Emphasized</em>
<i>Italic</i>

Use the <a> tag with the href attribute.

<a href="https://www.example.com">Visit Example</a>

The <meta> tag provides metadata like charset, description, keywords, and viewport info to the browser.

<meta name="viewport" content="width=device-width, initial-scale=1">

Use the <img> tag with the src and alt attributes.

<img src="image.jpg" alt="Description" width="300">

class is used to assign styles or behavior to multiple elements, while id uniquely identifies a single element.

<div class="box">Multiple</div>
<div id="unique">Single</div>

You can add CSS inside a <style> tag within the <head> section.

<style>
  body { background-color: lightblue; }
</style>

The <nav> element defines a section with navigation links, such as menus or tables of contents.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

Use <table>, <tr>, <th>, and <td> tags to create tables.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

Block elements start on a new line and take full width (e.g., <div>), while inline elements flow within lines and take only needed width (e.g., <span>).

<div>Block element</div>
<span>Inline element</span>

The <form> element collects user input and submits it to a server.

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

Use the target="_blank" attribute inside the <a> tag.

<a href="https://example.com" target="_blank">Visit Example</a>

The <article> element represents a self-contained, independent piece of content.

<article>
  <h2>Blog Post Title</h2>
  <p>Blog post content here.</p>
</article>

Use  to add comments.

<!-- This is a comment -->

The alt attribute provides alternative text for images.

<img src="image.jpg" alt="Description of image">

<section> is semantic, grouping related content; <div> is a generic container with no semantic meaning.

<section>Content grouping</section>
<div>Generic container</div>

Use the <video> tag with src and controls attributes.

<video src="movie.mp4" controls width="320"></video>

The <canvas> element is a drawable region for graphics via JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>

Use the <select> tag with <option> tags.

<select name="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

<iframe> embeds another HTML page inside the current page.

<iframe src="https://example.com" width="300" height="200"></iframe>

Use the <strong> or <b> tags to make text bold.

<strong>Important</strong>
<b>Bold text</b>

Use the <table> tag along with <tr>, <td>, and <th> tags.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

Use <input type="checkbox"> inside a form.

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

The <meta> tag defines metadata like charset, description, and viewport.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Use the <link> tag inside the <head>.

<link rel="stylesheet" href="styles.css">

The <header> element represents introductory content or navigation.

<header>
  <h1>Site Title</h1>
  <nav>Navigation links</nav>
</header>

Use a <link> tag with rel="icon" inside the <head>.

<link rel="icon" href="favicon.ico" type="image/x-icon">

The id attribute specifies a unique identifier.

<div id="header">Content</div>

Give radio buttons the same name attribute to group them.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

The <nav> element defines navigation links.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

Use the <audio> tag with src and controls.

<audio src="audio.mp3" controls></audio>

<b> is stylistic bold; <strong> indicates strong importance.

<b>Bold text</b>
<strong>Important text</strong>

Use the <ol> tag with <li> items.

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Use the class attribute to specify CSS classes.

<div class="container">Content</div>

The <main> element defines the main content unique to the page.

<main>
  <h1>Welcome to the site</h1>
</main>

Use the placeholder attribute inside the input tag.

<input type="text" placeholder="Enter your name">

Use the <hr> tag.

<hr>

Use the maxlength attribute.

<input type="text" maxlength="10">

Wrap the <img> tag inside an <a> tag.

<a href="https://example.com">
  <img src="image.jpg" alt="Example Image">
</a>

Use the <select> tag with nested <option> elements.

<select name="fruits" id="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

HTML Interview Questions

Beginners To Experts

The site is under development.

HTML Interview Questions

HTML Interview Questions

Beginners To Experts

The site is under development.

HTML Interview Questions

1. What does HTML stand for?

2. What is the purpose of the <head> tag in an HTML document?

3. How do you create a hyperlink in HTML?

4. What is the difference between <div> and <span> elements?

5. What is the correct syntax to add a comment in HTML?

6. How can you insert an image in an HTML page?

7. What are semantic HTML elements? Give some examples.

8. How do you create a list in HTML? Explain the difference between ordered and unordered lists.

9. What attribute is used to specify the URL in an anchor (<a>) tag?

10. How do you add a video to an HTML page?

11. What is the role of the <title> tag?

12. What are void elements in HTML?

13. What is the difference between id and class in HTML?

14. What is the use of the <form> tag?

15. How do you create a table in HTML?

16. What does the <meta> tag do?

17. What does the <a> tag do in HTML?

18. How do you add an image in HTML?

19. What is the purpose of the <head> tag?

20. How do you create a list in HTML?

21. What does the <title> tag do?

22. How do you create a hyperlink in HTML?

23. What is the difference between <div> and <span>?

24. How do you insert a line break?

25. What is semantic HTML?

26. How do you create a table in HTML?

27. How do you make text bold in HTML?

28. What is the difference between <div> and <span>?

29. How do you embed a video in HTML?

30. How do you set a background color in HTML?

31. What does the <strong> tag do?

32. What is the <em> tag used for?

33. How do you add a tooltip in HTML?

34. What is the difference between <id> and <class> attributes?

35. How do you create a hyperlink that opens in a new tab?

36. What is the purpose of the <form> tag?

37. How do you display a placeholder in a form input?

38. What does the <input> tag do?

39. How do you add a checkbox in HTML?

40. How do you create a radio button in HTML?

41. What is the difference between class and id attributes in HTML?

42. How do you embed a YouTube video in HTML?

43. What are data attributes in HTML?

44. How do you create a form in HTML?

45. What is the role of the <section> tag in HTML5?

46. How do you add a favicon to a website?

47. What is the difference between <div> and <span>?

48. How do you make a table row clickable in HTML?

49. What is the purpose of the <label> tag in forms?

50. How do you include external JavaScript in HTML?

51. What is the difference between <strong> and <b> tags?

52. How do you specify the character encoding in HTML?

53. What is the difference between <input type="text"> and <textarea>?

54. How do you create a dropdown list in HTML forms?

55. What is the use of the <nav> element in HTML5?

56. What is the purpose of the <article> tag in HTML5?

57. How can you make an HTML element responsive?

58. What is the semantic meaning of the <footer> tag?

59. How do you comment out code in HTML?

60. What is the use of the <iframe> tag?

61. How do you create an unordered list in HTML?

62. What is the difference between <em> and <i> tags?

63. How do you create a hyperlink in HTML?

64. What is the purpose of the <meta> tag in HTML?

65. How do you embed an image in HTML?

66. What is the difference between class and id attributes?

67. How can you include CSS styles inside an HTML document?

68. What is the role of the <nav> element?

69. How do you create a table in HTML?

70. What is the difference between block and inline elements in HTML?

71. What is the purpose of the <form> element in HTML?

72. How do you create a hyperlink that opens in a new tab?

73. What is the semantic meaning of the <article> element?

74. How do you add comments in HTML?

75. What attribute is used to specify an image’s alternative text?

76. What is the difference between <section> and <div> elements?