Browse by Domains
Table of Contents

HTML Interview Questions & HTML5 Interview Questions in 2024

By Updated on Jan 4, 2024 24340
Table of contents

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 –>

HTML Interview PDF

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.

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 using < pre > tag in HTML?

The pre tag is used to create preformatted text. The text inside this tag will preserve both spaces and line breaks. To add space using the tag, you can add the style attribute and set the value to “margin:10px”.

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. What tag is used to create button in HTML?

The HTML <button> tag is used to create a button in a website.

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. Which is better: HTML or HTML5?

HTML5 is the newest version of HTML and it is better than HTML because it includes new features like audio and video elements, new semantic elements, and support for local storage.

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. What is a “fieldset” tag in HTML?

A fieldset is used to group related elements in a form. It is useful for creating structures such as tables or grid layouts.

35. How to put an image in HTML?

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

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>

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>


<!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">

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. What tag is used to add a video in HTML?

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

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&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>

69. What is the difference between HTML tags and elements?

The starting and ending tags mark the beginning and end of the HTML element. The tags are enclosed within the < and > symbol. HTML Elements is the text written between HTML tags and it holds the content.

70. Which types of heading are found in HTML?

There are 6 types of headings that can be found in HTML which are numbered <h1> to <h6> from largest to smallest. Headings are used in the following way.

<h1> heading 1 </h1>

<h2> heading 2 </h2>

<h3> heading 3 </h3>

<h4> heading 4 </h4>

<h5> heading 5 </h5>

<h6> heading 6 </h6>

 To insert the copyright symbol you can use the “&#169” as well as “&copy” in the HTML file.

72. How to specify the metadata in HTML?

<meta> is the tag used to specify metadata in HTML. <meta> is a void tag which means there is no closing tag. 

73. What are Inline and block elements in HTML?

The block elements take up the full page width and start on a new line, instead of inline element that only take the space to accommodate the length of the content and continue on the same line. Some examples of block elements are <div>, <p>, <header>, <footer>, <h1>…<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>, <hr>, <article>, <section>, etc.  Some examples of inline elements are <span>, <a>, <strong>, <img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>, <input>, <output>, <q>, etc.

74. Is audio tag supported in HTML 5?

Audio tags are supported in HTML5 and with these, you can add audio to a webpage. The file formats supported by HTML5 include MP3, WAV, and OGG.

75. Is it possible to change the color of the bullet?

To change the color of the bullet, you need to change the text color of the first line in the list. The bullet takes the color from the first line of the list.

76. How can you keep list elements straight in an HTML file?

You can use indents to keep the elements of a list aligned straight. You can use a nested list and indent them further than the parent list, you can quickly determine the lists and elements contained under the list.

77. What are Forms in HTML?

If you want to collect the information of the visitors to the webpage, you can add a form to the webpage. Once the user enters the information into the form fields, it is added to a database specified by you.

78. What are void elements in HTML?

Some elements in HTML only need an opening tag, without the need for a close tag, and these are known as void elements. Some examples are <br />, <img />, <hr />, etc.

79. What is a marquee?

A scrolling text that can go in a specific direction across the screen i.e. left, right, up, or down, automatically. For this you can use the tag <marquee> Text to scroll </marquee>.

80. What is an Anchor tag in HTML?

Whenever you need to link any two web pages, website templates, or sections, you can do so using the anchor tag. The anchor tag format is <a href=”#” target=”link”></a>. Here the ‘link’ is defined as the target attribute, while the ‘href’ attribute indicates the sections in the documents.

81. What is an image map?

Identified by the <map> tag, the image map can link an image to different web pages. It is one of the most asked questions in interviews these days.

82. What is datalist tag?

The datalist tag is an HTML tag that lets the user auto-complete the form based on the predefined options. It presents the users with predefined options that they can choose from. An example of this can be as below:

<label>    

 Enter your favorite Bollywood Actor: Press any character<br />    

 <input type=”text” id=”favBolActor” list=”BolActors”>    

 <datalist id=”BolActor”>    

 <option value=”Shahrukh Khan”>    

 <option value=”Akshay Kumar”>    

 <option value=”Aamir Khan”>     

 <option value=”Saif Ali Khan”>     

 <option value=”Ranbir Kapoor”>     

 <option value=”Ranveer Singh”>     

 <option value=”Sanjay Dutt”>     

 <option value=”Hrithik Roshan”>     

 <option value=”Varun Dhawan”>     

 <option value=”Ajay Devgan”>    

 </datalist>    

</label>     

83. What is difference between HTML and XHTML?

HTML and XHTML has a few differences as below:

  • HTML stands for Hypertext Markup Language while XHTML stands for Extensible Hypertext Markup Language
  • The format of HTML is a document file format while for XHTML the file format is a markup file format
  • In HTML it is not necessary to close tags in the same order as they were opened, but in XHTML it is necessary
  • In XHTML, it is quite important to write doctype on the top of the file; while in HTML is it not needed
  • The file name extension used in HTML are .html, .htm.; and the file name extension used in XHTML are .xhtml, .xht, .xml.

84. What is the ‘class’ attribute in HTML?

It is an attribute that refers to one or more than one class name for an HTML element. The class attribute can be used for the HTML elements. 

85. What is the use of an IFrame tag?

IFrame or Inline Frame is basically an HTML document implanted inside the other  HTML documents on a website. The IFrame element is used for inserting content from other source, which can be an advertisement into a webpage.

86. What is the use of figure tag in HTML 5?

The HTML figure tag is used for adding self-contained content such as illustrations, photos, diagrams, or code listings. HTML figure tag contains two tags such img src and figcaption. Img src is used for adding image source in a document; while figcaption is used for setting caption to an image.

87. Why is a URL encoded in HTML?

URL is encoded in HTML as it converts characters into a format that can be transmitted over the web. A URL is transmitted over the internet through the ASCII character set. The non-ASCII characters can be replaced by “%” which is followed by hexadecimal digits.

88. What are the different kinds of Doctypes available?

A document type declaration or doctype is actually an instruction that conveys to the web browser what type of document it should expect.

