Top 30 HTML Questions and Answers PDF

In this post, I covered the Top 30 HTML Interview Questions and Answers. And these HTML Interview Questions are collected from multiple resources including web articles, youtube videos, interviews, and some posts that are available on different social media platforms.

🙋🏻‍♂️An important thing about this is that you can also Download the PDF of these questions with answers the link is given below this post. 👇🏻

1. Explain different versions of HTML?

HTML 1.0: It was the first version of HTML, which was released in 1993. It was the very basic feature of HTML and didn't include many of the features that we take for granted today, such as images, videos, and tables.

HTML 2.0: This version of HTML was released in 1995. In this version, some support was added for basic tables, text flow around images, and basic forms.

HTML 3.2: This was the third version of HTML which was released in January 1997. In this version, some features including style sheets, which allowed designers to control the layout and appearance of web pages are added. In this version frames and tables are introduced with more advanced features.

HTML 4.0: This version was released in 1997 and included many new features, such as support for scripting languages (such as JavaScript), multimedia support (such as audio and video), and improved forms.

HTML5: This is the current version of HTML and it was released in 2014. HTML5 includes many new features, such as support for semantic tags (such as <header>, <footer>, and <article>), multimedia, and improved forms. In this version APIs for web applications, such as geolocation, local storage, and drag-and-drop are added. HTML5 is designed to be more efficient and easier to use than previous versions of HTML.

2. What are the main elements of an HTML document?

Here are some of the basic elements of an HTML document:

(DOCTYPE): This element specifies the version of HTML. It helps the web browser to interpret the code correctly.

HTML tag: This is the main container for all the content on the web page. And it is also known as the root element.

Head tag: This element contains metadata for a web page, such as the 'title of the web page', links to 'stylesheets' and 'scripts', and some other important information that is not displayed on the web page.

Body tag: This element contains all the visible content of the web page, such as text, images, and other media.

Heading tags: These elements are used to create headings, subheadings, and minor headings on the web page.

Paragraph tag: As the name suggests this element is used to create a paragraph.

Anchor tag: This element is used to create hyperlinks to other web pages or to other parts of the same website.

Image tag: This element is used to insert images into the web page.

List tags: These elements are used to create unordered and ordered lists on the web page.

Div tag: This element is used to group other HTML elements together and apply styles or other attributes to them as a group.

3. Explain the purpose of <head> tag?

The main purpose of the <head> tag is to provide information about the web page to the web browser and other devices that might access the page, such as search engines, social media platforms, or screen readers for users with visual impairments.

The <head> element is a container for metadata (data about data) and it is placed between the <html> tag and the <body> tag.

4. What is the purpose of title tag in HTML?

The <title> tag in HTML is used to define the title of a webpage. The title must be text-only, and it is displayed in the browser's title bar or in the page's tab. This tag is required in HTML documents!

5. What is the use of the body tag in HTML?

The body tag in HTML is used to define the main content of a webpage. All the content which is visible on the browser screen on a webpage, such as headings, paragraphs, images, hyperlinks, tables, lists, etc is placed within the <body> tag.

6. What is tag in HTML?

HTML tags are like a keyword that defines how a web browser will format and display the content on the screen. HTML tags contain three main parts: first is an opening tag, content, and a closing tag. Some HTML tags are self-closing tags.

7. What is an attribute in an HTML document?

Attributes provide additional information about elements. Attributes are always specified in the start tag. Some examples of attributes are href, src, width, height, alt, style, etc.

8. Does all HTML tags have an end tag?

No, not all HTML tags have an end tag. Some HTML tags are self-closing tags and these are also known as an empty tags. These tags do not require a closing tag.

Some examples of self-closing or void HTML elements include:

<img>: It is used to insert images into an HTML document.

<input>: It is used to create form input fields.

<br>: It is used to insert line breaks into an HTML document.

<hr>: It is used to insert horizontal lines into an HTML document.

<!-- image Tag used to insert an Image -->
<img src="image.jpg" alt="myImage">

<!-- input Tag used to create a input field -->
<input type="text" name="text" id="text">

<!-- br tag used to insert line break -->
<br>

<!-- hr tag used to insert horizontal line -->
<hr>

9. Explain the difference between div and span tags.

