Top 100 HTML Interview Questions And Answers

HTML Interview Questions

Contents show

1. What does HTML stand for, and what is its role in web development?

HTML stands for HyperText Markup Language. It is the standard markup language used to structure content on the web. HTML provides a way to define the structure of web pages using elements and tags.

Answer:
HTML stands for HyperText Markup Language. It is the backbone of web development, used to create the structure and content of web pages. HTML elements are represented by tags, which define the semantics of the content. Browsers render HTML to display text, images, forms, and other elements.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a sample paragraph.</p>
</body>
</html>

Explanation:
The HTML code above defines a basic web page structure. The <!DOCTYPE html> declaration specifies the HTML version. The <html> element contains the entire web page. The <head> section includes metadata like the page title. The <body> section contains visible content, such as headings and paragraphs.

Reference: MDN Web Docs โ€“ Introduction to HTML


2. Explain the difference between HTML elements and HTML tags.

HTML elements are the building blocks of a web pageโ€™s structure, while HTML tags are used to define and represent these elements.

Answer:
HTML elements are the fundamental components of a web pageโ€™s structure, like headings, paragraphs, links, and images. Each element has a semantic meaning and is defined by a starting tag, content, and an ending tag (if applicable). HTML tags, on the other hand, are used to define and enclose HTML elements. Tags consist of angle brackets < and >, and they come in pairs: opening and closing tags.

Code Snippet:

<p>This is an <em>important</em> paragraph.</p>

Explanation:
In this example, the <p> tag defines a paragraph element, and the <em> tag defines emphasis within the paragraph. The opening tag <em> indicates the start of emphasized text, while the closing tag </em> marks the end of the emphasized text.

Reference: HTML Elements vs. Tags


3. How can you create a hyperlink in HTML?

To create a hyperlink, use the <a> (anchor) element with the href attribute.

Answer:
You can create a hyperlink using the <a> element. The href attribute specifies the URL the link points to. Include the link text between the opening and closing <a> tags.

Code Snippet:

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

Explanation:
In this code, the <a> element creates a hyperlink. The href attribute contains the URL of the target page, and the text โ€œVisit Example.comโ€ is displayed as the link text.

Reference: HTML Links โ€“ w3schools


4. What is the purpose of the <img> element in HTML?

The <img> element is used to embed images in a web page.

Answer:
The <img> element is used to display images on a web page. It requires the src attribute, which specifies the image fileโ€™s source (URL). You can also provide alternative text using the alt attribute for accessibility.

Code Snippet:

<img src="image.jpg" alt="A beautiful landscape">

Explanation:
In this example, the <img> element embeds an image from the file โ€œimage.jpgโ€ and provides โ€œA beautiful landscapeโ€ as the alternative text.

Reference: HTML Images โ€“ MDN Web Docs


5. What is the purpose of the <table> element in HTML?

The <table> element is used to create structured tabular data.

Answer:
The <table> element is used to organize and present tabular data. It consists of multiple elements such as <tr> (table row), <th> (table header), and <td> (table data). <tr> elements define rows, and within each row, you can use <th> for headers and <td> for data cells.

Code Snippet:

<table>
  <tr>
    <th>Name</th>
    <

th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
</table>

Explanation:
In this code, the <table> element defines a table with rows and columns. The first row contains headers (using <th>), and subsequent rows contain data cells (using <td>).

Reference: HTML Tables โ€“ w3schools


6. How can you create an ordered list (numbered list) in HTML?

Use the <ol> element to create an ordered list, and <li> elements for list items.

Answer:
To create an ordered (numbered) list, use the <ol> element. Inside the <ol>, use <li> elements for each list item. The browser automatically numbers the list items.

Code Snippet:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Explanation:
In this example, the <ol> element creates an ordered list. The <li> elements define individual list items. The browser automatically numbers the list items in ascending order.

Reference: HTML Lists โ€“ MDN Web Docs


7. How can you create an unordered list (bullet points) in HTML?

Use the <ul> element to create an unordered list, and <li> elements for list items.

Answer:
To create an unordered (bullet-point) list, use the <ul> element. Within the <ul>, use <li> elements for each list item. The browser displays bullet points or other markers for each list item.

Code Snippet:

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

Explanation:
In this code, the <ul> element creates an unordered list. Each <li> element represents a list item. Bullet points or other markers are used to indicate the list items.

Reference: HTML Lists โ€“ MDN Web Docs


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

The <form> element is used to create interactive input forms on web pages.

Answer:
The <form> element is used to create input forms that allow users to submit data to the server. It contains various form elements such as text fields, radio buttons, checkboxes, and buttons. The action attribute specifies the server endpoint that handles form data.

Code Snippet:

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <button type="submit">Submit</button>
</form>

Explanation:
In this example, the <form> element creates a form. It contains an input field for a username and a submit button. The action attribute points to the โ€œ/submitโ€ endpoint, and the method attribute specifies the HTTP method (POST) for data submission.

Reference: HTML Forms โ€“ w3schools


9. How can you create radio buttons and checkboxes in HTML forms?

Use the <input> element with the type attribute set to โ€œradioโ€ for radio buttons and โ€œcheckboxโ€ for checkboxes.

Answer:
To create radio buttons, use the <input> element with the type attribute set to โ€œradio.โ€ Each radio button should have a unique name attribute but the same name for a group. To create checkboxes, use the <input> element with the type attribute set to โ€œcheckbox.โ€

Code Snippet (Radio Buttons):

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