The <!DOCTYPE> declaration is included at the start of each document it is added just above the <html> tag in each document.

The common doctype declaration for different version of HTML and XHTML are:

  1. For HTML 5 we simply write <!DOCTYPE html>
  2. HTML 4.01 Strict: The strict version of HTML 4.01 does not permit presentational to be written within HTML Elements. It also does not support inclusion of Frames.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

  1. HTML 4.01 Transitional: The transitional version of HTML 4.01 this Transitional document type definition (DTD) allows users to utilize certain elements and attributes which were not allowed to be used in strict doctype.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/transitional.dtd”>

  1. HTML 4.01 Frameset: In HTML 4.01 version Frameset document type definition (DTD),allows users to use frames.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”

“http://www.w3.org/TR/html4/frameset.dtd”>

  1. XHTML 1.0 Strict: In XHTML 1.0 version Strict document type definition (DTD), does not support deprecated tags and the code must be written according to the XML Specification.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  1. XHTML 1.0 Transitional: In XHTML 1.0 version Transitional document type definition (DTD), allows deprecated elements.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  1. XHTML 1.0 Frameset: In XHTML 1.0 version Frameset document type definition (DTD), framesets are used.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

  1. XHTML 1.1: In XHTML 1.1 version document type definition (DTD), allows the addition of modules

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

89. Please explain how to indicate the character set being used by a document in HTML?

HTML5 by default uses utf-8 charset  even if it is not defined. To define explicitly in an HTML document the character set is specified using the charset attribute of a <meta> tag which is placed  inside the <head> element of the HTML.

<head>
    <title>Charset HTML</title>
    <meta charset="UTF-8">
</head>

90. What is the advantage of collapsing white space?

White spaces are a sequence of blank space characters, treated as a single space character in an HTML document.

  • The advantages of collapsing white space are 
  • Helps the content of the code to be more understandable and readable to the users.  
  • Decreases the transmission time between the server and the client and removes unnecessary bytes that are occupied by the white spaces.
  • If you leave extra white space by mistake, the browser will ignore it and display the content properly.

91. What are HTML Entities?

Some characters are reserved in HTML that has special meaning.HTML entities are used to display invisible characters and reserved characters that might be interpreted as HTML code. HTML entities is a piece of text, or string, that begins with an ampersand (&) and ends with a semicolon (;).

Few HTML Entities are: 

  • &nbsp; – non-breaking space
  • &lt; – less than sign
  • &gt; – greater than sign
  • &amp; – ampersand (&)
  • &quot; – double quotation mark
  • &apos; – single quotation mark
  • &cent; – cent sign
  • &pound; – pound sign

92. Describe the HTML layout structure.

An HTML page layout describes the appearance of a website. An HTML layout structure helps the user to navigate through web pages easily. HTML layout specifies a way to arrange web pages in well-mannered, well-structured using simple HTML tags.

HTML Layout can be structured 

Using Tables. Giving rows and column and assigning text to it  

Multiple Columns Layout using tables

Using DIV, SPAN tag

HTML Layout Elements: <header>  to defines a header section for a document

<nav> to define navigation links, <section> – to define a section in a document, <article> – define an independent content, <aside> – defines a sidebar content, <footer> – defines a footer for a section, <details> – to define additional details ,<summary> – is to define a heading for the <details> element.

93. How to optimize website assets loading?

Page loading refers to how quickly your content is displayed when a user visits a page on your site.

The different ways to optimize assets loading are:

  • Minimize HTTP requests
  • Utilize Content Development Network (CDN) and remove unused scripts/files
  • Compress images and optimize files
  • Caching data to the browser
  • Reducing redirects to multiple pages
  • Use asynchronous loading and delay loading for CSS and JavaScript files
  • Minify (removing unnecessary characters, spaces comments, and any not required elements to reduce the size of the files) CSS, JavaScript, and HTML
  • Remove unnecessary plugins

94. How is Cell Padding different from Cell Spacing?

Cell Padding and Cell Spacing are the attributes of formatting a table basically sets the white spaces in your table.

Cell PaddingCell Spacing
Used to fix the width/space between the border and its contentFixes the white space between the single cell, i.e., space between the edges and adjacent cell
Syntax:
<table cellpadding=”value” >
…..
…..
</table>
Here, cellpadding value specifies the space between the border and its content		Syntax:
<table cellspacing=”value” >
…..
……
</table>
Here, cellspacing value specifies the space between adjacent cells
The default cellpadding value is 1The default cell spacing value is 2

Example:

<table border="2"   cellpadding="2"    cellspacing="10">
        <thead>
        <td><span>Name</span></td>
        <td><span>Email Id</span></td>
        </thead>
         <tr>
          <td>abc</td>
          <td>abc@gmail.com</td>
        </tr>
      </table>

95. In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?

To position an HTML element there are five different values:

  • static.
  • relative.
  • fixed.
  • absolute.
  • sticky.

96. How to include javascript code in HTML?

There are two ways we can include javascript code in the HTML

  1. Embedded Js: In this, we add the script tag directly in the HTML document as shown below:

<script> document. Write (“Welcome!”)</script>

Can add the script tag either in the head section of the body section of an HTML document depending on when you want the script to be loaded.

  1. External Js: create a separate javascript file and save it with .js extension and with the help of src attribute of script tag add the .js file to the HTML document as shown below:

<script src=”file1.js”></script>

97. What is the significance of <head> and <body> tag in HTML?

The Head and Body tag of HTML have their own significance as below:

HeadBody
Describes the metadata or information related to the documentDescribes the documents main content of an HTML document
Head Tag contains the title for the document, and also other tags such as scripts, styles, links, and meta.Body tag contains all the contents of an HTML document, defined using different tags such as text, hyperlinks, images, tables, lists, etc.

98. Can we display a web page inside a web page or Is nesting of webpages possible?

Yes, it is possible to create nested pages in an HTML document. We can use<Iframe> or <embed> tag using src tag one can add URL to the same page.

HTML5 Interview Questions