The <div> tag is used to create division on the web page. And it is also used to group content into larger sections within an HTML document. <div> is a block-level element in HTML which means that it takes up the full width of its parent container and creates a new line after it.

The <span> tag is used to group inline-level elements within a block-level element. The <span> tag is used to apply the specific styles or formatting to a small piece of text within a larger block of text.

To learn more about div and span tags: Click Here

10. What is a hyperlink in HTML?

In HTML the <a> tag is used to define a hyperlink, which is used to link from one page to another. The most important attribute of <a> element is the href attribute, which is used to include the link's destination.

To learn more about hyperlinks in HTML: Click Here

11. How we can create a hyperlink in HTML?

You can create a hyperlink in HTML using the <a> tag. It is used to define a clickable link.

Creating hyperlinks in HTML:

<a href="www.geekshelp.com" target="_blank"> Visit Now </a>

12. What is formatting in HTML?

Formatting in HTML refers to the way that text and other elements are presented on a web page. HTML contains tags and attributes that are used to format and style text within an HTML document.

List of some Formatting Elements in HTML

<b>: It is used to bold the text.

<strong>: It works as bold but it gives more importance to the text.

<i>: It is used to italic the text.

<em>: It is used to make emphasized text.

<mark>: It is used to create a marked text.

<small>: It is used to create small text as compared to normal text.

<del>: It is used to create a text which is displayed like a deleted text.

<ins>: It is used to define the text as an inserted text.

<sub>: It is used to create a subscript text.

<sup>: It is used to create superscript text.

13. Explain the difference between an absolute URL and a relative URL.

An absolute URL is a complete address that includes the protocol (such as "http" or "https"), the domain name, and the path to the resource. An Absolute URL always starts with the protocol, followed by the domain name, and then the path to the resource.

Example of absolute URL:

https://www.example.com/images/picture.jpg

A relative URL specifies the location of a resource relative to the current web page or file. A Relative URL does not include the protocol or the domain name. The relative URL is useful, when you want to link to a resource on the same website or when you want to create links that can be easily moved to different locations in the same domain or website.

Example of relative URL:

./images/picture.jpg

14. How many types of headings are available in HTML?

In HTML there are basically six levels of headings, and these headings are created using <h1> to <h6> tags. Where <h1> is the largest level heading and <h6> is the smallest heading.

Example of six headings used in HTML:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

15. What are the entities in HTML?

In HTML, entities are used to display reserved characters. HTML entities start with (&) and end with a semicolon (;). Entities are special characters that have a special meaning and cannot be represented directly in the text in an HTML document.

16. What is a table in HTML?

In HTML, a table is a collection of rows and columns that is used to display information in a tabular format. HTML tables are created using the <table> tag, which defines the starting and end of the table. Within the <table> tag, we can create rows using the <tr> tag, and columns using the <td>.

Example of a simple table of contents:

<table>
    <tr>
      <td>  Name </td>
      <td>  Role </td>
    </tr>
    <tr>
      <td> Raju </td>
      <td> Frontend Developer </td>
    </tr>
</table>

17. Explain the purpose of the <th> tag in the HTML table.

The <th> tag in HTML is used to define header cells in a table. These are used to provide a label or heading for a column or row of data in the table. By default, the text in an <th> element is displayed in bold format and centered within the cell.

The <th> tag is similar to the <td> tag, which is used to define standard cells in an HTML table.

Example of using <th> in HTML table:

<table>
    <tr>
      <th>  Name </th>
      <th>  Role </th>
    </tr>
    <tr>
      <td> Raju </td>
      <td> Frontend Developer </td>
    </tr>
</table>

18. What is a form in HTML?

In HTML document the form is a collection of input tags. Forms are mainly used to take the data from the user to serve on the server. And HTML forms are created using the <form> tag.

Within the form tag, we can create input fields using various tags such as <input>, <textarea>, <select>, and more. Input fields allow users to enter information such as text, numbers, dates, and more.

Example of a simple HTML form with input and submit:

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="Submit">
</form>

To read more about Input Tags: Click Here

19. How we can create a submit button in HTML?

To create a submit button in HTML, we can use the <input> tag with the type="submit" attribute.

Example of how to create a simple HTML form with a submit button:

<form action="/getFormData" method="post">
    <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>
    <input type="submit" value="Submit">
</form>

