html interview questions

HTML or Hypertext markup Language is a markup language that is used to create web pages. It helps you define how a web page looks, and how the content can be displayed with the help of elements. There is a high demand among the employers for individuals who possess HTML skills. It is therefore essential for you to prepare yourself with the frequently asked HTML Interview questions if you want to land your dream job! This blog covers questions that will help freshers, as well as advanced professionals. The questions are divided into groups as follows. 

Let’s get started!

HTML Interview Questions for Freshers

1. What is HTML?

The full form of HTML stands for Hypertext Markup Language and it also allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.

2. How to insert an image in HTML?

<img> tag is used to add an image in a web page.

Images are not inserted into a web page basically they are linked to web pages. The <img> tag helps to create a holding space for the referenced image.

The <img> tag is normally empty, it has attributes only, and does not have a closing tag.

 <img> tag has two required parameters:

  • src – The path to the image
  • alt – An alternate text for the image

To insert a image in html you need to use img tag:

<img src="image path" alt="Italian Trulli">
<img src="demo.jpg" alt="Italian Trulli">

3. How to set background image in HTML?

In order to add a background image on an HTML element you need to use  two things:

  1. the HTML style attribute and 
  2. the CSS background-image property:
<div style="background-image: url('img_boy.jpg');">

4. How to comment in HTML?

Normally HTML comments are not being displayed in the browser. But these comments can help to document the HTML source code.

<!– Write your comments here –>

5. How to give space in HTML?

In order to add a space in the webpage, Go  where you want to add the space and then use the spacebar. Normally, HTML displays one space between words, no matter how many times you have entered  the space bar. 

Now if you Type &nbsp; to force an extra space

This is known as a non-breaking space because it helps to prevent a line break at its location.

6. How to link CSS to HTML?

Before start with how to link CSS with HTML, 

Let’s have a look at: What is CSS?

Full form of CSS stands for Cascading Style Sheets (CSS) which is used to format the layout of a webpage.

With the help of CSS, someone can control the color, font, the size of text, the spacing between elements and also how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and so many more as well.

Types of CSS:

So there are three ways to add CSS to HTML documents :

  • Inline – by putting the style attribute inside HTML elements
  • Internal – by putting  a <style> element in the <head> section
  • External – by adding a <link> element to link to an external CSS file

The most common and used way to add CSS, is to have the styles in external CSS files. 

Inline CSS

An inline CSS can be used to apply a unique and also different style to a single HTML element.

An inline CSS has the style attribute of an HTML element.

Now put the text color of the <h1> element to red, and the text color of the <p> element to blue:

<h1 style="color:red;">A Blue Heading</h1>
 
<p style="color:blue;">A red paragraph.</p>

Internal CSS

An internal CSS can be used to define a style for a single HTML page.

An internal CSS is used to define in the <head> section of an HTML page and also  within a <style> element.

Now let’s have an example of the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. 

The page will be displayed with “powderblue” background color:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

External CSS

An external style sheet concept is normally used to define the style for many HTML pages.

In order to start using an external style sheet, put a link to it in the <head> section of each HTML page:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
</body>
</html>
 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
</body>
</html>

7. How to align text in HTML?

Basically, if you want to align your text using HTML, then you need to use css and follow the proper process:

div.a {
  text-align: center;
}
 
div.b {
  text-align: left;
}
 
div.c {
  text-align: right;
}
 
div.c {
  text-align: justify;
}

The text-align property discusses the horizontal alignment of text in an element.

8. How to create a table in HTML?

HTML tables help web developers to set the data into rows and columns.

The <table> tag is there in the HTML table.
Each table row can be defined with a <tr> tag.
Each header can be defined with a <th> tag. 
Each data or the cell is defined with a <td> tag.
If your text is in the  <th> elements then they will be bold and centered.
If your text is in the <td> elements then they will be regular and left-aligned.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Hobbies</th>
  </tr>
  <tr>
    <td>Ram</td>
    <td>Kumar</td>
    <td>Travelling</td>
  </tr>
  <tr>
    <td>Shyam</td>
    <td>Chadra</td>
    <td>Reading books</td>
  </tr>