HTML5, being a hot topic these days, serves as a fulfilling platter to stand out in an interview. The fact is, HTML5 is indeed a great deal to the web. HTML5 is a much more upgraded version of HTML with a bunch of its new and exciting features like:

  • Audio and video media support
  • Persistent local storage 
  • New, easy to implement elements and attributes
  • WebSocket
  • Server-sent events

There are a handful of HTML5 interview questions that an interviewee is most likely to face. So, let’s dig deeper into those questions.

1. What is HTML5?

HTML5 is the latest version of HTML (HyperText Mark-up Language) which is also referred to as World Wide Web (www) primary language. This standard version of HTML has features and behaviours, as well as a larger set of technologies leading to the building of more diverse and powerful web sites and applications. It is a cooperation between W3C(World Wide Web Consortium) and WHATWG( Web Hypertext  Application Technology Working Group). HTML5 actually incorporates three main kinds of code – HTML, CSS and JavaScript to take care of structure, presentation and implementation respectively, hence reducing the requirement of external plugins. 

The advanced features of HTML5 that make it more user-friendly include-

  • Addition of new attributes
  • Addition of new parsing rules in order to enhance its flexibility
  • Supporting Web SQL, i.e. allows implementation of standards for storing data in SQL databases
  • Allowing offline editing
  • Supporting Protocol and MIME handler registration simultaneously
  • Encouragement of semantic(markup)

2. What is HTML5 used for?

HTML5 is a markup language that is used to design the structural layout and format of webpages in World Wide Web. It is the fifth and latest version of HTML, hence it has a good lot of enhanced features and elements in its box for the users and developers. HTML5 is used for designing web content like web pages, sites, applications, advertisements, audio-video contents and games. 

HTML5 has replaced Flash in a quite fast pace and allows to make highly interactive ads and videos without requiring any external plugins, thus it can be said that it has revolutionized the world of web.  

3. What are the building blocks of HTML5?

The building blocks of HTML5 are:

  • Inclusion of canvas and SVG
  • Possess more semantic text markup
  • Supports many new form elements
  • Offers high level audio and video content
  • Supports JavaScript API in the background
  • Has new API for communication
  • Supports geolocation API
  • Supports web worker API
  • Provides efficient data storage in the form of local storage and session storage

4. When was HTML5 released?

HTML5 was published on 22 January, 2008 as a public-facing form. However, it was released as a W3C recommendation on 28 October, 2014 which brought the specification process to completion. Further, HTML5.1 and HTML5.2 were released as recommendations by W3C on 1 November,2016 and on 14 December, 2017 respectively. HTML5 does not only intend to encompass HTML4 but XHTML 1and DOM Level2 HTML also.

5. What is the difference between HTML and HTML5?

HTML5 being the fifth and the last version of HML till now is much more efficient and advanced as compared to HTML:

6. What is the difference between HTML4 and HTML5?

The main differences between the HTML4 and HTML5 are listed below:

7. What is new in HTML5?

HTML5 includes a lot of new features that are quite convenient to implement. New inline elements of HTML5 indicate contents that are-

  • Marked in a definite fashion
  • Time and date
  • Fraction of a certain range
  • Represent progress of any particular task towards its completion

The new features of HTML5 that support making of more dynamic pages-

  • Support creation of  context menus
  • href is no more required on a tag
  • async attribute to allow asynchronous loading of script

 The new form types HTML5 include: datetime, datetime-local, date, month, week, time, number, range, email, url.

HTML5 does not support some elements of HTML4 like acronym, big, dir, etc. HTML5 provides a few new elements like supporting drawing space in JavaScript, adding audio and video to one’s web pages with simple tags.

HTML5 gives a well-defined structure of a web page, including definitions for sections of pages, header & footer of a page, navigation on a page, some primary content or article on a page, images to annotate articles of page, and some extra content like slide bar on the pages.

8. Which browsers support HTML5?

Currently, latest versions of Apple Safari, Google Chrome, Opera and Mozilla Firefox support many functionalities of HTML5. Internet Explorer 9.0 is also intended to have support for HTML features. Besides, the mobile web browsers that come pre-installed on Android phones, iPhones, and iPads, all provide excellent support for HTML5.

9. How to turn on HTML5 in Chrome?

Here are the steps to turn on HTML5 in Chrome by installing the extension from Chrome Web Store (using IDE for example):

  • Choose New Project from File to open New Project Wizard
  • Select HTML5/JS Application in the HTML/JavaScript category and then Click Next
  • Specify the name and location for your project, followed by clicking Next
  • Choose No Site Template > Click on Finish button(index.html is opened in the editor)
  • Confirm integration
  • Click Run in the toolbar
  • Click Go to Chrome Web Store button in the Install Chrome Extension dialog box(Connector page is opened in Chrome)
  • In the connector page, click on Add to Chrome option
  • Now, click Re-Run Project in the dialog box of Install Chrome extension  as the final step

It has been quite long since Google proposed making HTML5 the default language over Flash in Chrome, i.e. Chrome directly syncs to HTML5. However, when it comes to Androids, one can always enable HTML5 in Chrome by changing its settings.

10. How to install HTML5?

No as such installation of HTML5 is required since almost all the modern day web browsers support HTML5 by default. However, a proper text editor to work with HTML5 (like in the case of HTML) is required to be installed on the device, which can be done by directly downloading it from the browser. All the HTML5 web contents are automatically supported by the web browsers; hence no separate installation is needed to work on or with HTML5.

11. Why to use HTML5?