Code Snippet (Checkboxes):

<label>
  <input type="checkbox" name="interest" value="sports"> Sports
</label>
<label>
  <input type="checkbox" name="interest" value="music"> Music
</label>

Explanation:
In the radio button example, two radio buttons are created using the same name attribute (โ€œgenderโ€) to form a group. Users can select only one option. In the checkbox example, two checkboxes are created with different values under the same name attribute (โ€œinterestโ€), allowing users to select multiple options.

Reference: HTML Input Types โ€“ MDN Web Docs


10. How can you add comments in HTML?

Use <!-- to start a comment and --> to end it.

Answer:
You can add comments in HTML using <!-- to start a comment and --> to end it. Comments are not displayed in the rendered page and are useful for adding notes to your code.

Code Snippet:

<!-- This is a comment. It won't be displayed in the browser. -->
<p>This is a paragraph.</p>

Explanation:
In this example, the comment is not visible when the page is rendered. Itโ€™s a helpful way to annotate your code for yourself and other developers.

Reference: HTML Comments โ€“ w3schools


11. How can you create a hyperlink in HTML?

Use the <a> element to create hyperlinks.

Answer:
To create a hyperlink, use the <a> (anchor) element and set the href attribute to the URL of the target page. You can also provide link text between the opening and closing <a> tags.

Code Snippet:

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

Explanation:
In this code, the <a> element creates a hyperlink to โ€œhttps://www.example.comโ€ with the link text โ€œVisit Example.โ€

Reference: HTML Links โ€“ w3schools


12. How can you create a clickable email link in HTML?

Use the <a> element with the href attribute set to โ€œmailto:โ€ followed by the email address.

Answer:
To create a clickable email link, use the <a> element with the href attribute set to โ€œmailto:โ€ followed by the email address. This opens the userโ€™s default email client when clicked.

Code Snippet:

<a href="mailto:info@example.com">Send Email</a>

Explanation:
In this example, clicking the link opens the userโ€™s email client with โ€œinfo@example.comโ€ in the โ€œToโ€ field.

Reference: HTML Email Links โ€“ w3schools


13. What is the purpose of the <img> element in HTML?

The <img> element is used to embed images in a web page.

Answer:
The <img> element is used to display images on a web page. The src attribute specifies the image fileโ€™s URL, and the alt attribute provides alternative text for accessibility and if the image fails to load.

Code Snippet:

<img src="image.jpg" alt="A beautiful landscape">

Explanation:
In this code, the <img> element displays an image named โ€œimage.jpgโ€ with the alternative text โ€œA beautiful landscape.โ€

Reference: HTML Images โ€“ MDN Web Docs


14. How can you create a hyperlink that opens in a new browser tab?

Use the target attribute with the value โ€œ_blankโ€ in the <a> element.

Answer:
To create a hyperlink that opens in a new browser tab or window, add the target attribute with the value โ€œ_blankโ€ to the <a> element.

Code Snippet:

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

Explanation:
In this code, the <a> element opens โ€œhttps://www.example.comโ€ in a new browser tab or window when clicked.

Reference: HTML Links โ€“ w3schools


15. What is the purpose of the <div> element in HTML?

The <div> element is a container for grouping and styling other elements.

Answer:
The <div> element is a generic container used to group and style other HTML elements. Itโ€™s often used to structure content and apply CSS styling.

Code Snippet:

<div class="container">
  <h1>Welcome to our website</h1>
  <p>This is some content in a div.</p>
</div>

Explanation:
In this example, the <div> element with the class โ€œcontainerโ€ is used to group the heading and paragraph elements. It can be styled using CSS.

Reference: HTML <div> Element โ€“ MDN Web Docs


16. How can you add a background color to an HTML element?

Use the style attribute with the background-color property.

Answer:
To add a background color to an HTML element, use the style attribute and set the background-color property to a color value.

Code Snippet:

<p style="background-color: yellow;">This is a paragraph with a yellow background.</p>

Explanation:
In this code, the style attribute sets the background color of the paragraph to yellow.

Reference: CSS Backgrounds and Borders Module Level 3 โ€“ W3C


17. What is the purpose of the <span> element in HTML?

The <span> element is used to apply styling to inline elements.

Answer:
The <span> element is an inline container used to apply styling or manipulate specific portions of text within a larger block of text or content.

Code Snippet:

<p>This is <span style="color: blue;">blue</span> text.</p>

Explanation:
In this example, the <span> element is used to style the word โ€œblueโ€ with a blue color.

Reference: [HTML <span> Element โ€“ MDN

Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)


18. How can you create an unordered list in HTML?

Use the <ul> element to create an unordered list, and <li> elements for list items.

Answer:
To create an unordered list, use the <ul> element, and within it, use <li> elements for each list item.

Code Snippet:

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

Explanation:
In this code, the <ul> element creates an unordered list with three list items.

Reference: HTML Lists โ€“ w3schools


19. How can you create an ordered list in HTML?

Use the <ol> element to create an ordered list, and <li> elements for list items.

Answer:
To create an ordered list, use the <ol> element, and within it, use <li> elements for each list item.

Code Snippet:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Explanation:
In this code, the <ol> element creates an ordered list with three list items.

Reference: HTML Lists โ€“ w3schools


20. How can you create a definition list in HTML?

Use the <dl> element for a definition list, <dt> elements for terms, and <dd> elements for their definitions.

Answer:
To create a definition list, use the <dl> element, and within it, use <dt> elements for terms and <dd> elements for their definitions.

