Top 20 HTML Interview Questions & Answers

HTML stands for Hyper Text Markup Language. It is a standard markup language for creating web pages. It describes the structure of a Web page. HTML is an integral part of website development.

In this article we will list down some important HTML interview questions for your frontend interview preparation.

1. What do you understand by HTML elements?

HTML elements are the building blocks of web pages. They are used to structure and format content on the web. An HTML element is typically composed of a start tag, content, and an end tag. Some elements, however, are self-closing and do not require an end tag.

Some of the examples are :

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

2. What does <!DOCTYPE HTML> do?

DOCTYPE stands for Defining Document Type and Validation Mode. It Specifies the HTML or XHTML version used in the document. Also Identifies parsing method and algorithm for the web browser, affecting consistency.

The <!DOCTYPE> declaration is placed at the very top of the HTML file, even before the <html> tag begins.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <------- Content ------->
  </body>
</html>

3. What are non-semantic elements?

Unlike semantic elements, non-semantic elements are those elements that don’t have any meaning and does not tell anything about the content they contain. Example of non-semantic elements are <div>, <span>

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

In HTML, the “id” attribute is used to uniquely identify a specific element on a page. On the other hand, the “class” attribute is utilized to categorize and apply styles or scripts to multiple elements.

<element id="idname">
<element class="classname">

5. What do you understand by inline and block elements?

Inline elements do not start on new line and only take as much width as necessary. These elements are small elements which can be nested inside block elements. Some examples of inline elements are <a>, <span>, <strong>, <em>, <br>, <input>

Block level elements start on a new line and take full width available. These elements can be used to contain inline elements. Some examples of block elements are <div>, <p>, <ul>, <li>, <h1> to <h6>

6. What is the difference between display:none and visibility:hidden?

Visibility:hidden hides the element but it still takes up space. Display:none hides the element and does not takes up space.

7. What is the HTML tag that is used to display the data in tabular form?

HTML Table tag is used to display the data in tabular form in rows and columns. We can use <tr> inside <table> to create rows and <td> to create cells inside rows.

<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>Danny</td>
    <td>34</td>
  </tr>
<table>

8. What are semantic HTML tags in HTML?

Semantic HTML tags provide both structure and meaning to web content. They allow crawlers, browsers, and even assistive technologies to understand content better and present it more effectively. This approach improves accessibility and search engine optimization, making pages easier to maintain and understand.

Some of the common semantic HTML tags includes :

<P> : A paragraph
<a> : for links
<img> : for images
<H1> to H6> : for headings
<li> : list items

9. What is the difference between localStorage and sessionStorage?

localStorage: localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. localStorage can only be accessed via JavaScript, and HTML5. However, the user has the ability to clear the browser data/cache to erase all localStorage data.

sessionStorage: stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.

10. What is the difference between the `<div>` and `<span>` tags?

<div> is a block level element used for grouping and structuring large content. <span> is an inline element used to wrap small pieces of content within its parent element.

11. What are data-attributes in HTML, and how are they used?

Data attributes in HTML5, often referred to as data-* attributes, help embed custom data within HTML elements. Eg.

<div id="user" data-name="John Doe" data-age="25"></div>

12. What is the purpose of the <template> tag in HTML?

The <template> tag is used to hold some content that is hidden from the user when page loads, it can be rendered later with JavaScript.

13. Explain the usage of ARIA attributes in HTML.

ARIA stands for Accessible Rich Internet Applications. It allows developers to add some attributes to HTML elements which can make web content accessible to disabled users. Commonly used examples include aria-describedby, aria-haspopup, aria-hidden, aria-label, and aria-labelledby.

14. What are HTML entities?

HTML entities are special codes used to display characters in HTML that would otherwise be interpreted as HTML code. They are used to represent characters that are reserved in HTML, like the less than (<) and greater than (>) symbols, or characters that are not easily typed on a standard keyboard.

Eg. less than < and greater than >, these will be displayed as < and > correspondingly.

15. What is the difference between defer and async attributes in script tags?

The async attribute is used to indicate to the browser that the script file can be executed asynchronously. The HTML parser does not need to pause at the point it reaches the script tag to fetch and execute, the execution can happen whenever the script becomes ready after being fetched in parallel with the document parsing.

The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.

16. How do you serve your page in multiple languages?

For serving content in multiple languages and optimizing accessibility, you can make use of the lang attribute on the <html> tag.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeyMaze</title>
  </head>
  <body>
    <!-- Page content here -->
  </body>
</html>

17. What is the purpose of the disabled attribute in an input field?

The disabled attribute in an input field is used to disable user interaction with the input element. When the “disabled” attribute is applied, the input field becomes non-editable, and users cannot modify or submit any data through that field.

To add the disabled attribute to an HTML element, you simply include disabled within the element’s tag.

<input type="text" disabled>

18. What is the purpose of the “nowrap” attribute in an HTML table?

The “nowrap” attribute in an HTML table is used to prevent text or content within table cells from wrapping to the next line. By applying the “nowrap” attribute to a <td> or <th> element, the text within that cell will remain on a single line, even if it exceeds the width of the cell.

19. What is Character Encoding?

Character encoding is a method of converting bytes into characters. To validate or display an HTML document properly, a program must choose a proper character encoding. This is specified in the tag:

<meta charset="utf-8"/>

UTF-8: A Unicode Translation Format that comes in 8-bit units that is, it comes in bytes.

20. What is CORS?

Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. CORS gives web servers cross-domain access controls, which enable secure cross-domain data transfers.