</table>

9. How to convert HTML to PDF?

If you are working in a Windows system then  open an HTML web page in Internet Explorer, Google Chrome or Firefox.

  • On a Mac, open an HTML web page in Firefox
  • Press on the “Convert to PDF” button in the Adobe PDF toolbar in order to get  started with the PDF conversion
  • Enter the filename and save your new PDF file in a desired location

10. How to change text color in HTML?

The HTML style attribute is the option to add styles to an element, like: Color, Font, Size, and more.

<!DOCTYPE html>
<html>
<body>
 
<p>I am normal</p>
<p style="color:red;">This is red</p>
<p style="color:blue;">This is  blue</p>
<p style="font-size:50px;">I am  Fat and big</p>
 
</body>
</html>

11. How to change font color in HTML?

<font> tag, is used to specify the text color.

  1. <font Color=”Blue”>  
  2. <font color=”rgb(128,128,0)”
  3. <font color=”#00FF00″>
<!DOCTYPE html>    
<html>     
<head>    
<title>    
 Example of color attribute   
</title>    
</head>    
<body>   
<font color="orange">   
<!-- The color attribute of font tag sets the color name 'orange' for the word Great Learningt-->   
<center>    
<h1>   
Great Learning 
</h1>   
</center>  
</font>     
</body>    
</html>

12. How to change background color in HTML?

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
 
<h1>This is a sample 1</h1>
<p>This is a sample 2.</p>
 
</body>
</html>
 
    

13. What is doctype in HTML?

The HTML Document Type.

It is a way to give  “information” to the browser about what will be the document type to expect. In HTML5, the <! DOCTYPE> declaration is simple: <! DOCTYPE html>

14. How to change font style in HTML?

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Font</title>
   </head>
 
   <body>
      <h1>Our Products</h1>
      <p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
         This is sample doc
      </p>
   </body>
 
</html>

15. How to add space in HTML?

In order to add a space in the webpage, go where you want to add the space and then use the spacebar. Normally, HTML displays one space between words, no matter how many times you have entered  the space bar. Now if you Type   to force an extra space. This is known as a non-breaking space because it helps to prevent a line break at its location.

16. What is dom in HTML?

DOM stands for Document Object Model. When a web page is getting loaded that time the browser creates a Document Object Model of the page and it is constructed as a tree of Objects. HTML DOM is basically an Object Model for HTML. 

HTML DOM describes:

  • The HTML elements as objects
  • Properties of all HTML elements
  • Methods of all HTML elements
  • Events of all HTML elements

17. How to add image in HTML from a folder?

  1. Copy the image from your images folder.
  2. Open up the index.
  3. Code:  <img src=”” alt=”My test image“> is the HTML code that inserts an image into the page.
  4. Insert the file path into your HTML code between the double quote marks of the src=”” code.

18. How to create form in HTML?

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

19. How to create button in HTML?

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

20. How to run HTML program?

  1. Step 1: Open Notepad (PC) Windows 8 or later: …
  2. Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit. 
  3. Step 2: Write Some HTML. Write or copy the following HTML code into Notepad:
  4. Step 3: Save the HTML Page. Save the file on your computer. …
  5. Step 4: View the HTML Page in Your Browser

21. How to save HTML file?

In order to save html file

  • On the main menu
  • click File > Save As
  • Right-click within the HTML document
  • click File > Save As 
  • In the Save As dialog box, specify the file name and location, then click Save

22. How to select multiple options from a drop down list in HTML?

<label for="Fruit">Choose a Fruit:</label>
 
<select name="Fruit" id="Fruit">
  <option value="Mango">Mango</option>
  <option value="Lichhi">Licchi</option>
  </select>

23. How to use div tag in html to divide the page?

The div tag stands for Division tag. This is used in HTML to make divisions of content in the web page like text, images, header, footer, navigation bar, etc.  Div tag has two parts like: 

  1. open(<div>) and
  2.  closing (</div>) tag and it is mandatory to maintain the tag. 