Code Snippet:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Explanation:
In this code, the <dl> element creates a definition list with terms and their definitions using <dt> and <dd> elements.

Reference: HTML Lists โ€“ w3schools


21. How can you create a hyperlink within the same page using an anchor tag?

Use the # symbol followed by the id attribute of the target element as the value of the href attribute.

Answer:
To create an internal hyperlink, set the href attribute of the <a> element to # followed by the id attribute of the target element.

Code Snippet:

<a href="#section2">Jump to Section 2</a>
...
<h2 id="section2">Section 2</h2>

Explanation:
In this code, clicking the link โ€œJump to Section 2โ€ will navigate to the element with the id attribute โ€œsection2.โ€

Reference: HTML Links โ€“ w3schools


22. How can you add comments in HTML?

Use <!-- to start a comment and --> to end it.

Answer:
To add comments in HTML, use the <!-- symbol to start a comment and --> to end it. Comments are not displayed in the browser.

Code Snippet:

<!-- This is a comment -->

Explanation:
In this example, the text โ€œThis is a commentโ€ is a comment and wonโ€™t be rendered in the web page.

Reference: HTML Comments โ€“ MDN Web Docs


23. What is the purpose of the <iframe> element in HTML?

The <iframe> element is used to embed another document within the current document.

Answer:
The <iframe> element is used to embed another document or web page within the current document. Itโ€™s often used to embed videos, maps, and other external content.

Code Snippet:

<iframe src="https://www.youtube.com/embed/video_id"></iframe>

Explanation:
In this code, the <iframe> element embeds a YouTube video using its video URL.

Reference: HTML <iframe> Element โ€“ MDN Web Docs


24. How can you create a line break in HTML?

Use the <br> element to create a line break.

Answer:
To create a line break in HTML, use the <br> element. It doesnโ€™t require a closing tag and creates a new line within the text.

Code Snippet:

<p>This is the first line.<br>This is the second line.</p>

Explanation:
In this example, the <br> element creates a line break between the first and second lines of the paragraph.

Reference: HTML Line Breaks โ€“ w3schools


25. How can you add an image as a link in HTML?

Wrap an <img> element with an <a> element.

Answer:
To create an image link, wrap an <img> element with an <a> element and set the href attribute of the <a> element to the target URL.

Code Snippet:

<a href="https://www.example.com">
  <img src="image.jpg" alt="Click me">
</a>

Explanation:
In this code, clicking the image will navigate to โ€œhttps://www.example.com.โ€

Reference: HTML Links โ€“ w3schools


26. What is the purpose of the <header> element in HTML?

The <header> element represents a container for introductory content or a group of navigation links.

Answer:
The <header> element is used to define a container for introductory content or navigation links at the top of a web page.

Code Snippet:

<header>
  <h1>Website Header</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

Explanation:
In this example, the <header> element contains a heading and navigation links.

Reference: HTML <header> Element โ€“ MDN Web Docs


27. How can you make text bold in HTML?

Use the <strong> element for semantic importance and CSS for styling.

Answer:
To make text bold, use the <strong> element for semantic importance. For styling, use CSS with the font-weight property.

Code Snippet:

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

Explanation:
In this code, the <strong> element indicates semantic importance, and the text inside it is displayed in bold.

Reference: [HTML <strong> Element โ€“ MDN Web Docs](https://developer.mozilla.org/en-US/docs

/Web/HTML/Element/strong)


28. What is the purpose of the <footer> element in HTML?

The <footer> element represents a container for the footer content of a web page.

Answer:
The <footer> element is used to define a container for the footer content of a web page, such as copyright information, contact details, etc.

Code Snippet:

<footer>
  <p>&copy; 2023 Example Company</p>
</footer>

Explanation:
In this code, the <footer> element contains copyright information.

Reference: HTML <footer> Element โ€“ MDN Web Docs


29. How can you create a form in HTML?

Use the <form> element to create a form, and add form controls inside it.

Answer:
To create a form, use the <form> element, and within it, add form controls like <input>, <select>, and <textarea>.

Code Snippet:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

Explanation:
In this code, the <form> element contains an input field and a submit button.

Reference: HTML Forms โ€“ w3schools


30. What is the purpose of the <nav> element in HTML?

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

Answer:
The <nav> element is used to define a section of navigation links, allowing users to navigate through different parts of a web page or to other pages.

Code Snippet:

<nav>
  <a href="#">Home</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</nav>

Explanation:
In this code, the <nav> element contains navigation links.

Reference: HTML <nav> Element โ€“ MDN Web Docs


31. What is the purpose of the <section> element in HTML?

The <section> element defines a thematic grouping of content within a web page.

Answer:
The <section> element is used to create a thematic grouping of content that is related in meaning. It helps to structure the document and make it more semantically meaningful.

Code Snippet:

<section>
  <h2>About Us</h2>
  <p>Learn more about our company.</p>
</section>

Explanation:
In this code, the <section> element contains content related to the โ€œAbout Usโ€ section of the page.

Reference: HTML <section> Element โ€“ MDN Web Docs


32. How can you include special characters in HTML?

Use character entities or codes to display special characters.