There are numerous reasons that point towards the benefits of using HTML5. Be it for individual purposes or for business purposes, HTML5 is there to meet its users’ needs and requirements.

  • More interactive: In this world of growing virtualization, high interactivity is a must to have features. <canvas>, the HTML5 drawing tag is used to create dynamic websites. Besides, it comes with a great assortment of APIs, like Drag and Drop, offline storage database, browser history management, document editing and timed playback of media, to provide excellent user experience.
  • High accessibility: The Semantics and ARIA of HTML5 are the major reasons behind the creation of highly accessible sites. Headings like <header>, <section>, etc. are responsible for providing access to different sections of a web page.
  • Doctype: Coding in HTML5 does not involve any kind of hustle and bustle at all. Its doctype declaration is nevertheless pretty precise and simple. Apart from the simplicity part, HTML5 runs in almost all the web browsers.
  • Supports audio and video without external plugin: <video> and <audio> tags of HTML5 enable its users to access audio and video content without any third party plugin like Flash and Silverlight. These tags use attributes like height, width, autoplay and so on to specify the parameters of the audio/video.
  • Enhanced storage: The local and session storage of HTML5 provides a smarter way of using the storage capacity efficiently. Local storage makes the web applications possible without third party plugins.
  • Easy and clean coding: With a diversified set of attributes and tags, it becomes very easy to code in HTML5. It allows writing clean and descriptive codes with its semantic markup structure. Also, HTML5 boilerplate enables the designers to create webpages without facing any hassle.
  • Wide browser support: All modern and popular web browsers such as Chrome, Firefox, Opera, etc., all support HTML5. Now even IE features tend to make use of some HTML5 functionality.
  • Game development: HTML5 provides an efficient way to develop interactive games. <canvas> element plays an important role in game development using HTML5.
  • Mobile friendly: Since mobile technology is ruling the world in the current era, it is pretty much comprehensible for HTML5 to be mobile friendly if it wants to lead the world of web.

12. How to use or code in HTML5?

In order to code in HTML5, begin with <!DOCTYPE HTML> in the text editor. One can simply open the text editor and write the code for html5 like any other html code, just to be kept in mind that one has to start with <!DOCTYPE  HTML>.  Start with DOCTYPE, add <html> tag to specify the language, create head section and body section as per your requirements and then save the file with .htm extension. 

  • Start with DOCTYPE
  • Add <html> tag to specify the language
  •  Create the head section and body section as per your requirements and then save the file with .html extension. Consider the following sample code:
<!DOCTYPE HTML>
<html lang = "en">
<head>
  <!-- basic.html -->
  <title>basic.html</title>
  <meta charset = "UTF-8" />
</head>
<body>
  <h1> Sample</h1>
  <p>
    This is a sample code.
   It teaches how to code in HTML5
  </p>
</body>
</html>

Output:

13. Which DOCTYPE is correct for HTML5?

DOCTYPE( Document Type Definition) is a declaration that is done on the top of a webpage. It tells the web browser about the version of markup language being used for writing the webpage. There are three types of DOCTYPE- Strict, Framest and Transitional DOCTYPE. The DOCTYPE for HTML5 is quite efficiently concise as well as case – insensitive.

The correct DOCTYPE declaration for HTML5 is: <!DOCTYPE html>

<!DocTYpe html>, <!dOCtype html>, and <!doctype html>, are some other declarations of DOCTYPE that are supported by HTML5.

14. How to turn off HTML5?

In case one wants to turn off or disable HTML5 in one’s browse, one can easily do so by going through the following procedure:

For YouTube(Chrome)

  • Scroll down the HTML5 video Settings page on YouTube
  • Click on the ‘Use the default player’
  • Also, for Chrome, in HTTP Switchboard a selective column in the matrix can be turned off to turn off HTML5 functionalities

       For Firefox

  • Go to about:config
  • Set media.ogg.enabled to false

15. How to download HTML5 video?

There are several easy ways to download an HTML5 video, one of them are mentioned here:

  • Open video downloader by clicking on +New Download button
  • Copy and paste of URL html5 video and further analyse it
  • Now choose the resolution and format as per your desire
  • Click on Download All button and download the HTML5 video in a go

16. What is an HTML5 player?

The video technology of HTML5 empowers the marketers with the ability to show up an engaging video experience on any platform virtually, no matter whether it is an iPad or a Smartphone device or a web browser. HTML5 video players provide a simpler way for marketers and digital agencies to embed videos on websites or within different applications. There are certain HTML5 video players that make it pretty convenient to work with as well as build on various HTML5 videos.

17. Which functionality applies to HTML5 ads?

With new syntactical features and elements of HTML5, it becomes very easy to integrate various multimedia and graphical contents without requiring Flash and external plugins. Also, with its inbuilt features of adding audio and video, we don’t require third party plugins while working with HTML5. Hence-

  • HTML5 ads are easy to update and do not need extra plugins
  • HTML5 ads essentially work with more platforms and browsers
  • HTML5 ads are much more interactive and engaging, henceforth revolutionizing the world of digital marketing

18. How to disable HTML5 twitch?

HTML5 can be disabled on Twitch using following simple steps-

  • Go to the homepage of Twitch application
  • While trying to play a video,  go to the settings option on the right bottom corner of the video
  • Click on Advanced Settings icon
  • Now, click on Disable HTML5

External style sheets (CSS) can be easily linked to HTML5 by using the <link> tag in the head section, which contains the link to the CSS code of the style sheet. Consider the following example-

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>CSSlink.html</title>
 <link rel = "stylesheet"
   type = "text/css"
   href = "MyStyle.css" />
 </head>
 <body>
 <h1>External Style Sheet</h1>
 <p>
  This sheet contains a style set for headings, body and paragraphs. This sheet is coded in CSS instead of HTML5.
 </p>
  </body>
</html>

Output:

20. What are the new form elements introduced in HTML5?

The five new form elements introduced in HTML5 are:

  • <datalist>: This element allows to display a list of suggestions to a text input element
  • <meter>: This element is used to point to a numeric value that lies within a range. Value, max, min, high, low, optimum are the attributes of this element.
  • <output>: This element displays the output text which can be modified via using Script like JavaScript.
  • <progress>: This form element indicates the amount of work completed, i.e. tells about the progress of a task.
  • <keygen>: This element passes encrypted data to the server by generating an encryption key. keytype and challenge come under its parameters.

