Top 15 HTML Interview Questions | Web Development Institute in Delhi

/ Web development course / By

HTML stands for hypertext markup language is a very fundamental topic of web development and also in technical interviews. If you want to excel in front-end development or MERN-stack development course, you should cover the frequently asked in key concepts in various interviews. Here, in this blog post we will help every candidate one more step closer to your web development job.

1. What is the purpose of <Doctype> in HTML.

This is a very simple HTML 5 code.

<!DOCTYPE html> 
<html> 
<head> 
<title>Doctype</title> 
</head> 
<body> 
<h1>Doctype</h1> 
</body> 
</html>

<!DOCTYPE html> statement stands for document type. This declaration specifies the version of HTML. For example: This <!DOCTYPE html> means that the version is HTML 5. We need not to write five here explicitly.

Why do we need it?

Doctype tells the browsers which version of HTML it is and how to interpret the code. If browser know the version of HTML, then it will behave as per the rules of current version only.

We also have some other document types:

  1. <!DOCTYPE HTML PUBLIC> is used for 4.01 version.
  2. <!DOCTYPE html PUBLIC> is used for XSML 1.0.

2. What are Meta Tags? Name five types of Meta Tags?

Meta tags in HTML are elements used to provide data about data or additional information about a web page.

Here are listed five types of Meta Tags:

  1. Charset
  2. Viewport
  3. Description
  4. Keywords
  5. Author
<meta charset="UTF-8" /> // This Helps browsers to interpret the different characters in the document. This attribute ensures that the characters from the different languages will be displayed in correct manner in the browser. 

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> // This is responsible for responsive/Scalable web designs.    

<title>Interview Questions</title> 

<meta name="description" content="Interview preparation" /> // This tag provides us the description of the content of the page. 

<meta name="keywords" content="Angular, React, JS, HTML" /> // It plays important role in search engine optimization. 

<meta name="author" content="Questions" /> // This specifies the author of the document. 

</head>

3. What is the difference between <div> and <span> element?

These are two very similar elements in HTML. But there is very considerable difference between these.

i) <div> element in HTML is used as the container or to group related elements together to provide them a better structure.
ii) The <span> element is an inline container which is used to apply Styles or scripting to a specific portion of text.

In concise manner, we will say that <div> is a block level element and on the other hand <span> is an inline element.

<body> 
<div> 
<h1>Main Heading</h1> 
<p>Important Questions <span style="color: red">Interview</span></p> 
</div> 
</body>

4. What are semantic elements. Is <div> a semantic element?

Semantic elements provide meaning to all the data or content they contain.

Here are the top 10 semantic elements:

i)	<header> 
ii)	<main> 
iii)	<section> 
iv)	<footer> 
v)	<address>

But, <div> element doesn’t provide any meaning to the content rather it is a general-purpose structural element.

5. What are the three differences between Block Level and inline and elements?

  1. Block Level elements create block of content.
  2. Example: <div>, <p>,  <h>,  <ul>, <li>, <table>, <form> are all Block Level elements.
  3. By default, these elements start from a new line and takes the full width available.
  4. You can also set width and height for these elements. 
<div>block-level element</div> 
<p>block-level element</p>

Inline elements:

  1. These elements do not start on the new line and takes the width as much as text requires.
  2. Example: <span>, <a>, <strong>, <em>, <img> etc.
  3. You cannot set height and width for inline elements.
<p>My name is<strong> Happy</strong></p> 
<p>Click <a href="https://abc.com">here</a></p>

6. Provide some important differences between absolute and relative URLs.

  1. Absolute URLs provides the complete web address of any resource or website.
  2. These are used to link resources on different websites i.e. external resources. If link will be clicked,  then it will take you outside the current website.
  3. Example:
<li><a href="http://www.abc.com">HTTP URL</a></li> 
<li><a href="ftp://ftp.abc.com/doc.pdf">FTP URL</a></li>

Relative URLs

  1. Relative URLs specify the location of a resource relative to the current document without any need of Complete URL.
  2. They are mostly used while linking resources within the same website.
  3. Example:
<li><a href="page.html">Same Directory</a></li> 
<li><a href="sub/page.html">Subdirectory</a></li>