The Div is the most used tag in web page development because it has power to separate respective data in the web page and also a particular section can be created for particular data or function in the web pages.

  • Div tag is Block level tag
  • Generic container tag
<html>
   <head>
      <title>div tag demo</title>
<style type=text/css>
  
p{
  background-color:gray;
  margin: 100px;
}
  
div
{
  color: white;
  background-color: 009900;
  margin: 4px;
  font-size: 35px;
}
</style>
   
</head>
  
 <body>
   <div > div tag demo 1   </div>
   <div > div tag  demo 2 </div>
   <div > div tag  demo 3 </div>
   <div > div tag  demo 4 </div>
   
   </body>
</html>

24. What is HTML used for?

HTML is used to make static web pages and HTML stands for markup language.

25. How to align text in center in HTML?

<!DOCTYPE html>
<html>
   <head>
      <title>New HTML Document</title>
   </head>
 
   <body>
      <h1>Demo</h1>
      <p style="text-align:center;">Great Learning</p>
   </body>
</html>

26. How to increase font size in HTML?

<!DOCTYPE html>
   <html>    
      <head>      
         <title>Demo HTML font size</title>    
      </head>    
      <body>      
         <h1 style="color:red;font-size:40px;">Heading</h1>      
         <p style="color:blue;font-size:18px;">Font size demo</p>    
      </body>
</html>

27. How to create button in HTML?

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

28. How to add images in html?

<img src="img.jpg" alt="Italian Trulli">

29. How to change button color in HTML?

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
 
.buttondemo {background-color: #008CBA;} /* Blue */
.buttondemo2 {background-color: #f44336;} /* Red */ 
.buttondemo3 {background-color: #e7e7e7; color: black;} /* Gray */ 
.buttondemo4 {background-color: #555555;} /* Black */
</style>
</head>
<body>
 
<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color property:</p>
 
<button class="button">Green</button>
<button class="button buttondemo">Blue</button>
<button class="button buttondemo2">Red</button>
<button class="button buttondemo3">Gray</button>
<button class="buttonbuttondemo4">Black</button>
 
</body>
</html>
 

30. What is the difference between html and html5?

When HTML5 was released that time  the primary objective was to improve the World Wide Web experience for developers and end-users. :

  • HTML5 supports SVG (Scalable Vector Graphics), canvas, and also  other virtual vector graphics, but in HTML, make use of vector graphics was only possible by using it in conjunction with different technologies like Flash, VML (Vector Markup Language), or Silverlight.
  • Web SQL databases are normally  used in HTML5 for storing the data temporarily. In the older version of HTML we were only able to use browser cache and could be utilized for this purpose.
  • In HTML5 the main advantage is  JavaScript can run within a web browser, while when we talk about the older version of  HTML only allows JavaScript to run in the browser interface thread.
  • HTML5 is not based on SGML. The language has improved parsing rules which helps to provide enhanced compatibility.

31. How to create drop down list in HTML?

<label for="Fruits">Choose a Fruit:</label>
 
<select name="Fruits" id="cars">
  <option value="Mango">Mango</option>
  <option value="Apple">Apple</option>
 
</select>

32. What is span in HTML?

The HTML <span> element stands for a generic inline container for phrasing content, that does not inherently represent anything. It can also be used to group elements for styling purposes like using the class or id attributes, or because they share attribute values, such as lang.

33. How to underline text in HTML?

<u> tag is used for underline the text. The <u> tag was deprecated in HTML, but then they re-introduced in HTML5.

34. How to create a box in HTML?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.square {
  height: 50px;
  width: 50px;
  background-color: #555;
}
</style>
</head>
<body>
 
<h2>Draw Square using CSS</h2>
<div class="square"></div>
 
</body>
</html> 

35. How to put an image in HTML?

<img> tag is used to add an image in a web page.

Images are not inserted into a web page basically they are linked to web pages. The <img> tag helps to create a holding space for the referenced image.

The <img> tag is normally empty, it has attributes only, and does not have a closing tag.

 <img> tag has two required parameters:

  • src – The path to the image
  • alt – An alternate text for the image

To insert a image in html you need to use img tag:

<img src="image path" alt="Italian Trulli">
<img src="demo.jpg" alt="Italian Trulli">

36. How to change font in HTML?

<font> tag,is used to specify the text color.

  • <font Color=”Blue”>  
  • <font color=”rgb(128,128,0)”
  • <font color=”#00FF00″>  
<!DOCTYPE html>    
<html>     
<head>    
<title>    
 Example of color attribute   
</title>    
</head>    
<body>   
<font color="orange">   
<!-- The color attribute of font tag sets the color name 'orange' for the word Great Learningt-->   
<center>    
<h1>   
Great Learning 
</h1>   
</center>  
</font>     
</body>    
</html>

37. How to add a link in HTML?

To add links in html we use <a> and </a> tags,  which are the tags used to define the links. The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends. Whatever text gets added inside these tags, will work as a hyperlink. Add the URL for the link in the <a href=” ”>.

38. What is HTML tags?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
</head>
<body>
 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
</body>
</html>

39. How to create a checkbox in HTML?

<input type="checkbox" id="car" name="vehicle1" value="Bike">
<label for="car1"> I have a Alto</label><br>
<input type="checkbox" id="car2" name="vehicle2" value="Car">
<label for="car2"> I have an Audi</label><br>
<input type="checkbox" id="car3" name="vehicle3" value="Boat">
<label for="car3"> I have a BMW</label><br>

40. How to create a box in HTML?

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>
 
<h2>Demonstrating the Box Model</h2>
 
<p>Hey, welcome to Great Learning.</p>
 
<div>Great Learning Academy is an initiative taken by Great Learning, where we are offering 1000+ hours of content across 80+ courses in Data Science, Machine Learning, Artificial Intelligence, Cloud Computing, Business, Digital Marketing, Big Data and many more for free.</div>
 
</body>
</html>

41. How to add a scroll bar in HTML?

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: scroll;
}
 
div.ex2 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: hidden;
}
 
div.ex3 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}
 
div.ex4 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: visible;
}
</style>
</head>
<body>
 