Answer:
To display special characters like copyright symbol (ยฉ) or trademark symbol (โ„ข), use character entities (e.g., &copy;) or character codes (e.g., &#169;).

Code Snippet:

<p>&copy; 2023 Example Company</p>

Explanation:
In this code, &copy; is used to display the copyright symbol.

Reference: HTML Entities โ€“ w3schools


33. What is the purpose of the <aside> element in HTML?

The <aside> element represents content that is indirectly related to the main content.

Answer:
The <aside> element is used to define content that is tangentially related to the main content, such as sidebars, pull quotes, or advertising.

Code Snippet:

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Learn more</a></li>
    <li><a href="#">Explore our products</a></li>
  </ul>
</aside>

Explanation:
In this code, the <aside> element contains related links as a sidebar.

Reference: HTML <aside> Element โ€“ MDN Web Docs


34. How can you add a video to your web page in HTML?

Use the <video> element to embed a video in various formats.

Answer:
To add a video to a web page, use the <video> element and specify the video source using the src attribute. Include multiple source elements to provide compatibility across different browsers and formats.

Code Snippet:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Explanation:
In this code, the <video> element embeds a video with controls and multiple source options.

Reference: HTML <video> Element โ€“ MDN Web Docs


35. How can you create a tooltip in HTML?

Use the title attribute to create simple tooltips for elements.

Answer:
To create tooltips, use the title attribute on elements like <a>, <img>, or <abbr>. When users hover over the element, the tooltip text is displayed.

Code Snippet:

<a href="#" title="Click here to learn more">Learn more</a>

Explanation:
In this code, hovering over the link displays the tooltip โ€œClick here to learn more.โ€

Reference: HTML Tooltip โ€“ w3schools


36. What is the purpose of the <main> element in HTML?

The <main> element represents the main content of a document.

Answer:
The <main> element is used to define the main content of a document. It should be unique to the document and not used within repeated sections.

Code Snippet:

<main>
  <h1>Welcome to Our Website</h1>
  <p>This is the main content area.</p>
</main>

Explanation:
In this code, the <main> element contains the primary content of the web page.

Reference: HTML <main> Element โ€“ MDN Web Docs


37. How can you create a dropdown menu in HTML?

Use the <select> element for a dropdown menu, and <option> elements for the choices.

Answer:
To create a dropdown menu, use the <select> element, and within it, add <option> elements for

each choice.

Code Snippet:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Explanation:
In this code, the <select> element creates a dropdown menu with car options.

Reference: HTML <select> Element โ€“ MDN Web Docs


38. How can you add an image in HTML?

Use the <img> element to embed an image.

Answer:
To add an image, use the <img> element and specify the image source using the src attribute.

Code Snippet:

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

Explanation:
In this code, the <img> element displays an image with a description.

Reference: HTML Images โ€“ w3schools


39. What is the purpose of the <details> element in HTML?

The <details> element creates a disclosure widget for hiding/showing content.

Answer:
The <details> element is used to create a widget that can be clicked to reveal or hide additional content within it.

Code Snippet:

<details>
  <summary>Click to reveal</summary>
  <p>Hidden content here.</p>
</details>

Explanation:
In this code, the <details> element hides content initially and reveals it when clicked.

Reference: HTML <details> Element โ€“ MDN Web Docs


40. How can you link to another web page in HTML?

Use the <a> element to create links.

Answer:
To create links to other web pages, use the <a> (anchor) element and set the href attribute to the URL of the target page.

Code Snippet:

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

Explanation:
In this code, the <a> element creates a link to the example website.

Reference: HTML Links โ€“ w3schools


41. What is the purpose of the <blockquote> element in HTML?

The <blockquote> element is used to mark up a section that is quoted from another source.

Answer:
The <blockquote> element is used to indicate that the enclosed text is a quotation from another source. It is often styled with indentation to distinguish it from the rest of the content.

Code Snippet:

<blockquote>
  "The greatest glory in living lies not in never falling, but in rising every time we fall." - Nelson Mandela
</blockquote>

Explanation:
In this code, the <blockquote> element is used to present a quote from Nelson Mandela.

Reference: HTML <blockquote> Element โ€“ MDN Web Docs


42. How can you create a form in HTML?

Use the <form> element to create a form.

Answer:
To create a form, use the <form> element and add various form controls like <input>, <textarea>, and <button>.

Code Snippet:

<form action="/submit" 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>

  <button type="submit">Submit</button>
</form>

Explanation:
In this code, a basic form is created with input fields for name and email.

Reference: HTML Forms โ€“ w3schools


43. What is the purpose of the <nav> element in HTML?

The <nav> element represents navigation links.

Answer:
The <nav> element is used to define a section containing navigation links, such as menus or navigation bars.

Code Snippet:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Explanation:
In this code, the <nav> element contains navigation links in an unordered list.

Reference: HTML <nav> Element โ€“ MDN Web Docs


44. How can you create a table in HTML?

Use the <table> element to create a table.

Answer:
To create a table, use the <table> element and add rows using <tr>, header cells using <th>, and data cells using <td>.

Code Snippet:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>28</td>
  </tr>
</table>

Explanation:
In this code, a simple table is created with headers and data rows.

Reference: HTML Tables โ€“ w3schools


45. What is the purpose of the <em> element in HTML?

The <em> element emphasizes text.

Answer:
The <em> element is used to mark text as emphasized. It typically renders as italicized text.

Code Snippet:

<p>He said, <em>"Please remember to bring your ID."</em></p>

Explanation:
In this code, the <em> element is used to emphasize the quoted text.

Reference: HTML <em> Element โ€“ MDN Web Docs


46. How can you add a line break in HTML?

Use the <br> element to add a line break.

Answer:
To create a line break, use the <br> element.

Code Snippet:

<p>This is the first line.<br>This is the second line.</p>

Explanation:
In this code, the <br> element adds a line break between the two lines of text.

Reference: HTML Line Break โ€“ w3schools


47. What is the purpose of the <footer> element in HTML?

The <footer> element represents the footer of a section or page.

**Answer:

**
The <footer> element is used to define the footer of a section or page. It often contains information about the author, copyright, contact details, or links to related documents.

Code Snippet:

<footer>
  <p>&copy; 2023 Example Company. All rights reserved.</p>
</footer>

Explanation:
In this code, the <footer> element contains a copyright notice.

Reference: HTML <footer> Element โ€“ MDN Web Docs


48. What is the purpose of the <aside> element in HTML?

The <aside> element represents content related to the main content but can be considered separate.

Answer:
The <aside> element is used to mark content that is related to the main content but can be considered separate, such as sidebars, pull quotes, or advertising.

Code Snippet:

<aside>
  <h3>Latest News</h3>
  <p>Read about the latest updates in the tech industry.</p>
</aside>

Explanation:
In this code, the <aside> element contains supplementary information.

Reference: HTML <aside> Element โ€“ MDN Web Docs


49. How can you add a video in HTML?

Use the <video> element to embed a video.

Answer:
To embed a video, use the <video> element and set the src attribute to the video fileโ€™s URL.

Code Snippet:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Explanation:
In this code, the <video> element embeds a video file with playback controls.

Reference: HTML Video โ€“ w3schools


50. What is the purpose of the <kbd> element in HTML?

The <kbd> element represents user input or text to be entered by the user.

Answer:
The <kbd> element is used to mark text that represents keyboard input, command names, or text to be entered by the user.

Code Snippet:

<p>To save the document, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Explanation:
In this code, the <kbd> element indicates keyboard input.

Reference: HTML <kbd> Element โ€“ MDN Web Docs


51. How can you add audio in HTML?

Use the <audio> element to embed audio.

Answer:
To embed audio, use the <audio> element and specify the audio fileโ€™s URL using the src attribute.

Code Snippet:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Explanation:
In this code, the <audio> element embeds an audio file with playback controls.

Reference: HTML Audio โ€“ w3schools


52. What is the purpose of the <mark> element in HTML?

The <mark> element highlights text.

Answer:
The <mark> element is used to highlight text within the content, often indicating a search result or relevant section.

Code Snippet:

<p>Search results for <mark>HTML</mark> interview questions.</p>

Explanation:
In this code, the <mark> element highlights the word โ€œHTMLโ€ in the search results.

Reference: HTML <mark> Element โ€“ MDN Web Docs


53. How can you add a comment in HTML?

Use <!-- to start a comment and --> to end it.

Answer:
To add comments in HTML, use the <!-- sequence to start a comment and --> to end it.

Code Snippet:

<!-- This is a comment. It won't be displayed in the browser. -->

Explanation:
In this code, the comment wonโ€™t be visible on the webpage but is used for notes in the code.

Reference: HTML Comments โ€“ w3schools


54. What is the purpose of the <abbr> element in HTML?

The <abbr> element represents an abbreviation or acronym.

Answer:
The <abbr> element is used to mark up an abbreviation or acronym and can include an optional title attribute for the full form.

Code Snippet:

<p><abbr title="HyperText Markup Language">HTML</abbr> is used for structuring web content.</p>

Explanation:
In this code, the <abbr> element indicates the abbreviation โ€œHTMLโ€ and provides the full form as a tooltip.

Reference: HTML <abbr> Element โ€“ MDN Web Docs


55. How can you add a hyperlink in HTML?

Use the <a> element to create a hyperlink.

Answer:
To create a hyperlink, use the <a> element and set the href attribute to the URL of the target page.

Code Snippet:

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

Explanation:
In this code, the <a> element creates a hyperlink to the website โ€œExample.com.โ€

Reference: HTML Links โ€“ w3schools


56. What is the purpose of the <picture> element in HTML?

The <picture> element is used for responsive images.

Answer:
The <picture> element is used to provide multiple sources for an image and allows browsers to choose the appropriate source based on the deviceโ€™s characteristics.

Code Snippet:

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px)" srcset="large.jpg">
  <img src="fallback.jpg" alt="A responsive image">