20. Which tag is used to display the data in tabular form?

In HTML documents the <table> tag is used to display data in tabular form in HTML.

To learn more about tables in HTML: Click Here

21. What is the use of label in HTML?

In HTML the <label> tag is used to associate a label with an input element. This is helpful for accessibility purposes because it allows screen readers to identify the purpose of the input element for visually impaired users.

Example of how to use the <label> tag with an input element:

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

22. What is the use of a marquee tag in HTML?

The <marquee> tag in HTML is used to create scrolling text or images on a web page. We can also set the moving direction of content within <marquee> tag with the help of the direction attribute.

Example of how to use the <marquee> tag to create scrolling text:

<marquee behavior="scroll" direction="left">Welcome to Geeks Help!</marquee>

23. What is a button tag in HTML?

The <button> tag in HTML is used to create a clickable button on a web page. When the <button> tag is used to create buttons on a web page then the text or content within the tag is displayed as a button that can be clicked by the user.

Example of how to use the <button> tag to create a button:

<button type="button">Click me!</button>

24. What is the use of an image map in HTML?

An image map in HTML is a way to create clickable areas on an image. Using an image map we can link the different parts of the image with the different web pages or actions.

The <map> tag is used to create an image map, and the <area> within the <map> tag is used to define the clickable areas on the image.

Example of how to use an image map in HTML:

<img src="myImage.jpg" alt="user raju image" usemap="#image-map">
    <map name="image-map">
        <area shape="rect" coords="0,0,100,100" href="home.html">
        <area shape="circle" coords="150,150,50" href="about.html">
        <area shape="poly" coords="200,200,250,250,200,300" href="services.html">
    </map>

25. What is the use of <select> tag in HTML?

The <select> tag in HTML is used to create a drop-down list of options on a web page, where the user can select one or more options from the list according to their interest. The <select> tag is often used in conjunction with the <option> tag, which defines the individual options in the list.

Example of how to use the <select> tag to create a drop-down list:

<select name="codingSeries">
    <option value="html"> HTML Simplified Series </option>
    <option value="css"> CSS Master Series </option>
    <option value="javascript"> JavaScript Doctory Series </option>
</select>

26. What is the use of <option> tag in HTML?

The <option> tag in HTML is used in conjunction with the <select> tag to define the individual options in a drop-down list. It can also be used with the <datalist> tag to create a list of suggested options for an input field.

Example of how to use the <option> tag to define options in a drop-down list:

<select name="codingSeries">
    <option value="html"> HTML Simplified Series </option>
    <option value="css"> CSS Master Series </option>
    <option value="javascript"> JavaScript Doctory Series </option>
</select>

27. What is the use of <img> tag in HTML?

The <img> tag in HTML is used to insert an image into a web page. The <img> tag is a self-closing tag, which means that it does not require an end tag to close.

Example of how to use the <img> tag to insert an image into a web page:

<img src="geekhelp.jpg" alt="logo of Geeks Help">

28. What is the use of <textarea> tag in HTML?

The <textarea> in HTML is used to create an input field with multiple lines where users can enter text. It allows users to enter more than one line of text and supports line breaks and other formatting options.

Example of how to use the <textarea> tag:

<textarea rows="10" cols="50"> </textarea>

29. Explain the difference between <strong> tag and the <em> tag.

<strong> tag is also used to bold but it is used to give more importance to the text as compared to bold text.

Example of how to use <strong> tag:

<p> Hello thanks dear student to visit <strong> Geeks Help </strong></p>

<em> defines the emphasized text. The text within the <em> tag interacts like the <i> tag.

Example of how to use <em> tag:

<p> Hello thanks dear student to visit <em> Geeks Help </em></p>

30. What are the empty elements in HTML?

In HTML, an empty element is an element that does not have any content between its opening and closing tags, this type of element does not require a closing tag. Instead, these elements are written using a self-closing tag.

<br>: It is used to insert a line break in the text.

<hr>: It is used to insert a horizontal line to separate sections of a page.

<img>: It is used to insert an image into the web page.

<input>: It is used to create an input field for the user where the user can enter data.

<link>: It is used to define a link to an external resource, such as a stylesheet.

Example of how to use an empty element in HTML:

<img src="geekhelp.jpg" alt="logo of Geeks Help">