Apart from the above mentioned new form elements; there are a whole lot of new form <input> elements as well-

  • Date: Used for choosing a certain date
  • Time: Used for picking a certain time
  • Datetime: Allows to pick a combination of date and time
  • Datetime-local: Allows to choose local date and time combination
  • Week: Allows to pick weeks
  • Month: Allows to pick a certain month
  • E-mail: Allows to enter multiple email addresses
  • Tel: Allows to enter various telephone/phone numbers around the whole world, validated by the client side 
  • Search: Enables to search multiple queries through input text
  • url: Used for inserting urls/web addresses
  • color: This type is a color-picker
  • range: Allows to enter any numeric value lying within a certain range
  • placeholder: This provides hint to the user about what can be entered

21. What happens if you view a new HTML5 form input type in an older browser?

 Most of the web browsers( both new and old) are capable of handling HTML elements as inline elements even when they are unrecognized as input elements if a new HTML5 form input is viewed in it. Still, one can have the browsers to identify and further handle the new form input types. While some of the browsers ignore these new form elements and some might treat them as errors, one needs to add CSS rules to the webpage, causing these elements to behave like block elements in order to fix the compatibility issue.

header, section, footer, aside, nav, main, article, figure

{ display: block;}

Apart from this method, one can also rebuild the widgets with JavaScript to make the elements familiar to the old browsers.

22. Which tags are no longer valid in HTML5?

Following tags are no longer valid in HTML5:

  • <acronym> which was used to define an acronym
  • <big> was used to define big text
  • <center> was used to center text
  • <applet> was used to define an applet
  • <frame> was used for defining frames
  • <basefont> was used to define the basefont for a page
  • <font> which was earlier used for defining the font, size and color of the text
  • <dir> was used for defining a directory list
  • <isindex> was used to define a single-line input field
  • <frameset> was used for defining a set of frames
  • <noframes> was used for non-framing a section
  • <tt> was used to teletype a text
  • <u> was used for underlining a text
  • <strike> and <s> were used to strikethrough a text

23. How to center text in HTML5?

Earlier, <center> tag was used in HTML to center text. But, since this tag is a deprecated HTML tag and no longer supported by HTML5, CSS text align property or style attribute in HTML5 is applied to the desired <div> or <p> element. Hence, text can be centered in HTML5 by applying text – align : center to the desired text. However, their total dimensions remain the same. CSS margin – right and margin – left properties can be used in HTML5 to center the blocks as per one’s requirements.

Examples: Centering text using CSS text-align property

<!DOCTYPE HTML>

<html>
   <head>
    <title> Center text</title>
    </head>
     <body>
        <p style="text-align: center">Hello World!</p>       
      </body>
   
</html>

Centering a block using CSS margin alignment property

T.blocktext {
    margin-left: auto;          // setting left and right margins to auto places the block of text in the center               
    margin-right: auto;
    width: 10cm
}
...
<P class="block_text">Pieces of text to be made block text

Output:

24. How to center an image in HTML5?

To center an image in HTML5, style attribute with its value text – align : center is used within a block level element like <p> … </p> tags.

Example:

<!DOCTYPE HTML>

<html>
 <head>
    <title> Centering an image </title>
  </head>
   <body>
      <p style="text-align:center;"><img src="C:\Users\Lenovo\Desktop\great-learning-logo.png" alt="Logo"></p>
   </body>
</html>

Output:

Also, CSS properties can be used to center an image in HTML5. Consider the following example using CSS alignment property:

IMG.DisplayLogo 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
 }
...
<IMG class="DisplayLogo" src=" C:\Users\Lenovo\Desktop\great-learning-logo.png " alt="logo">

25. What is HTML5 Canvas?

Canvas in HTML5 is an element that gives a very powerful and convenient way to design graphics using JavaScript. <canvas> is used to draw charts, graphs, compose photos and even carry out basic animations.

<canvas id = “mycanvas” width = “100” height = “200”></canvas>

This <canvas> element has just additional width and height attributes along with the core attributes like id, name, etc.

<canvas> element can be easily found using getElementById in the DOM

Example: 

<!DOCTYPE HTML>
 
<html>
   <head>
      <title> Canvas usage </title>
       <style>
         #mycanvas{border:5px solid green;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycancvas" width = "100" height = "200"></canvas>
   </body>
</html>

Output:

Initially the <canvas> element of HTML5 is blank and its rendering context is needed to be accessed and drawn on it in order to display something. For that matter, the rendering context of sample canvas in the above example has to be created too.

26. What is the difference between HTML5 and CSS3?

Just like HTML5 is the fifth and the latest version of HTML, CSS is the third and the latest version of CSS. HTML5 includes a number of advanced elements to facilitate easy coding of web pages. Likewise, CSS3 encompasses the concept of modules that aid efficient designing in less time. HTML5 contains cascaded CSS3 to specify the style and structure of the site or app. HTML5 and CSS3 files are kept separated though.

27. Briefly explain the different formatting tags used in HTML5.

The set of formatting tags used in HTML5 comprises of-

  • <em>: This tag is used to produce emphasised text.
  • <small>: Used for implementation of small text, i.e., inserted text is displayed in small size using this tag.
  • <marks>: This tag is used for highlighting the text.
  • <ins>: By using this tag, one can insert a block of text in a document.
  • <del>: Used for specifying the deleted piece of text.
  • <sub>: Used for implementing subscripted text.
  • <sup>: Superscripted text can be inserted using this tag.

<footer> tag is used to define footer in HTML5. Footer usually contains information like authorship, copyright, back to top, contact, sitemap, etc.

Syntax:<footer>…</footer>

Example:

<!DOCTYPE html>
  <html>
      <head>
          <title> footer example</title>
      </head>
<body>
      <p> The part below this paragraph is the footer section of this page. Hope this example will help you to learn using footer tag well. 
Happy learning! </p>
      <footer>
          <div class="column"> 
                <p>Company Info</p> 
                <ul style="list-style-type:disc"> 
                    <li>About Us</li> 
                    <li>Terms & Conditions</li> 
                    <li>Contact Us</li> 
                </ul> 
            </div>
      </footer>
</body>
</html>

Output:

29. Which tags are used to create a table in HTML5?

A table is created using the <table> tag. Furthermore, <tr>, <th> and <td> tags are used for specifying the table row, table headings and table data respectively. Let’s consider the following example:

<!DOCTYPE html>
<html>
 <head>
   <title>Table</title>
 </head>
  <body>
    <table border = "2">
     <tr> 
       <td>row1,cell1</td>
       <td>row1,cell2</td>
     </tr>
     <tr>
       <td>row2,cell1</td>
       <td>row2,cell2</td>
     </tr>
   </body>
</html>
<!DOCTYPE html>
<html>
 <head>
   <title>Table</title>
 </head>
  <body>
    <table border = "2">
     <tr> 
       <td>row1,cell1</td>
       <td>row1,cell2</td>
     </tr>
     <tr>
       <td>row2,cell1</td>
       <td>row2,cell2</td>
     </tr>
   </body>
</html>

Output:

30. Which tag represents an independent piece of content of a document in HTML5?

The tag which is used to represent an independent piece of content of a document in HTML5 is <article> tag. This tag represents a self – contained text which can be distributed independently from the rest of the site. This element can be used for a blog post, forum post or news story. 

Example:

<!DOCTYPE html>
  <html>
      <head>
          <title> article example</title>
      </head>
<body>
      < article class = ‘OurCourses’>
        <h1>We provide following courses</h1>
         <article class = ‘Courses’>
              <h2> HTML5</h2>
               <p>HTML5 is a mark-up language</p>
         </article class = ‘Courses’>
         <article>
              <h2>Python</h2>
               <p>Python is a programming language</p>
          </article> 
        </article>
       </body>
   </html>

Output:

31. What are the common lists to design a webpage using HTML5?

The common lists to design a webpage using HTML5 are:

  • Ordered lists, used to make a list of related items in a specific order using <ol> tag
  • Unordered lists, used to make an unordered list of related items using <ul> tag
  • Menu lists create menu driven set of elements using <menu> tag
  • Definition lists are used to create list of objects along with their definitions using <dl> tag
  • Directory lists can be generated using  <dir> tag

32. What are the audio and video formats that are used for embedding on a webpage?

The audio formats that are used to embed on a webpage are MP3, WAV, Ogg Vorbis. WebM, MPEG4, Ogg video formats are used for embedding purposes on a web page. 

33. Which plugin is required to use svg tags in HTML5?

SVG(Scalable Vector Graphics) are used to draw 2d vectors and graphics in XML. <svg> tag in HTML5 enables the user to use SVG of XML to draw vector type diagrams since it contains the SVG graphics .

Raphael-Vector Graphics, Zoom plugin, Touch enabled SVG pan, jQuery inline, SVG path animation plugin, iSVG are some of the jQuery SVG plugins required in order to use the <svg> tags in HTML5.

34. How to convert Flash to HTML5?

By following the steps mentioned below, one can easily convert Flash to HTML5:

  1. In any of the Flash to HTML5 conversion tools like Animate, open your Flash file.
  2. Click on ‘Convert to Other Document Formats’
  3. Then choose HTML Canvas and click OK button
  4. Click Code Snippets in order to change Actions script
  5. Choose Convert to Bitmap, enabling conversion of vectors to bitmaps by right-clicking
  6. Check Export all bitmaps as Spritesheets and check Convert text to outlines, further click on OK button to Publish. 

35. How to convert PSD to HTML5?

For the conversion of PSD to HTML5, one has to go through the following procedure:

  • Dividing the PSD file into chunks: Since a PSD file is too heavy and static; it is not possible to export it directly to HTML5. Therefore, the image file created in Photoshop has to be divided into sections like header, body, navigation, or footer. It helps in coding that file in HTML5
  • Coding for the file chunks in HTML5(conversion): Now, the segments of PSD file need to be coded in the HTML5 mark-up language using any good text editor. As the first step of coding, code the main work and its background. In the next step, code the image navigation, content area and footer section. While coding, take special care of the navigation menu and the typography fonts.
  • SEO semantic Coding: The fundamentals of semantic coding in SEO have to be kept in mind while conversion. Incorporation of ALT tags along with descriptions of heading and meta tags as per requirement.
  • Test and Validation: A validation tool can be used to make this process of test and validation of coding less time consuming.

36. What is the HTML5 stack?

HTML5 stack is a set of linked software technologies that aid in carrying out a particular operation of a certain website or web application. The HTML5 stack includes HTML5, CSS3 and JavaScript. This stack has predefined common elements (including noscript and simple div) and attributes. Besides, there is a choice of using one’s own set too; this feature makes the stack very flexible and versatile.

37. Explain the Drag and Drop concept of HTML5.

Drag and Drop facility of HTML5 is one of its most essential features that are responsible for an enhanced user interface. This feature allows the user to drag an object from one place and drop it at the desired location with a simple mouse click. 

Move, copy and link are some of the common features that are used by most of the Drag and Drop operations. In order to make an image draggable, one is supposed to set the draggable image attribute to true, i.e., type = <img draggable = “true”>. In this way, the Drag and Drop feature can be used for an image.

38. What is the Geolocation API in HTML5 and how to use it?

Geolocation API is used for obtaining the user’s location for certain privacy and security reasons. The navigator.geolocation.get current position() method is used to get one’s location.

Example:

<!DOCTYPE html>
<html>
<head>
<title> location page</title>
</head>
<body>
<p>Click The My Location Button given below to get your location.</p>
<button onclick="getLocation()"> My Location </button>
<p id="location"></p>
<script>
var x = document.getElementById("location");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "At Latitude: " + position.coords.latitude +
"<br>At Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

Output:

39. How to clear HTML5 offline storage mega?

HTML5 offline storage space mega browser (like Chrome) error can be cleared by following the steps enlisted below:

  • Go to Settings in browser(Google Chrome)
  • Click on Content Settings as the next step, from there access Advanced Settings option
  • Further, click on Cookies, under which you have to choose All Cookies  & Data option
  • As the last step of the process, search for mega.nz cookie in Chrome and then clear it using the Trash button

Now, you won’t find Out of HTML5 Storage Space message anymore while downloading a file using HTML5 downloader.

40. What is HTML5 boilerplate?

