HTML Interview Questions
1. What is HTML?
HTML is a markup language used for creating web pages. It stands for Hyper Text Markup Language.
2. What are tags in HTML?
HTML tags are used to define and structure the content of a web page. They provide meaning and formatting to the text or elements within the tags. Tags have opening and closing parts.
3. What is the purpose of the <head> tag in HTML?
The purpose of the head tag is to discribe the identity of webpage.
4. How do you create a heading using HTML?
Headings in HTML can be created using heading tags. There are six levels of headings: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. The <h1> tag represents the highest level of heading, while <h6> represents the lowest level of heading.
5. What is the difference between empty tag and container tag?
An empty tag, also known as a self-closing tag, does not have any content between its opening and closing parts. Examples of empty tags include <br> for line breaks or <img> for images. They do not require a closing tag.
On the other hand, a container tag, also known as a paired tag, consists of both an opening tag and a closing tag. The opening tag defines the start of a block of content, and the closing tag defines the end of that block. Examples of container tags include <b> and <br> for bold text or <body> and git for the entire body content of a web page.
6. How to add manually space in HTML?
If you want to add manually space in your HTML code then you can use   means non-breaking space. Here example of how to add space between two words:
<p>Hello world!</p>
In the above example, the
is used to add space between the words "Hello" and "world". When the HTML is rendered in a web browser, the two words will appear next to each other with a space between them.
7. What is the use of <p> tag in HTML?
The paragraph tag is used to define a block of text. The paragraph tag start from new line. It provide margin and line spacing.
The example of <p> tag is
<p>
This is a paragraph of text. It contains several sentences that are related to
each other and form a single unit of thought.
</p>
In the above example, the text "This is a paragraph of text. It contains several sentences that are related to each other and form a single unit of thought." it is enclosed between the opening <p>
tag and the closing </p>
tag. This tells the web browser that this is a paragraph of text, and it should be formatted.
8. What is an div tag in HTML?
The <div> tag in HTML is a container that helps to create a division, separate block, or section. It doesn't have a specific meaning but it is used for structuring and styling purposes. The example of div tag is
<div>
<h1>Welcome to Rode to code.</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
In the above example, the <div>
tag is used to group together a heading (<h1>
), paragraph (<p>
), and an unordered list (<ul>
) into a container. This can be useful for applying styles to multiple elements at once, or for structuring the content of a web page in a logical way.
9. How can you create a break line in HTML?
To create a line break in HTML you can use the <br> tag. The <br> is a self-closing tag, it means does not have a closing tag. The example of the <br> tag is:
<p>This is the first line.<br />This is the second line.</p>
In the above example, the <br>
tag is used to create a line break between the first and second lines of text. When the web page is displayed in a browser, there will be a line break between the two lines of text.
10. How can you add comments in HTML code?
To add comments in HTML you can use <!-- --> syntax. That allows you to add comments in HTML code. That are ignored by the browser and not displayed on the webpage. Here the example of how you can add a comment to your HTML code:
<!-- This is a comment. It will not be displayed in the browser. -->
In this example, the text "This is a comment. It will not be displayed in the browser." is a comment, and will not be displayed in the browser when the web page is viewed.
11. What is an attributes?
Attributes are used to describe tags. That provides more information about tags. Attributes help to define the characteristics and functionality of HTML tags. Attributes provide additional information about HTML elements.
For example, let's consider the <img> tag, which is used to display images. It has attributes such as src, alt, and width. The src attribute specifies the URL or file path of the image, the alt attribute provides alternative text for the image (useful for screen readers or when the image cannot be displayed), and the width attribute sets the width of the image.
<img src="tiger.jpg" alt="Image" width="300" />
In the above example, the src attribute points to the image file "tiger.jpg", the alt attribute contains the alternative text "Image," and the width attribute sets the width of the image to 300 pixels.
12. What is the purpose of the <img> tag in HTML, and how can you add image in HTML?
The purpose of the <img> tag in HTML is used to display images on a webpage. It is a self-closing tag means it does not need to closing tag. To add an image in HTML, you need to provide the src attribute in the <img> tag. The example of img tag is:
<img src="image.jpg" alt="A beautiful sunset" />
In the above example, the <img> tag specifies the source file of the image using the src
attribute. The alt
attribute is used to provide a text description of the image for users who cannot see the image.
13. How can you embed an image in an HTML document?
To embed an image in an HTML document you can use the <img> tag. It requires the src attribute that specify the image file's path. You can add additional attributes like alt for alternative text and width and height for image dimensions. The example to img tag is:
<img src="image.jpg" alt="A beautiful sunset" />
In this example, the <img> tag specifies the source file (URL) of the image using the src attribute. The alt attribute is used to provide a text description of the image for users who cannot see the image.
14. what is the use of a <span> tag?
The <span> tag helps you to style or manipulate specific parts of your text. It does not have any special meaning on its own. You can use the <span> tag to apply styles, such as font size, color, or background color, to a specific section of text within a larger block of text.
15. How can you create a hyperlink that opens in a new tab or window?
To create a link that opens in a new tab or window in HTML you can use target_blank attribute. The example of how to create a hyperlink that opens in a new tab:
<a href="https://www.roadtocode.org/" target="_blank">text</a>
In the above example, the href attribute is specifies the URL of the linked document and the target attribute is set to -blank. That tells the browser to open the linked document in a new tab.
16. what are the types of list in HTML?
There are two types of lists in HTML.
- Ordered list: Ordered list represent the numbered list. These lists are numbered. They are created using the <ol> tag.
For example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
- Unordered list: Unordered list represents bullet points. These lists have bullet points. They are created using the <ul> tag.
For example:
<dl>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</dl>
17. What is anchor tag in HTML?
The anchor tag in HTML is used to create clickable links that redirect one webpage to other web pages. The href attribute to specify the destination URL or target location. The text or content placed between the opening and closing.
For example:
<a href="https:www.google.com/"></a>
In the above example the anchor tag is used to create hyperlink to the google website. When user clicks on the link they will be taken to the google website. The href attribute specifies URL of website you want to link to.
18. What is a subscript tag?
The <sub> tag is used in HTML to create subscript text, which is text that is smaller and lower than the surrounding text.
For example:
H<sub>2</sub>O
In the above example, the number "2" will displayed as subscript text.
You can also use CSS to style the subscript text, such as changing the font size or color.
For example:
sub {
font-size: 10px;
color: blue;
}
This CSS code will make all subscript text on the page appear smaller and blue.
19. How can you create a table in HTML?
To create a table in HTML, you can use the <table> tag in HTML along with other tags such as <tr> , <th> , and <td>.
20. Which attributes are used for creating the table in HTML?
The attribute are used for creating table in HTML is
- <table> tag: The <table> tag is used to create the table.
- <tr> tag: The <tr> tag is used to create each row in the table.
- <td> tag: The <td> tag is used to create each cell in the table.
- <th> tag: The <th> tag is used to create table headers.
- colspan: The colspan attribute is used to merge multiple cells horizontally.
- rowspan: The rowspan attribute is used to merge multiple cells vertically.
For example:
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Product 1</td>
<td>$10</td>
</tr>
<tr>
<td>Product 2</td>
<td>$15</td>
</tr>
</table>
In the above example, the <table>
tag is used to create a table. The <tr>
tag is used to create a table row, and the <th>
tag is used to create a table header. The <td>
tag is used to create table data.
21. What is the purpose of the <ul> and <ol> tags in HTML?
The purpose of the <ul> is used to create an unordered list. The items in the unordered list are displayed with bullet points.
Syntax
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
For example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1>Syllabus of RTC</h1>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>Git & Github</li>
<li>JavaScript</li>
</ul>
</body>
</html>
In this example, we created an unordered list containing four items "HTML5", "CSS", "Git &Github" and "JavaScript". When you open this HTML file in a web browser it will display the list.
- The purpose of the <ol> is used to create an ordered list. The items in the ordered list are displayed with numbers or letters.
Syntax
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
For example:
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1>Features of RTC</h1>
<ol>
<li>Live + Recorded Classes</li>
<li>Teaching Assistance for Doubt Solving</li>
<li>Notes for Quick Revision</li>
<li>Low Fees</li>
</ol>
</body>
</html>
In the above example, we created an ordered list. This list contains features of RTC such as "Live+ Recorded Classes", "Teaching Assistance for Dout Solving", "Low Fees" and "Notes for Quick Revision".
22. What is the purpose of the <form> tag in HTML?
The purpose of the <form> tag in HTML is used to create a container for the user input. The <form> tag is used to send data from the user's browser to the server.
<form action="">
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br />
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br />
<input type="submit" value="Submit" />
</form>
In this example, the action
attribute is set to "submit-form.php", which is the URL of the script that will handle the form data when the user submits the form. The method
attribute is set, which means that the form data will be sent in the request body instead of in the URL.
23. How can you create a text input field in HTML?
To create a text input field in HTML, you can use the <input> tag with type attribute is set text.
<input type="text" name="myText" />
This will create a text input field with the name "myText". When the user types something into the field and submits the form, the value of the field will be sent to the server along with the name "myText".
24. How can you create an ordered list with Roman numerals (I, II, III) in HTML?
To create an ordered list with Roman numerals (I, II, III) in HTML, you can use the <ol> tag with type attribute is set I.
25. what is the use of video tag in HTML?
The <video> tag in HTML is used to display videos on a web page. It allows you to play videos directly in the browser without the need for separate video player.
For example:
<video src="myvideo.mp4" controls>
Your browser does not support the video tag.
</video>
In this example, the src
attribute specifies the URL of the video file to be played back. The controls
attribute adds a set of playback controls to the video player, including play/pause, volume, and fullscreen.
26. How can you add a background image to an HTML element?
To add a background image to an HTML element, you can use the `background-image` property in CSS.
For example:
<style>
.my-element {
background-image: url("my-image.jpg");
background-size: cover;
background-position: center;
}
</style>
<div class="my-element">
<!-- Content goes here -->
</div>
In this example, we use the .my-element
class to target a <div>
element and set its background image to my-image.jpg
. We also set the background-size
property to cover
to make the image cover the entire element, and the background-position
property to center
to center the image within the element.
27. What is the purpose of the <iframe> tag in HTML?
The purpose of the <iframe> tag is used to embed another HTML document into the current document. It allows us to display the content of another website on our own webpage.
For example:
<iframe src="https://www.google.com"></iframe>
In the above example, the src attribute specifies the URL of the web page to be embedded. When the document is loaded in web browser the web page specified by the src attribute will be displayed within the <iframe> element.
28. How can you create a dropdown menu in HTML?
To create a dropdown menu in HTML, you can use the <select> and <option> elements. The drop-down menu is a user interface control that allows users to choose one value from multiple options. The <select> element creates the dropdown menu. And the <option> element creates the individual options in the menu.
For example:
<select id="my-dropdown" name="my-dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
In the above example, we use the <select>
tag to create the dropdown menu, and the <option>
tags to specify the options that will be displayed in the menu. The value
attribute of each <option>
tag specifies the value that will be submitted to the server when the form is submitted.
29. What is the purpose of the <label> tag in HTML forms?
The purpose of the <label> tag is to specify a label for <input> tag. The label is a normal text, its shows information about your input element.
For example:
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
In the above example, the <label>
element is associated with the <input>
element using the for
attribute. The value of the for
attribute should match the id
attribute of the input element. This tells the browser that the label is associated with the input element, and clicking on the label will automatically focus the input element.
30. What is checkbox in HTML and how to create it?
Checkbox in HTML is a user interface element that allows users to select one or more options from multiple options. To create a checkbox in HTML, you can use the <input> tag with the type attribute set to checkbox.
For example:
<input type="checkbox" id="fruit1" name="fruit" value="apple" />
<label for="fruit1">Apple</label>
<input type="checkbox" id="fruit2" name="fruit" value="banana" />
<label for="fruit2">Banana</label>
<input type="checkbox" id="fruit3" name="fruit" value="orange" />
<label for="fruit3">Orange</label>
In this example, we have three checkboxes, each with a unique id
, name
, and value
. The id
attribute is used to associate the <label>
element with the corresponding <input>
element, while the name
attribute is used to group the checkboxes together. The value
attribute specifies the value that will be submitted to the server if the checkbox is selected.
31. What is the purpose of the <audio> tag?
The purpose of the <audio> tag is used to embed audio content, such as music or sound files, directly into a web page.
For example:
<audio controls>
<source src="music.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
In this example, the <audio>
element includes a <source>
element that specifies the URL of the audio file (music.mp3
) and the MIME type of the file (audio/mpeg
). The controls
attribute adds basic audio controls to the player.
32. What are the attributes of vedio tag?
The attribute of the vedio tag is 1. Controls : Adds vedio controls such as play, pause, volume and fullscreen toggle.
2. Height and width : You can set height and width of the vedio element.
3. Autoplay : Automatically starts playing the video when the web page is loaded.
4. Muted : Mute the audio of the vedio.
5. Poster : Displays an images as a placeholder before the vedio is loaded.
For example:
<video
src="video.mp4"
controls
width="640"
height="360"
poster="poster.jpg"
preload="metadata"
>
Your browser does not support the video tag.
</video>
In the example, the <video>
element includes a src
attribute that specifies the URL of the video file (video.mp4
), controls
attribute that adds basic video controls to the player, width
and height
attributes that specify the dimensions of the player, poster
attribute that specifies an image to be displayed while the video is loading and preload
attribute that specifies that only the metadata of the video should be preloaded. If the user's browser does not support the <video>
tag, the text "Your browser does not support the video tag." will be displayed instead.
33. Explain the target attribute in HTML?
The target attribute in HTML is used to specify where to open the linked document or resource when a user clicks on a link. It determines the browser window or tab in which the linked content will be displayed.
34. What is the value attribute in form Tag?
The value attribute are used to specifies the value of an input element. The value attribute represent the default value for the input element. For example:
<label for="name">Enter Your Name</label>
<input type="text" id="name" name="name" value="Harshda" />
In this example, the value
attribute is set to "Harshda", so the text input field will be pre-filled with this value when the page loads.
35. What is the difference between <div> and <span> tag?
<div> tag is used for create division, seperate block or a section in an HTML document. The div tag is a block element means it occupies full space. Div tag starts on a new line.
For Example:
<div class="header">
<h1>Welcome to my website!</h1>
</div>
In this example, the <div>
tag is used to group the <h1>
tag together with some CSS styles.
<span>
tag is an inline element means it occupies only the necessary space to contain its content and Span tag does not create line breaks.
For Example:
<p>This is a <span class="highlight">highlighted</span> sentence.</p>
The <span>
tag is used to highlight a single word within a sentence.
36. what is button tag?
The button tag in HTML is used to create a clickable button on webpage. It represents a user interface element that interact with the user to perform actions. For example:
<button type="submit" class="btn">Submit</button>
In the above example, the <button>
tag is used to create a clickable button that submits a form. The type
attribute is set to "submit" to trigger the form submission, and the class
attribute is set to "btn" to apply some CSS styles.
37. What is the purpose of DOCTYPE in HTML?
The purpose of the DOCTYPE declaration in HTML is to specify the version of HTML being used in the document. It is placed at the very beginning of an HTML document before the <html> tag.
38. What is datalist tag?
Datalist is a searchable list option. It can help the user, the user does not need to type the whole text data list have predefined suggestions so it can suggest to the user. The example of datalist is:
<label for="course">Choose a courses</label>
<input list="course-list" id="course" name="course" />
<datalist id="course-list">
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
<option value="React"></option>
<option value="Bootstrap"></option>
</datalist>
In the above example, the <datalist>
tag is used to create a list of course options that can be selected from when entering data into the "course" input field. The list
attribute on the input field is set to "course-list" to link it to the <datalist>
element.
39. What is the purpose of the <meta> tag in HTML?
The purpose of the meta tag is to provide additional information and metadata about the HTML document, such as character encoding, viewport settings, description, keywords.
40. How can you add buttons in HTML?
To add buttons in HTML, you can use the <button> tag. Here the example to create simple button:
<button>Click me!</button>
In the above example,the <button> tag create a button that displays the text "Click me!" on the webpage. When the button is clicked, it will not perform any action by default.
41. What is the alt attribute in HTML?
The alt attribute is used to provide the alternative text of the image if the image is not displayed for some reason. The alt attribute is used with <img> tag.
For example:
<img src="tiger.jpg" alt="image not shown" />
In the above example, the alt
attribute provides a description of the image which is a image
. If the image cannot be displayed for any reason the text "image not shown" will be displayed.
42. Can HTML Tags and elements are same?
No, HTML tags and elements are not same. HTML tags are enclosed in angle brackets < and >. They are used to define elements, attributes, and another content. Elements can have opening tag, closing tag and the content that is contained between them.
For example:
<p>This is a paragraph element.</p>
In the above example, the <p>
tag is the opening tag, the </p>
tag is the closing tag, and the text "This is a paragraph element." is the content of the element.
43. What is an input tag?
The input tag in HTML is used to create an interactive form element and to take input from the user, you can place the input tag within a form tag.
For example:
<input type="text" id="name" name="name" />
In the above example, the <input>
tag creates a text field that allows users to enter their name. The type
attribute is set to "text" to create a text field, and the id
and name
attributes are used to identify the field in the HTML code and to send the data to the server when the form is submitted.
44. How can you embed video in HTML?
To embed audio and video content in HTML, you can use the audio and video tag. That specify the source file using the "src" attribute within the tag. Both of these tags allow to include audio and video content in your web page.
For example:
<video controls>
<source src="video.mp4" type="video/mp4" />
video tag.
</video>
In the above example, the <video>
tag creates a video player that allows users to play video "video.mp4". The controls
attribute adds playback controls to the player and the <source>
tag specifies the location of the video file and the type of video file.
45. what is the use of br tag?
The <br> tag in HTML is a line break tag. It is a self-closing tag, which means it does not have a closing tag.
For example:
<p>Hello Students.<br />Good Evening.</p>
In the above example, the <br>
tag is used to create a line break between the first and second lines of text. When the web page is rendered the text "Hello Students." will be displayed on the first line, and the text "Good Evening." will be displayed on the second line.
46. Do all HTML tag have an end tag?
No, not all HTML tags have end tag. There are some tags that doesn't need to close the tag like <image> , <input> tag.
For example:
<img src="image.jpg" alt="img not display">
In this example, the <img>
tag is used to display an image on the web page. The src
attribute specifies the location of the image file, and the alt
attribute provides alternative text that is displayed if the image cannot be loaded. Because the <img>
tag doesn't have any content, it doesn't require an end tag.
47. What is empty tag?
The HTML tag which does not have content called as empty tag. Empty tags are self-closing tags that don't require a separate closing tag. Examples of empty tags are the <input>, <img> and <br> tags.
48. What are the attributes of audio tag?
There are various attributes of the audio tag is:
Controls: Adds audio controls like play, pause, and volume.
Muted: Mutes the audio playback by default.
Autoplay: Automatically starts playing the audio when the web page is loaded.
For example:
<audio controls>
<source src="music.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
In this example, the <audio>
element includes a <source>
element that specifies the URL of the audio file (music.mp3
) and the MIME type of the file (audio/mpeg
). The controls
attribute adds basic audio controls to the player.
49. What is placeholder in form HTML?
Placeholder is a attribute which is used to set a short hint that describes the value of an input field. For example, form that asks for the user's email address that have a placeholder that says "Enter your email address here". This gives the user a clear indication of what type of information is expected and can help to reduce errors and confusion.
<input type="text" name="email" placeholder="Enter your email address here" />
In the above example, the placeholder
attribute is set to "Enter your email address here". When the user clicks on the input field, this text will displayed as a hint inside the field. When the user starts typing the text will disappear and be replaced by the user's input.
50. What is radio button?
A radio button in HTML is form element that allows users to select a single option from multiple choice. It is represented by an <input> element with the type attribute is to set radio.
For example:
<form>
<input type="radio" name="gender" id="male" />
<label for="male">Male</label><br />
<input type="radio" name="gender" id="female" />
<label for="female">Female</label>
</form>
In the above example, the name
attribute is set to "gender" for each radio button which makes them part of the same group. The value
attribute is set to "male", "female" for the two options. When the user selects one of the radio buttons, the value
of the selected button is submitted with the form data. Only one radio button in a group can be selected at a time