</picture>

Explanation:
In this code, the <picture> element supplies different image sources based on the deviceโ€™s width.

Reference: HTML <picture> Element โ€“ MDN Web Docs


57. How can you create a horizontal rule in HTML?

Use the <hr> element to create a horizontal rule.

Answer:
To create a horizontal rule, use the <hr> element.

Code Snippet:

<p>This is some text.</p>
<hr>
<p>This is more text.</p>

Explanation:
In this code, the <hr> element adds a horizontal rule between two paragraphs.

Reference: HTML <hr> Element โ€“ MDN Web Docs


58. What is the purpose of the <time> element in HTML?

The <time> element represents a specific time or duration.

Answer:
The <time> element is used to mark up a specific time or a duration, and it can include a datetime attribute for machine-readable information.

Code Snippet:

<p>Today is <time datetime="2023-08-25">August 25, 2023</time>.</p>

Explanation:
In this code, the <time> element displays the date and includes the datetime attribute for additional information.

Reference: HTML <time> Element โ€“ MDN Web Docs


59. How can you add an image in HTML?

Use the <img> element to embed an image.

Answer:
To embed an image, use the <img> element and set the src attribute to the image fileโ€™s URL.

Code Snippet:

<img src="image.jpg" alt="An example image">

Explanation:
In this code, the <img> element embeds an image with the specified source and alt text.