<h1>Welcome to great learning</h1>
 
 
 
<h2>scroll:</h2>
<div class="ex1">Great Learning Academy is an initiative taken by Great Learning, where we are offering 1000+ hours of content across 80+ courses in Data Science, Machine Learning, Artificial Intelligence, Cloud Computing, Business, Digital Marketing, Big Data and many more for free.</div>
</body>
</html>
 

42. What is an attribute in HTML?

HTML attributes help to provide the additional information about HTML elements.

  • All HTML elements always have attributes
  • Attributes provide additional information about elements
  • Attributes always have the start tag
  • Attributes usually use in name/value pairs like: name=”value”

43. How to increase button size in HTML?

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

44. How to change font size in HTML?

<!DOCTYPE html>
   <html>    
      <head>      
         <title>Demo HTML font size</title>    
      </head>    
      <body>      
         <h1 style="color:red;font-size:40px;">Heading</h1>      
         <p style="color:blue;font-size:18px;">Font size demo</p>    
      </body>
</html>

45. How to change color of text in HTML?

<p style="color:red">This is a demo</p>
<p style="color:blue">This is another demo</p>
This concept is not used in HTML5

46. How to bold text in HTML?

To text bold in HTML, use the <b>  </b> tag or <strong> </strong> tag.

<b> hey, welcome to great learning!</b>

47. How to add a footer in HTML?

<!DOCTYPE html>
<html>
<body>
 
<h1>The footer element</h1>
 
<footer>
  <p>demo of footer<br>
  <a href="mailto:admin@example.com">admin@example.com</a></p>
</footer>
 
</body>
</html>
 

48. Who invented HTML?

The inventor of HTML Tim Berners-Lee.

49. How to align the image in the center in HTML?

<img src="demo.jpg" alt="Paris" class="center">

50. How to create a hyperlink in HTML?

a hyperlink in an HTML page, use the <a> and </a> tags

51. How do add a header in HTML?

