List of Most Popular HTML Interview Questions For Freshers and Experienced Professionals:
In this tutorial, we have covered HTML interview questions which include both the basic and advanced portions of HTML which are helpful for freshers and experienced candidates.
HTML is a very basic language from which we begin our work on Web development.
A very strong knowledge of HTML is highly recommended to crack the interviews for any web development posts. I hope this informative tutorial will help you clear the interviews successfully on the first attempt.
Table of Contents:
Most Frequently Asked HTML Interview Questions
Given below is the list of the most popular HTML interview questions with the answers and example codes for your easy understanding.
Let’s Start!!
Q #1) What does HTML stand for?
Answer: HTML stands for Hypertext Markup Language.
Q #2) Describe HTML.
Answer: Hypertext Markup Language or HTML is a markup language that is used to create website templates or WebPages to present the content on the World Wide Web.
HTML pages are saved by adding .html or .html in the web page name.
Q #3) Write the basic structure of the HTML template.
Answer: The basic structure of the HTML template is:
<html>
<head>
<title></title>
</head>
<body>
</body></html>
Q #4) What is HTML5?
Answer: HTML5 is the latest or updated version of the markup language that defines HTML.
Q #5) Name some new features that were not present in HTML but are added to HTML5.
Answer: Some new features in HTML5 include:
- DOCTYPE declaration: <!DOCTYPE html>
- section: Section tag defines a section in the document, such as a header, footer, or in other sections of the document. It is used to define the structure of the document. <section></section>
- header: The header tag defines the head section of the document. A header section always sticks at the top of the document. <header></header>
- footer: The footer tag defines the footer section of the document. A footer section always sticks at the bottom of the document. <footer></footer>
- article: Article tag defines an independent piece of the content of a document. <article> </article>
- main: The main tag defines the main section in the document which contains the main content of the document. <main></main>
- figcaption: Figcaption tag defines the caption for the media elements such as an image or video. <figcaption></figcaption>
Q #6) What is an Anchor tag and how can you open a URL in a new tab when clicked?
Answer: Anchor tag in HTML is used to link between two sections or two different web pages or website templates.
To open a URL into a new tab in the browser upon a click, we need to add a target attribute equal to _blank.
<a href=”#” target=”_blank”></a>
Q #7) Write an HTML code to form a table to show the below values in a tabular form with heading as Roll No., Student name, Subject Name, and values as
- Ram, Physics
- Shyam, Math
- Murli, Chemistry
Answer: To represent the above values in an HTML table format, the code will be:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table >
<tr>
<th> Roll No. </th>
<th> Student Name </th>
<th> Subject Name </th>
</tr>
<tr>
<td> 1 </td>
<td>Ram</td>
<td> Physics </td>
</tr>
<tr>
<td> 2 </td>
<td> Shyam </td>
<td> Math </td>
</tr>
<tr>
<td> 3 </td>
<td> Murli </td>
<td> Chemistry </td>
</tr>
</table>
</body>
</html>
Output:
Q #8) Define Semantic elements in HTML.
Answer: Semantic elements are HTML elements that represent their meaning to the browser and developer about its contents.
For Example – p tag represents a paragraph, a tag represents an anchor tag, a form tag, a table tag, an article tag and many more semantic elements in HTML. Whereas, div tag, span tag, and bold tag are not semantic elements.
Q #9) Define attributes in HTML tag.
Answer: The HTML tag contains a field inside the tag which is called attributes of that tag.
For Example:
<img src=”#”> Here in this tag src is img tag attributes.
<input type=” text”> Here in this tag type is input tag attributes.
Q #10) Can we modify the attribute’s value of the HTML tag dynamically?
Answer: Yes, we can modify the value of the attributes by using JavaScript.
Below is the input element whose attribute will be modified from text to password, and the JS code to modify the attribute value:
<input type=“text” id=“inputField”>
document.getElementById(“inputField”).attr(“type”, “password”);
Q #11) How can we comment in HTML?
Answer: Comments are used by developers to keep track of the code functionality and also help the other developers understand the code functionalities easily.
The commented outlines will not be shown in the browser. To comment on a line, the line should start by this <!– and end by this –>. Comments can be of one line or of multiple lines.
For Example:
<!-- This is one line comment ?
<!-- This is multiple line of two or more line -->
Q #12) What are inline elements and block-level elements in HTML?
Answer: Block elements are the blocks that take the full available width and always start from a new line. It will stretch itself to the full width of the available container width. Block-level elements are <div>, <p>, <img>, <section> and many more.
Inline elements are the elements that will only take the width that is required to fit into the container.
For Example, take the flow of text on the page. When the line of the text takes the full width of the container, it wraps itself into a new line and again goes in the same way.
Whereas, the inline element will take only that much space or width that it is needed for them. Inline elements are <span>, <label>, <a>, <b> and many more.
Q #13) Can we change inline elements into block-level elements?
Answer: Yes, we can change inline elements into block-level elements by adding a display equal to the block in its CSS tag. Writing it will change the inline elements into block elements and then inline elements will also take the full width of the container.
display: block;
Q #14) What are the different browsers that support HTML5?
Answer: All modern browsers support HTML5 elements except some old browsers. But fortunately, most of the browsers will take html5 elements as inline elements.
Q #15) What are <br> tags in HTML?
Answer: <br> tags are used to enter a new line into the HTML contents. These tags are used to separate two different lines of text between each other.
Q #16) Explain the structure of the HTML webpage.
Answer: The common structure that all HTML pages follow are enlisted below:
(i) DOCTYPE – It is a special tag in HTML that is always written at the top of the HTML document, i.e. at the start of the HTML template. DOCTYPE is used to convey to the browser about the HTML version.
<!DOCTYPE html>
(ii) HTML – After DOCTYPE tag, the HTML tag is written to start the template. All the code will be placed into this HTML tag. It works as the container for the whole HTML page elements.
<html>
<!-- Rest of the html code will come inside it -->
</html>
(iii) HEAD – <head> tag is the first element inside the <html> tag. It is used to provide information to the browser about the page and its contents.
Search Engine Optimization (SEO) techniques are written inside this tag. <title>, <meta> tags are written inside these tag. CSS and JS external links or internal CSS and JS are also written inside this tag.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<title>HTML Interview Questions</title>
</head>
(iv) BODY – <body> tags are written after the closing tag of the <head> tag, i.e. after </head>. Whatever HTML code is written inside these tags will be shown by the browser as website content.
<body>
<h2>Top HTML Interview Questions</h2>
<p>HTML stands for Hypertext Markup Language</p>
</body>
Together the whole body will be:
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<title>HTML Interview Questions</title>
<style type="text/css">
<!-- CSS Code will be written into these -->
h2{
color: #1855b5;
}
p{
color: #3bd256;
font-weight: 600;
}
</style>
<script type="text/javascript">
<!-- Javascript code will be written into these -->
</script>
</head>
<body>
<h2>Top HTML Interview Questions</h2>
<p>HTML stands for Hypertext Markup Language</p>
</body>
</html>
Output:
Q #17) Why Meta tags are used in HTML?
Answer: The developer uses Meta tags in HTML to tell the browser about the page description, author of the template, character set, keywords, and many more.
Meta tags are used for search engine optimization to tell the search engine about the page contents.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<meta name="description" content="HTML interview questions">
<meta name="author" content="Author Name">
<meta name="copyright" content="All Rights Reserved">
Q #18) Explain list elements in HTML.
Answer: Enlisted below are the list elements in HTML:
- Ordered List (<ol>) – An Ordered List or ol tag is a list that lists the items in an ordered way, i.e. numbered or alphabetically.
- Unordered List (<ul>) – An Unordered List or ul tag is the list that will list the items in an unordered way, i.e. in bulleted format or in any other format.
- Definition List (<dl>) – A Definition List or dl tag arranges the items in the way in which they are arranged in a dictionary.
Ordered List:
<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Questions Ordered List</title>
</head>
<style>
h1{
color: red;
}
li{
color: #0070ff;
}
</style>
<body>
<h1>Ordered List : </h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Output:
Unordered List:
<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Questions Unordered List</title>
<style>
h1{
color: red;
}
li{
color: #0070ff;
}
</style>
</head>
<body>
<h1>Unordered List : </h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output:
Definition List:
<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Question Definition List</title>
<style>
dt{
font-weight: 600;
font-size: 25px;
color: red;
}
dd{
font-weight: 500;
font-size: 15px;
color: #0070ff;
}
</style>
</head>
<body>
<dl>
<dt><strong>HTML</strong></dt>
<dd>HTML stands for Hypertext Markup Language</dd>
<dt><bold>CSS</bold></dt>
<dd>CSS stands for Cascading Style Sheets</dd>
</dl>
</body>
</html>
Output:
Q #19) Define iframe in HTML.
Answer: Iframe tag is written as <iframe>.
An iframe is used to display different document content inside the different document content in a rectangular region in the browser. When different document content is embedded into current HTML content, then it is known as an inline iframe.
The src attribute contains the path to the document that occupies the inline iframe.
<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Questions Iframes</title>
</head>
<body>
Iframe HTML Code
<iframe src = "demo_iframe.htm" width = "300" height = "300">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>
Output:
Q #20) Define forms in HTML.
Answer: Forms in HTML are required when we want to collect user information whenever a user fills any form or provides any details and when we want to save it into our database.
<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Question Form tag</title>
<style>
form {
width: 200px;
border: 2px solid blue;
margin: 0 auto;
padding: 60px 100px;
}
p{
color: red;
font-size: 16px;
font-weight: 600;
}
input::placeholder{
color: blue;
}
button{
line-height: 20px;
text-align: center;
background: green;
border: 0;
color: #ffffff;
font-size: 14px;
padding: 15px 64px;
margin-top: 20px;
}
</style>
</head>
<body>
<form >
<p>Name:</p>
<input type = "text" name = "user_name" placeholder = "Enter Name"/>
<br/>
<br/>
<p>Email: </p>
<input type = "email" name = "user_email" placeholder = "Enter email"/>
<br/>
<br/>
<p>Password: </p>
<input type="password" name = "user_pwd" placeholder = "Enter Password" />
<br/>
<button> Submit </button>
</form>
</body>
</html>
Output:
Q #21) In how many ways can a heading be written in HTML?
Answer: A heading can be defined as a block-level element that is used to give a heading to a particular section or topic.
Example using 6 types of headings in HTML:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: red;
}
h2{
color: blue;
}
h3{
color : green;
}
h4{
color: purple;
}
h5{
color: yellow;
}
h6{
color: orange;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Output:
Q #22) How can we create a hyperlink in HTML?
Answer: An anchor tag or <a> tag in HTML is used to create hyperlinks. This creates a path between two different HTML web pages.
Hyperlinks can be displayed in three ways:
- Unvisited Link – These links are blue in color and underlined.
- Visited Link – These links are purple in color and underlined.
- Active Link – These links are red in color and underlined.
Q #23) Why do we use the required attribute in HTML?
Answer: The required attribute is used in HTML to make the field mandatory. It forces the user to fill that particular field to submit the form.
If the field is input then it will throw a default HTML error.
<input type="email" name = "user_email" required />
Q #24) How can we include Google maps on a website?
Answer: HTML code to include Google Maps on our web page:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Interview Questions Google Map</h1>
<div id="map" style="width: 400px; height: 400px; background: yellow">
</div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src= "https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body></html>
Output:
Q #25) Differentiate between HTML and XHTML.
Answer: The differences between HTML and XHTML are:
- HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Markup Language.
- A static webpage is an HTML web page and dynamic web pages are XHTML.
- XHTML is stricter than HTML.
- An XML application of HTML is defined as XHTML.
- All modern browsers support XHTML.
Q #26) What are Web Workers?
Answer: Web Workers is a code of JavaScript that runs in the background threads without disturbing the performance of the page. It is used for computing-heavy tasks like accessing databases or functions.
Q #27) What is the SVG element?
Answer: SVG is a followed XML format; it stands for Scalable Vector Graphics which is used to create vector graphics with the support for interactivity and animation.
SVG is resolution-independent as it does not lose its quality when they are resized or zoomed.
Q #28) Explain about Canvas.
Answer: Canvas is a pixel-based graphics and it is one of the new features of HTML5.
It provides a space in the document where we can draw graphics by using JavaScript and it is resolution-dependent, hence the quality will be affected when it’s zoomed or resized.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3; color: #c9cc18;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var can = document.getElementById("myCanvas");
var canvas = can.getContext("2d");
canvas.font = "20px Hind-sanserif";
canvas.fillText("Canvas Example",30,60);
</script>
</body>
Q #29) Explain new form elements in HTML5.
Answer: The new form elements that were added to HTML5 are:
- Datalist – It’s used as a list of options for input control.
- Keygen – This tag defines a key-pair generator (Private/Public) field.
- Output – It’s used to show the result of a calculation.
Q #30) What is Quirks mode in HTML5?
Answer: If we do not include the <!DOCTYPE> element in our HTML page or Document, it will go to Quirks Mode. In this mode, the HTML element depends on the browser. Hence the content will be displayed according to the browser.
Conclusion
These interview questions and answers will help you to crack the Web development interview successfully. Most questions include the HTML expert’s answers during their interviews.
Suggested reading =>> HTML Cheat Sheet
Hope, these interview questions would have enriched your knowledge of the HTML concept!!
We wish you all success!!
Was this helpful?
Recommended Reading
-
Lists popular Software Testing and related Technical Interview Questions and answers on the most common software testing & technical topics: Let us see some of the most frequently asked interview questions and answers on Software Testing and other related technical topics in the tutorials listed below. Select the link you…
-
Most Frequently Asked Servlet Interview Questions and Answers to Help You in Interview Preparation: This series of Servlet questions will guide you through any Servlet interview. It includes all about what is Servlet, why servlet came into the picture, life cycle of servlet and its methods, Load on start-up, WAR…
-
List of most Frequently Asked Scrum Interview Questions with detailed answers to help you in interview preparation: Here are some of the interview questions and their answers which are generally asked while interviewing a candidate who claims to know Agile scrum methodology. Also, read => 25 Best Agile Testing Interview…
-
Top PL/SQL Interview Questions with Examples to Help You Prepare For The Upcoming Interview: What is PL/SQL? PL/SQL (Procedural Language/SQL) is a procedural extension of Oracle - SQL. PL/SQL helps the user to develop complex database applications using control structures, procedures, functions, modules, etc. This article will discuss the top-most…
-
List of Most Frequently Asked ETL Testing Tools Interview Questions And Answers to Help You Prepare For The Upcoming Interview: Business information and the data are of key importance to any business and company. Many companies invest a lot of time and money in the process of analyzing and sorting…
-
This tutorial provides frequently asked Ajax interview questions and answers with explanations to help you prepare for the Ajax interview: In a typical web application, the client, which is the web browser, sends a request to the server, and the server processes the request and sends a response back to…
-
Introduction to Cucumber with most frequently asked Cucumber Interview questions: Cucumber is a tool that is based on the Behavior Driven Development (BDD) framework. BDD is a methodology to understand the functionality of an application in the simple plain text representation. This tutorial covers the most common Cucumber interview questions along with their…
-
In this Tutorial, we have provided the Most Frequently Asked Bulma Interview Questions & Answers with Explanations: Bulma Elements and components were explained in our previous tutorial. In this tutorial, we will see the most common Bulma interview questions. Bulma is a free, open-source, modern CSS framework that can be…