Reference: HTML Images โ€“ w3schools


60. What is the purpose of the <details> element in HTML?

The <details> element creates a disclosure widget for additional information.

Answer:
The <details> element is used to create a disclosure widget that can be clicked to reveal additional information, often accompanied by a <summary> element.

Code Snippet:

<details>
  <summary>Click to reveal more information</summary>
  <p>This is the additional information that was hidden.</p>
</details>

Explanation:
In this code, the <details> element creates a widget to reveal additional information when clicked.

Reference: HTML <details> Element โ€“ MDN Web Docs


61. What is the purpose of the <datalist> element in HTML?

The <datalist> element provides a predefined list of options for an <input> element.

Answer:
The <datalist> element is used to create a list of predefined options that can be associated with an <input> element using the list attribute.

Code Snippet:

<label for="browser">Choose a browser:</label>
<input type="text" id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
</datalist>

Explanation:
In this code, the <datalist> element provides options for the browser selection input.

Reference: HTML <datalist> Element โ€“ MDN Web Docs


62. How can you create an unordered list in HTML?

Use the <ul> element to create an unordered list.

Answer:
To create an unordered list, use the <ul> element and enclose each list item within <li> elements.

Code Snippet:

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

Explanation:
In this code, the <ul> element creates an unordered list with three list items.

Reference: HTML Lists โ€“ w3schools


63. What is the purpose of the <code> element in HTML?

The <code> element represents code or text that should be displayed as monospace font.

Answer:
The <code> element is used to mark up text or code that should be displayed in a monospace font, often representing code snippets or programming instructions.

Code Snippet:

<p>To display an alert, use the <code>alert('Hello');</code> function.</p>

Explanation:
In this code, the <code> element is used to display a code snippet.

Reference: HTML <code> Element โ€“ MDN Web Docs


64. How can you add a line break in HTML?

Use the <br> element to add a line break.

Answer:
To add a line break, use the <br> element. It doesnโ€™t require a closing tag.

Code Snippet:

<p>This is the first line.<br>This is the second line.</p>

Explanation:
In this code, the <br> element adds a line break between the two lines of text.

Reference: HTML Line Breaks โ€“ w3schools


65. What is the purpose of the <pre> element in HTML?

The <pre> element preserves whitespace and line breaks.

Answer:
The <pre> element is used to display text in a preformatted style, preserving whitespace, line breaks, and spacing.

Code Snippet:

<pre>
  function add(a, b) {
    return a + b;
  }
</pre>

Explanation:
In this code, the <pre> element maintains the formatting of the code.

Reference: HTML <pre> Element โ€“ MDN Web Docs


66. How can you create a checkbox in HTML?

Use the <input> element with type="checkbox" to create a checkbox.

Answer:
To create a checkbox, use the <input> element with type="checkbox".

Code Snippet:

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

Explanation:
In this code, the <input> element creates a checkbox for subscribing to a newsletter.

Reference: HTML Checkboxes โ€“ w3schools


67. What is the purpose of the <q> element in HTML?

The <q> element represents a short inline quotation.

Answer:
The <q> element is used to mark up a short inline quotation. It is typically enclosed within quotation marks.

Code Snippet:

<q>This is a short quotation.</q>

Explanation:
In this code, the <q> element marks the short quotation.

Reference: HTML <q> Element โ€“ MDN Web Docs


68. How can you create an ordered list in HTML?

Use the <ol> element to create an ordered list.

Answer:
To create an ordered list, use the <ol> element and enclose each list item within <li> elements.

Code Snippet:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Explanation:
In this code, the <ol> element creates an ordered list with three list items.

Reference: HTML Lists โ€“ w3schools


69. What is the purpose of the <sup> element in HTML?

The <sup> element represents superscript text.

Answer:
The <sup> element is used to display superscript text, typically smaller and raised above the baseline.

Code Snippet:

<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>The exponent of 10<sup>3</sup> is 1000.</p>

Explanation:
In this code, the <sup> element is used for subscript and superscript text.

Reference: HTML <sup> Element โ€“ MDN Web Docs


70. How can you create a text input field in HTML?

Use the <input> element with type="text" to create a text input field.

Answer:
To create a text input field, use the <input> element with type="text".

Code Snippet:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Explanation:
In this code, the <input> element creates a text input field for entering a username.

Reference: HTML Text Input โ€“ w3schools


71. How can you create a hyperlink in HTML?

Use the <a> element to create a hyperlink.

Answer:
To create a hyperlink, use the <a> element and provide the destination URL using the href attribute.

Code Snippet:

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

Explanation:
In this code, the <a> element creates a hyperlink to the Example website.

Reference: HTML Links โ€“ w3schools


72. What is the purpose of the <abbr> element in HTML?

The <abbr> element represents an abbreviation or acronym.

Answer:
The <abbr> element is used to mark up an abbreviation or acronym, providing a tooltip with the full expansion on hover.

Code Snippet:

<p>The <abbr title="World Health Organization">WHO</abbr> provides health guidelines.</p>

Explanation:
In this code, the <abbr> element represents the abbreviation โ€œWHO.โ€

Reference: HTML <abbr> Element โ€“ MDN Web Docs


73. How can you add a horizontal rule in HTML?

Use the <hr> element to add a horizontal rule.

Answer:
To add a horizontal rule, use the <hr> element. It is a self-closing tag.

Code Snippet:

<p>Paragraph 1</p>
<hr>
<p>Paragraph 2</p>

Explanation:
In this code, the <hr> element creates a horizontal rule between two paragraphs.

Reference: HTML Horizontal Rules โ€“ w3schools


74. What is the purpose of the <i> element in HTML?

The <i> element represents text in an alternative voice or mood.

Answer:
The <i> element is used to mark up text that should be displayed in an alternative voice or mood, often representing a span of text in italics.

Code Snippet:

<p><i>This text is in italics.</i></p>

Explanation:
In this code, the <i> element italicizes the enclosed text.

Reference: HTML <i> Element โ€“ MDN Web Docs


75. How can you create a radio button in HTML?

Use the <input> element with type="radio" to create a radio button.

Answer:
To create a radio button, use the <input> element with type="radio".

Code Snippet:

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

Explanation:
In this code, the <input> elements create radio buttons for selecting gender.

Reference: HTML Radio Buttons โ€“ w3schools


76. What is the purpose of the <mark> element in HTML?

The <mark> element represents text highlighted for reference or emphasis.

Answer:
The <mark> element is used to mark up text that is highlighted for reference or emphasis, often represented with a yellow background.

Code Snippet:

<p>This is an important <mark>note</mark> to remember.</p>

Explanation:
In this code, the <mark> element highlights the word โ€œnote.โ€

Reference: HTML <mark> Element โ€“ MDN Web Docs


77. How can you create a submit button in HTML?

Use the <input> element with type="submit" to create a submit button.

Answer:
To create a submit button, use the <input> element with type="submit".

Code Snippet:

<input type="submit" value="Submit">

Explanation:
In this code, the <input> element creates a submit button with the label โ€œSubmit.โ€

Reference: HTML Submit Button โ€“ w3schools


78. What is the purpose of the <strong> element in HTML?

The <strong> element represents strong importance or emphasis.

Answer:
The <strong> element is used to mark up text that has strong importance or emphasis, often displayed in bold.

Code Snippet:

<p>This is <strong>very important</strong> information.</p>

Explanation:
In this code, the <strong>

element emphasizes the text โ€œvery important.โ€

Reference: HTML <strong> Element โ€“ MDN Web Docs


79. How can you create a checkbox in HTML?

Use the <input> element with type="checkbox" to create a checkbox.

Answer:
To create a checkbox, use the <input> element with type="checkbox".

Code Snippet:

<label>
  <input type="checkbox" name="subscribe"> Subscribe to newsletter
</label>

Explanation:
In this code, the <input> element creates a checkbox for subscribing to a newsletter.

Reference: HTML Checkboxes โ€“ w3schools


80. What is the purpose of the <sub> element in HTML?

The <sub> element represents subscript text.

Answer:
The <sub> element is used to display subscript text, typically smaller and lowered below the baseline.

Code Snippet:

<p>The chemical formula for water is H<sub>2</sub>O.</p>

Explanation:
In this code, the <sub> element is used for subscript text.

Reference: HTML <sub> Element โ€“ MDN Web Docs


81. How can you create a text input field in HTML?

Use the <input> element with type="text" to create a text input field.

Answer:
To create a text input field, use the <input> element with type="text".

Code Snippet:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Explanation:
In this code, the <input> element creates a text input field for entering a username.

Reference: HTML Text Input โ€“ w3schools


82. What is the purpose of the <sup> element in HTML?

The <sup> element represents superscript text.

Answer:
The <sup> element is used to display superscript text, typically smaller and raised above the baseline.

Code Snippet:

<p>The chemical formula for carbon dioxide is CO<sup>2</sup>.</p>

Explanation:
In this code, the <sup> element is used for superscript text.

Reference: HTML <sup> Element โ€“ MDN Web Docs


83. How can you create a password input field in HTML?

Use the <input> element with type="password" to create a password input field.

Answer:
To create a password input field, use the <input> element with type="password". This field masks the entered text.

Code Snippet:

<label for="password">Password:</label>
<input type="password" id="password" name="password">

Explanation:
In this code, the <input> element creates a password input field for entering a password.

Reference: HTML Password Input โ€“ w3schools


84. What is the purpose of the <del> element in HTML?

The <del> element represents deleted or struck-through text.

Answer:
The <del> element is used to mark up text that has been deleted or struck through in the document.

Code Snippet:

<p>He said <del>hello</del> goodbye.</p>

Explanation:
In this code, the <del> element represents the deleted word โ€œhello.โ€

Reference: HTML <del> Element โ€“ MDN Web Docs


85. How can you create a text area in HTML?

Use the <textarea> element to create a text area.

Answer:
To create a text area, use the <textarea> element. You can set the number of rows and columns as attributes.

Code Snippet:

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

Explanation:
In this code, the <textarea> element creates a multi-line text input area for entering comments.

Reference: HTML Textarea โ€“ w3schools


86. What is the purpose of the <ins> element in HTML?

The <ins> element represents inserted text.

Answer:
The <ins> element is used to mark up text that has been inserted into the document, often displayed with underlines.

Code Snippet:

<p>She <ins>loves</ins> chocolate.</p>

Explanation:
In this code, the <ins> element represents the inserted word โ€œloves.โ€

Reference: HTML <ins> Element โ€“ MDN Web Docs


87. How can you create a dropdown list in HTML?

Use the <select> element to create a dropdown list, and <option> elements to define the options.

Answer:
To create a dropdown list, use the <select> element and provide <option> elements for each selectable option.

Code Snippet:

<label for="color">Select a color:</label>
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

Explanation:
In this code, the <select> element creates a dropdown list for selecting colors.

Reference: HTML Dropdowns โ€“ w3schools


88. What is the purpose of the <code> element in HTML?

The <code> element represents inline code or code fragments.

Answer:
The <code> element is used to mark up inline code or code fragments within a sentence or paragraph.

Code Snippet:

<p>Use

 the <code>&lt;strong&gt;</code> element for strong emphasis.</p>

Explanation:
In this code, the <code> element is used to display inline code.

Reference: HTML <code> Element โ€“ MDN Web Docs


89. How can you create radio buttons in HTML?

Use the <input> element with type="radio" to create radio buttons. Use the name attribute to group them.

Answer:
To create radio buttons, use the <input> element with type="radio". Use the same name attribute for each radio button to group them.

Code Snippet:

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

Explanation:
In this code, two radio buttons are created with the same name attribute to group them under โ€œgender.โ€

Reference: HTML Radio Buttons โ€“ w3schools


90. What is the purpose of the <kbd> element in HTML?

The <kbd> element represents user keyboard input.

Answer:
The <kbd> element is used to mark up text that represents user keyboard input, typically displayed in a monospace font.

Code Snippet:

<p>To save, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Explanation:
In this code, the <kbd> element is used to display keyboard input โ€œCtrlโ€ and โ€œS.โ€

Reference: HTML <kbd> Element โ€“ MDN Web Docs


91. How can you create a hyperlink in HTML?

Use the <a> element to create hyperlinks.

Answer:
To create a hyperlink, use the <a> element with the href attribute containing the URL of the link.

Code Snippet:

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

Explanation:
In this code, the <a> element creates a hyperlink to โ€œhttps://www.example.com.โ€

Reference: HTML Links โ€“ w3schools


92. What is the purpose of the <var> element in HTML?

The <var> element represents a variable or placeholder text.

Answer:
The <var> element is used to mark up variables or placeholder text that users can replace.

Code Snippet:

<p>The equation is <var>x</var> + <var>y</var> = <var>z</var>.</p>

Explanation:
In this code, the <var> element is used for variable placeholders.

Reference: HTML <var> Element โ€“ MDN Web Docs


93. How can you create an image in HTML?

Use the <img> element to embed images.

Answer:
To embed an image, use the <img> element with the src attribute containing the image URL.

Code Snippet:

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

Explanation:
In this code, the <img> element displays the image โ€œimage.jpgโ€ with an alternative text description.

Reference: HTML Images โ€“ w3schools


94. What is the purpose of the <samp> element in HTML?

The <samp> element represents sample or output text from a computer program.

Answer:
The <samp> element is used to mark up sample or output text from a computer program, typically displayed in a monospace font.

Code Snippet:

<p>The output is <samp>Hello, World!</samp></p>

Explanation:
In this code, the <samp> element is used for sample output text.

Reference: HTML <samp> Element โ€“ MDN Web Docs


95. How can you create a numbered list in HTML?

Use the <ol> element to create a numbered list, and <li> elements for list items.

Answer:
To create a numbered list, use the <ol> element and provide <li> elements for each list item.

Code Snippet:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Explanation:
In this code, the <ol> element creates a numbered list with three list items.

Reference: HTML Lists โ€“ w3schools


96. What is the purpose of the <abbr> element in HTML?

The <abbr> element represents an abbreviation or acronym.

Answer:
The <abbr> element is used to mark up abbreviations or acronyms, often with an associated full description.

Code Snippet:

<p>The <abbr title="Hypertext Markup Language">HTML</abbr> standard is widely used.</p>

Explanation:
In this code, the <abbr> element represents the abbreviation โ€œHTMLโ€ with its full description.

Reference: HTML <abbr> Element โ€“ MDN Web Docs


97. How can you create an unordered list in HTML?

Use the <ul> element to create an unordered list, and <li> elements for list items.

Answer:
To create an unordered list, use the <ul> element and provide <li> elements for each list item.

Code Snippet:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Explanation:
In this code, the <ul> element creates an unordered list with three list items.

Reference: HTML Lists โ€“ w3schools


98. What is the purpose of the <mark> element in HTML?

The <mark> element represents highlighted or marked text.

Answer:
The <mark> element is used to mark up text that is highlighted or marked, often with a yellow background color.

Code Snippet:

<p>Highlight <mark>this text</mark> for emphasis.</p>

Explanation:
In this code, the <mark> element highlights the text โ€œthis text.โ€

Reference: HTML <mark> Element โ€“ MDN Web Docs


99. How can you create a horizontal rule in HTML?

Use the <hr> element to create a horizontal rule.

Answer:
To create a horizontal rule, use the <hr> element. It creates a horizontal line to visually separate content.

Code Snippet:

<p>Content above</p>
<hr>
<p>Content below</p>

Explanation:
In this code, the <hr> element creates a horizontal rule between two paragraphs.

Reference: HTML <hr> Element โ€“ MDN Web Docs


100. What is the purpose of the <wbr> element in HTML?

The <wbr> element suggests an optional line break opportunity.

Answer:
The <wbr> element suggests a possible line break opportunity within a word, but only if necessary.

Code Snippet:

<p>Longword<wbr>withoptionalbreak</p>

Explanation:
In this code, the <wbr> element suggests a potential line break between โ€œLongwordโ€ and โ€œwithoptionalbreakโ€ if needed.

Reference: HTML <wbr> Element โ€“ MDN Web Docs