7. What are HTML forms elements and its main Attributes?

<form action="/submit" method="post"> 
<label for="username">Username: </label> 
<input type="text" id="username" name="username" 
<br />
<label for="password">Password: </label> 
<input type="password" id="pwd" name="password" /> 
<br /> 
<input type="submit" value="Submit" 
</form>
  1. form element: It is like the container for all the elements inside it.
  2. action attribute: It specifies the URL where the form data will be sent when it is submitted.
  3. method attribute: It defines the HTTP method to be used like when sending the from data.
  4. label element: It is used to provide a label or description for an input field. This attribute is used to associate this label with the specific input.
  5. Input: Input element is used to create input controls.
  6. type attribute: It specifies the type of the input field. For example: If the input type is password, then you cannot see the text of password. It will be in dot format.
  7. name attribute: It is used to define a name for the input field.

8. What is SEO? What are the five best HTML practices for SEO?

SEO plays a critical role while working with websites. SEO is a practice of optimizing websites and is used to improve the ranking and visibility in search engine results.

Using the below five practices, we can make our HTML code more SEO friendly.

  1. Use of Semantic HTML tags
  2. Optimized page titles
  3. Use meta description tags
  4. Use of proper heading tags
  5. Optimized image alt attributes

9. Write a HTML snippet to shows an image with additional text and try to link it with another webpage when clicked.

<a href="https://www.questions.com">
<img src="image.jpg" alt="Important image" width="200">
</a>

10. What is responsive design?

The responsive design or responsiveness is a method of creating website which are good to go for various screen sizes and devices. If the same website with the same HTML and CSS code will then be opened on a different device and works same, means your website has a responsive design.

11. What is the purpose of <base> element in Html?

The <base> element in HTML is used to specify a base URL for relative URLs within a document. The <base> element is placed in the <head> section generally.

Code:

<body> 
<a href="page1.html">Link to Page 1</a> 
<a href="page2.html">Link to Page 2</a> 
</body>

12. Can HTML tags be written in uppercase?

As, HTML tags are not case-sensitive therefore can also written in uppercase but it is not considered as a good practice as per standards.

13. What are <empty> elements?

An empty element in HTML is an element that do not need any content to be written between opening and closing tags. Empty elements are also called as void elements and self-closing tags.

For example: <img>, <input>, <br>, <hr>,<link>,<area>, <base>, <col>, <embed> etc.

14. What will happen if two elements have same Id in html?

Maybe in the browser, there is not direct impact but it will be considered as invalid HTML. It can lead to unexpected behaviour on the web page.

For example: Problem can occur in the CSS styling and when you are interacting with the IDs of the elements in the JavaScript. If you are targeting to apply some changes on one element and because of same IDs, multiple elements style will be changed.

This is not what you expected while write HTML code.

For Example:

<body> 
<div id="uniqueId1">First Element</div> 
<p id="uniqueId1">Second Element</p> 
</body>

15. What is a nested list in HTML?

    A nested list in html is a type of list where a list is placed within another list item.

    For example:

    <h1>Technologies</h1> 
<ul> 
<li>

    Backend

    <ul> 
P<li>Java</li> 
<li>.NET</li> 
<li>Node</li> 
</ul> 
</li> 
<li>

    Frontend

    <ul> 
<li>HTML</li> 
<li>JS</li> 
<li>React</li> 
</ul>

    16. What is the Colspan attribute in HTML?

    This is an attribute of html which is used to merge multiple cells horizontally into a single cell.

    This attribute is applied on <th> and <td> only.

    Congratulations for completing all the questions important for cracking the interview. Facing interviews definitely need courage. If you are new to HTML then don’t miss the above questions prepared by experts from web development institute in Delhi and if you are experienced, then revise or brush up your concepts at least once.

    You can enrol in an online or offline full-stack development and web development course if you want any more help. A knowledgeable group of mentors is available to assist you with any questions you may have.

    You should choose ESS, if you want to learn in an organized manner. We are Delhi’s top computer learning facility. To get your ideal job in 2025, enrol at ESS Institute right now.

    Call Now