30 Basic HTML Interview Questions and Answers
1. What is HTML?
HTML stands for Hypertext Markup Language. It is the standard markup language used for creating web pages and applications on the internet. HTML uses various tags to structure the content and define the elements within a web page
2. What are the basic tags in HTML?
Some of the basic tags in HTML include:
<html>: Defines the root element of an HTML page.<head>: Contains meta-information about the HTML document.<title>: Sets the title of the HTML document.<body>: Defines the main content of the HTML document.<h1>,<h2>,<h3>, etc.: Heading tags used to define different levels of headings.<p>: Defines a paragraph.<a>: Creates a hyperlink.<img>: Inserts an image.<div>: Defines a division or a container for other HTML elements.
3. What is the difference between HTML and CSS?
HTML (Hypertext Markup Language) is used for structuring the content of a web page, while CSS (Cascading Style Sheets) is used for styling the HTML elements. HTML defines the elements and their semantic meaning, whereas CSS determines how those elements should be visually presented on the page.
4. What is the purpose of the alt attribute in the img tag?
The alt attribute in the <img> tag is used to provide alternative text for an image. It is displayed if the image cannot be loaded or if the user is accessing the page with screen readers for accessibility purposes. The alt text should describe the content or purpose of the image.
5.What are the new features in HTML5?
HTML5 introduced several new features, including:
- Semantic elements like
<header>,<footer>,<nav>,<section>, etc. - Video and audio elements
<video>and<audio>for embedding multimedia content. <canvas>for drawing graphics and animations.- Local storage and session storage to store data on the client-side.
- New form input types like
<email>,<url>,<date>,<range>, etc. - Geolocation API for obtaining the user’s location.
- Web workers for running scripts in the background to improve performance.
6. What is the purpose of the doctype declaration in HTML?
The doctype declaration (<!DOCTYPE>) specifies the version of HTML being used in the document. It helps the web browser understand and render the page correctly by switching to the appropriate rendering mode. It is typically placed at the beginning of an HTML document.
7. What is the difference between inline and block elements in HTML?
Inline elements are displayed within a line of text and do not start on a new line. Examples of inline elements include <span>, <a>, <strong>, etc. Block elements, on the other hand, start on a new line and occupy the full width available. Examples of block elements include <div>, <p>, <h1> to <h6>, etc.
8. How can you embed a video in HTML?
You can embed a video in HTML using the <video> element. Here’s an example:
1 2 3 4 | <video src="video.mp4" controls> Your browser does not support the video tag. </video> |
In this example, the src attribute specifies the video file URL, and the controls attribute enables the default video controls like play, pause, and volume.
9. What is the purpose of the <script> tag in HTML?
The <script> tag is used to include or reference JavaScript code in HTML, allowing developers to add interactivity and dynamic functionality to web pages. It can be used for inline scripting, external script files, or event handlers.
10. How do you create a hyperlink in HTML?
You can create a hyperlink using the <a> (anchor) tag. For example: <a href="https://www.example.com">Link</a>.
11. How do you create a table in HTML?
You can create a table using the <table> tag along with related tags like <tr> (table row), <th> (table header), and <td> (table data).
12. What is the purpose of the rowspan and colspan attributes in a table?
The rowspan attribute specifies the number of rows a table cell should span, while the colspan attribute specifies the number of columns.
13. How do you create a form in HTML?
You can create a form using the <form> tag. It can include various form elements such as input fields, checkboxes, radio buttons, and submit buttons.
14. How do you validate a form in HTML?
HTML provides basic form validation using attributes like required, minlength, maxlength, and pattern. However, client-side or server-side scripting is often used for more complex validation.
15. What is the purpose of the <label> tag in HTML forms?
The <label> tag defines a label for an input element. It helps improve accessibility and usability by associating a text label with its corresponding form field.
16. What is the difference between the <head> and <body> sections of an HTML document?
The <head> section contains meta-information about the HTML document, such as the title, links to stylesheets, and scripts. The <body> section contains the visible content of the web page.
17. How do you embed audio in HTML?
You can embed audio in HTML using the <audio> tag. Here’s an example:
1 2 3 4 | <audio src="audio.mp3" controls> Your browser does not support the audio element. </audio> |
In this example, the src attribute specifies the audio file URL, and the controls attribute enables the default audio controls like play, pause, and volume.
18. How do you create a dropdown/select menu in HTML?
You can create a dropdown/select menu using the <select> tag along with the <option> tags for each selectable item. For example:
1 2 3 4 5 6 | <select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> |
19. How do you add a background image to an HTML element?
You can add a background image to an HTML element using CSS. For example:
1 2 3 4 5 6 7 8 9 10 11 12 | <style> .container { background-image: url("image.jpg"); background-size: cover; /* Additional background properties */ } </style> <div class="container"> <!-- Content goes here --> </div> |
20. What is the purpose of the <iframe> tag in HTML?
The <iframe> tag is used to embed another HTML document or web page within the current document. It is commonly used to embed videos, maps, or external content.
21. How do you create a hyperlink without an underline?
You can remove the underline from a hyperlink using CSS. For example:
1 2 3 4 5 6 7 8 9 | <style> a { text-decoration: none; } </style> <a href="https://www.example.com">Link</a> |
22. How do you make a website responsive?
To make a website responsive, you can use CSS media queries to apply different styles based on the screen size. You can also use responsive frameworks like Bootstrap or Flexbox to build responsive layouts.
23. What is the purpose of the target="_blank" attribute in a hyperlink?
The target="_blank" attribute opens the linked page or document in a new browser tab or window when the user clicks on the hyperlink.
24. How do you create a numbered list in HTML?
You can create a numbered list using the <ol> (ordered list) tag along with the <li> (list item) tags for each list item.
25. How do you add a video from YouTube to an HTML page?
You can embed a YouTube video in an HTML page using the <iframe> tag with the YouTube video URL as the source. For example
1 2 | <iframe width="560" height="315" src="https://www.youtube.com/embed/video_id" frameborder="0" allowfullscreen></iframe> |
Replace “video_id” with the actual ID of the YouTube video you want to embed.
26. What is the purpose of the readonly attribute in an input field?
The readonly attribute makes an input field read-only, preventing the user from modifying its value. The value can still be submitted with a form.
27. How do you create a tooltip in HTML?
You can create a tooltip using CSS and the title attribute. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <style> .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> <div class="tooltip"> Hover over me <span class="tooltiptext">This is a tooltip</span> </div> ``` In this example, the `.tooltip` class sets the container element, and the `.tooltiptext` class defines the appearance and positioning of the tooltip. |
28. What is the purpose of the required attribute in an input field?
The required attribute is used to specify that an input field must be filled out before submitting a form. It helps enforce form validation.
29. How do you add a favicon to a website?
To add a favicon to a website, place a small icon file (typically named “favicon.ico”) in the root directory of the website. The browser will automatically detect and display the favicon.
30. How do you create a hyperlink that sends an email?
You can create a hyperlink that sends an email using the mailto: protocol. For example:
1 2 | <a href="mailto:info@example.com">Send Email</a> |
When the user clicks on this link, it will open the default email client with the recipient address pre-filled.
These are additional HTML questions and answers to expand your knowledge. Remember to practice and experiment with HTML to solidify your understanding.
Comments
Post a Comment