<!DOCTYPE html>
<html>
<body>
 
 
  <header>
    <b>hey</b>
  </header>
 
 
</body>
</html>

52. How to give space between two buttons in HTML?

<div class='myDiv'>
    <button style='margin-right:16px'>Button 1</button>
    <button style='margin-right:16px'>Button 2</button>
    <button>Button 3</button>
</div>

53. How to change image size in HTML?

<img src="demo.jpg" alt="Nature" style="width:500px;height:600px;">

The width and height attributes always define the width and height of the image in pixels.

54. Why do we use doctype in HTML?

Doctype is used for Document Type Declaration and also It informs the web browser about the type and version of HTML used in building the web document.

HTML Interview Questions for Advanced

55. How to add video in HTML?

The HTML <video> element is used to show a video on a web page.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
 

56. How to add favicon in HTML?

You can create a .png image and then use f the following snippets between the <head> tags for the static HTML documents:

<link rel="icon" type="image/png" href="/favicon.png"/> 
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

57. How to embed YouTube video in HTML?

  1. On a computer, go to the YouTube video you want to embed.
  2. Under the video, click SHARE .
  3. Click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your blog or website HTML.

58. How to write text on image in HTML?

<div class="container">
  <img src="img_snow.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Left</div>
  <div class="top-left">Up Left</div>
  <div class="top-right">Up Right</div>
  <div class="bottom-right"> Right</div>
  <div class="centered">Middle</div>
</div>

59. How to create a popup in html with CSS?

<div class="popup" onclick="myFunction()">Click me!
  <span class="popuptext" id="NewPopup">Your text</span>
</div>

60. How to connect html to database with MySQL?

  • Step 1: Filter your HTML form requirements for your contact us web page.
  • Step 2: Create a database and a table in MySQL.
  • Step 3: Create HTML form.
  • Step 4: Create PHP page to Insert contact us HTML form data in MySQL database.
  • Step 5: All done!

61. How to blink text in HTML?

The HTML <blink> tag stands for a non-standard element that is used to create an enclosed text. It flashes slowly and normally blinks, meaning is light flashing on and off in a regular or intermittent way so samely blinking effect is used very rarely, as it is not eye soothing  for users to watch a part of text constantly turning on and off.

62. How to add calendar in HTML Form?

<!DOCTYPE html>
<html>
<body>
 
 
 
<button onclick=”CalenderFunction()">Put the date</button>
 
 
<script>
function CalenderFunction()n() {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "date");
  x.setAttribute("value", "2014-02-09");
  document.body.appendChild(x);
}
</script>
 
</body>
</html>

63. How to add video in HTML?

The HTML <video> element is used to show a video on a web page.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

64. How to add google map in HTML?

<!DOCTYPE html>
<html>
<body>
 
<h1> Google Map</h1>
 
<div id="googleMap" style="width:100%;height:400px;"></div>
 
<script>
function myMap() {
var mapProp= {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&amp;callback=myMap"></script>
 
</body>
</html>

65. How to create registration form in HTML with database?

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

66. How to create a dynamic calendar in HTML?

<div class="month">
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li>August<br><span style="font-size:18px">2017</span></li>
  </ul>
</div>
 
<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>
 
<ul class="days">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  </ul>

67. How to create frames in HTML?

<!DOCTYPE html>
<html>
 
   <head>
      <title>HTML Demp Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top1" src = "/html/top_frame.htm" />
      <frame name = "mainframe" src = "/html/main_frame.htm" />
      <frame name = "bottompart" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Hey Great Learning</body>
      </noframes>
      
   </frameset>
   
</html>

68. How to create a menu in HTML?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
</style>
</head>
<body>
 
<p>Menu icon:</p>
 
<div></div>
<div></div>
<div></div>
 
</body>
</html>

This brings us to end of the blog on HTML Interview Questions. We hope you are now well-equipped with the kind of questions that may be asked during an Interview. Wondering where to learn the highly coveted in demand skills for free? Check out the courses on Great Learning Academy

0

LEAVE A REPLY

Please enter your comment!
Please enter your name here

sixteen − twelve =