HTML5 boilerplate which is now known to be one the most popular front-end templates is used to build robust, adaptable and fast web sites and applications. It offers a set of HTML5 in-built features and elements to help the designers make efficient websites and applications in just no time. The very basic features and elements to be found in HTML5 boilerplate cover almost all the requirements needed to begin with any website designing. It supports HTML, CSS, JavaScript, Crossdomain.xml, Apache web server configuration(.htaccess) and other miscellaneous documentation like ignore file, gitignore, etc.

In other words, HTML5 boilerplate is a professional template cum handy tool to create websites. It is pretty good to go with, when it comes to designing apps and sites, especially for beginners. It gives splendid mobile friendly analytics, graphics, icons and what not! It supports the latest versions of Modernizr, as well as includes normalizers.css to produce satisfactory output.

41. How to make HTML5 games?

HTML5 has been gaining popularity in developing games too. The steps to make a game in HTML5 are as follows-

  • Creating canvas to draw the game graphics and designs
  • Creating game loop to implement the game functionality and simulate the appearance of continuous gameplay
  • Drawing game text that will move around on screen
  • Creating the player object
  • Defining keyboard controls for player movement
  • Adding more game objects other than players like enemies, obstacles, etc.
  • Defining winning and losing conditions
  • Adding sound and display messages

42. How to create a dashboard in HTML5?

One can either use a dashboard template or go along with the conventional way of coding for creating a dashboard in HTML5. First get the concept for your dashboard then think about what all things you need to include. After that, get started with a clean design of dashboard. Now, move on to the development of your dashboard in which you are supposed to choose the functional and the most visually compelling components of HTML5. It allows you to produce a dynamic and descriptive representation of data. In the last part, think about the deployment but thanks to HTML5 compatibility, it has got you covered there. 

43. What are some of the advantages of HTML5 over its previous versions?

  • HTML5 has newly added features and tags providing improved accessibility.
  • Multimedia support for native audio and video which was not there in previous versions
  • HTML5 supports SVG (Scalable Vector Graphics), Canvas, and other virtual vector graphics; previous versions supported only vector graphics by combining it with tools like flash or silverlight.
  • HTML5 has the ability to draw shapes which were not there in previous versions.
  • HTML5 supports data storage using local storage,  web SQL databases,and application cache for storing data temporarily; previous versions of HTML had data storage using cookies and  browser cache to store data temporarily. 
  • JavaScript and browser interfaces run in different threads; previous versions have a single thread.
  • Doctype declaration is shorter and not mandatory for a few browsers.
  • HTML5 uses UTF-8 for character encoding while previous versions uses ASCII for character encoding.
  • HTML5 has geolocation API

44. What are Semantic Elements?

Semantic element is that it clearly defines its meaning to the developer and the browser. 

Examples of non-semantic elements do not convey anything about the content: <div> and <span> 

Examples of semantic elements conveys the meaning of the content to the browser and developer: <form>, <table>, <header>, <article> etc.

45. What is the difference between <meter> tag and <progress> tag?

<meter><progress>
The meter tag describes a scale for measuring data within a defined range.A progress tag is used to specify a progress bar that shows the progress of a task. 
For example, usage of the disk, purpose of a query result, the temperature of an object, etcFor example, form completion task, file upload progress, file download progress, etc on a website
Syntax:<meter>….<meter>Syntax:<progress>….</progress>
Attributes of meter tag are: form, max, min, high, low, optimum, valueAttributes of progress tag are max and value

46. Explain the concept of web storage in HTML5.

A web worker is essentially a thread executing a JavaScript file. It makes it possible to execute a JavaScript file asynchronously and autonomously. It also helps achieve multi-threading in your web applications

To create a web worker object use the new keyword:

var worker = new Worker(“demo.js”);

Here the parameter is the URL of the JavaScript file to execute

The disadvantage of a web worker is that it does not have access to the DOM of the page that creates the web worker. 

Working of web worker has the following:

  • Listen for messages, using the onmessage event listener function.
  • Send messages via the postMessage() function.
  • Send AJAX requests using the XMLHttpRequest.
  • Create timers using the setTimeout() and sendInterval() functions.

47. What is Microdata in HTML5?

Microdata in HTML5 is a standard way to define your own customized elements for your webpage and start adding properties for it.Has an item and name-value pair to add values.

The groups are called items and are created using the itemscope attribute and to add a property to an item, the itemprop attribute is used.

For example:

<html>
   <body>
     <div itemscope>
         <p>My name is <span itemprop = “name''>ABC</span>.</p>
      </div>
            <div itemscope>
         <p>My name is <span itemprop = “name''>DEF</span>.</p>
      </div>
 </body>
</html>

48. Explain HTML5 Graphics.

There are the two type of graphics elements: 

Canvas. 

Scalable Vector Graphics (SVG)

Canvas:

Uses JavaScript to draw graphics on a web page. A rectangular area, and you control every pixel of it

Syntax

<canvas id=”myCan” width=”300″ height=”200″>

Canvas is not supported

</canvas> 

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript using the context object

For example:

<script type="text/javascript">
var c=document.getElementById("myCan");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(60,60,120,80);
</script>

Has different context methods 

fillRect(x, y, width, height): Draw a filled rectangle.

strokeRect(x, y, width, height): Draw a rectangle outline only.

clearRect(x, y, width, height): Clears the specified rectangular area, making it fully transparent

moveTo(x, y): Moves the pen to the coordinates specified by x and y

lineTo(x, y): Draws a line from the current drawing position to the position specified by x and y

arc(x, y, r, sAngle, eAngle, anticlockwise) : Draws an arc centered at (x, y) with radius r starting at sAngle and ending at eAngle going anticlockwise (defaulting to clockwise). 

arcTo(x1, y1, x2, y2, radius) : Draws an arc with the given control points and radius, connected to the previous point by a straight line

createLinearGradient(x1, y1, x2, y2): Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).

createRadialGradient(x1, y1, r1, x2, y2, r2) : Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.

fillText(text, x, y [, maxWidth]): Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.

strokeText(text, x, y [, maxWidth]): Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

drawImage(image, x, y [,width, height]) : Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y) with optional width and height

SVG: (predefined shape element)

SVG stands for Scalable Vector Graphics it defines vector-based graphics using HTML elements. SVG graphics do NOT lose any quality if they are zoomed or resized

Syntax:

<svg width=”200″ height=”200″>
  <circle cx=”60″ cy=”60″ r=”50″ stroke=”red” stroke-width=”5″ fill=”green” />

</svg>

49. Explain new input types provided by HTML5 for forms?

The new input types provided by HTML5 for forms which make the form more interactive and provide user experience are email: enter a valid email id, tel: enter a phone number with a specific format, URL: enter a valid URL, search: text field to enter a search keyword, Date: a drop-down calendar which allows the user to select a date, DateTime: select a date and time along with time zone, DateTime-local: user can select a local date and time, time: user can enter time, week: enables the user to select a week and year from a drop-down calendar, month: enables the user to select a month and year from a drop-down calendar,  range: slider for a range of values, number: enter numeric values with increase and decrease bar and colour: enables colour using a colour picker.

50. What are the New tags in Media Elements in HTML5?

<video>: enables adding a video file, <audio>: enables adding audio files, <embed>: enables embedding external applications which are of audio and video media type. <source>: enables adding multiple audio and video files.<track>: enables adding text for audio and video files.

51. Why do we need the MathML element in HTML5?

The full form of MathML is Mathematics Markup Language; it is not a programming language. It is used to illustrate the mathematical equation or expression in web browsers like other HTML elements. 

Syntax: <math>…</math> tags.

The MathML can be used to describe Matrix form, Partial Differential Equation and Chemical Reaction Equation.

52. What are the server-sent events in HTML5?

HTML5 server-sent event is a feature that creates a unidirectional and constant connection between a web page and server. 

SSE is unidirectional data delivery from the server-side to the client which is the browser. It allows a web page to hold an open connection to a server that can send a new response automatically at any time, there’s no need to reconnect again to run the same server script from scratch again.

To use SSE in an application is added using <eventsource> element to the document which has a src attribute that points to an URL that sends a data stream containing the events.

53. What are Web Workers?

A web worker is basically a thread executing a JavaScript file. Webworkers make it possible to execute a JavaScript file asynchronously and autonomously. It helps achieve multithreading in your web applications

To create a web worker object we use new keyword:

var worker = new Worker(“demo.js”);

 The parameter is the URL of the JavaScript file to execute

A restriction of web workers is that a web worker does not have access to the DOM of the page that creates the web worker.

what a web worker can do:

  • Listen for messages, using the onmessage event listener function.
  • Send messages via the postMessage() function.
  • Send AJAX requests using the XMLHttpRequest.
  • Create timers using the setTimeout() and sendInterval() functions.

54. What is the usage of a novalidate attribute for the form tag that is introduced in HTML5?

novalidate is a Boolean attribute  used  with <form> element that specifies that the form-data should not be validated when submitting the form i.e., specifying validation to be disabled for form. 

Syntax: <form novalidate>

55. What are raster images and vector images?

Vector images are made up of points, lines, and curves that can be scaled infinitely without the loss of image quality. Vector programs include CorelDRAW, Adobe Illustrator, and Inkscape. Vector graphics can be chosen while designing a logo.

Raster images are made up of a set grid of dots called pixels, where each pixel is assigned a colour value. Raster images are resolution-dependent. When you change the size of a raster image, you shrink or stretch the pixels will result in a significant loss of clarity and generate blurry images. Raster programs include Adobe Photoshop and GIMP. Raster programs are chosen while designing a website, app, icon, banner ad, or any other design considered for electronic use.

56. What is a manifest file in HTML5?

A manifest file is a simple text file that tells the browser to cache a few files or web pages so that they can be used even in offline mode.  Caching is done by adding manifest attributes in <html> tag to cache web pages.

Cache manifest has three sections:

CACHE: This section of manifest gives a list of all the resources which includes HTML web pages, stylesheets, Js files, and images. This will be cached soon after the first download is complete. These resources can be used even in offline mode and do not require a connection to the server.

NETWORK: This section of manifest gives a list of all the resources that will never be cached. The resources need a connection to the server and can’t be used in offline mode.

FALLBACK:This section of manifest gives a lists the fallback resources that can be used in case a page is not accessible due to any reason. It provides a resource that will be replaced in case of server connection failure.

57. Explain Web Components and its usage.

Web components are web platform and the APIs that encapsulate your HTML,CSS and JS  and enable you to create new custom, reusable code that can be used anywhere in web sites. The web component is supported across all browsers. All JS frameworks and libraries that work with HTML can be used to work with encapsulated HTML tags.

The web component model, provides the following four main specifications for the creation of useful HTML components:

Custom Elements: helps in designing and using new types of DOM elements.

Shadow DOM: describes how to use encapsulated style and markup in web components.A set of JavaScript APIs for adding DOM elements

ES Modules: provides modules for integrating and reusing JavaScript documents

HTML Templates: are fragments of markup templates that do not appear on the displayed page and can be used later on a runtime.

Web components reduce the amount of work in developing projects greatly, and provide a versatile code structure. It is a universal framework for the simple and combined reuse of HTML, CSS and JavaScript code.

So, these were the html5 interview questions that can help you have a fine chance of qualifying for your interview, but ultimately, the final results will be governed by your depth of preparation and clarity of concept. Hope these html5 interview questions will help you fetch good news for yourself! Best of luck!

If you wish to learn more such concepts, you can join Great Learning Academy’s free online courses and upskill today!

This brings us to the end of the blog on HTML Interview Questions and HTML5 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. 

Avatar photo
Great Learning
Great Learning's Blog covers the latest developments and innovations in technology that can be leveraged to build rewarding careers. You'll find career guides, tech tutorials and industry news to keep yourself updated with the fast-changing world of tech and business.
Recommended for you

Leave a Comment

Your email address will not be published. Required fields are marked *

Great Learning Free Online Courses
Scroll to Top