0% found this document useful (0 votes)
44 views

Interview Questions and HTML5 Interview Questions in 2023

The document provides HTML interview questions and answers for freshers and advanced users. It covers topics like HTML basics, inserting images and background images, commenting, adding spaces, linking CSS, text formatting and alignment, tables, forms, buttons, and more.

Uploaded by

Ritesh Mandrile
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
44 views

Interview Questions and HTML5 Interview Questions in 2023

The document provides HTML interview questions and answers for freshers and advanced users. It covers topics like HTML basics, inserting images and background images, commenting, adding spaces, linking CSS, text formatting and alignment, tables, forms, buttons, and more.

Uploaded by

Ritesh Mandrile
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

Let’s get started!

HTML Interview Questions for Freshers


HTML Interview Questions for Advanced
HTML5 Interview Questions

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:
3.

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

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

1 <label for="Fruits">Choose a Fruit:</label>


2
3 <select name="Fruits" id="cars">
4 <option value="Mango">Mango</option>
5 <option value="Apple">Apple</option>
6
7 </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″>

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>
5 Example of color attribute
6 </title>
7 </head>
8 <body>
9 <font color="orange">
10 <!-- The color attribute of font tag sets the color name 'orange' for the word
11 <center>
12 <h1>
13 Great Learning
14 </h1>
15 </center>
16 </font>
17 </body>
18 </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?

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Title of the document</title>
5 </head>
6 <body>
7
8 <h1>This is a heading</h1>
9 <p>This is a paragraph.</p>
10
11 </body>
12 </html>

39. How to create a checkbox in HTML?

1 <input type="checkbox" id="car" name="vehicle1" value="Bike">


2 <label for="car1"> I have a Alto</label><br>
3 <input type="checkbox" id="car2" name="vehicle2" value="Car">
4 <label for="car2"> I have an Audi</label><br>
5 <input type="checkbox" id="car3" name="vehicle3" value="Boat">
6 <label for="car3"> I have a BMW</label><br>

40. How to create a box in HTML?

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div {
6 background-color: lightgrey;
7 width: 300px;
8 border: 15px solid green;
9 padding: 50px;
10 margin: 20px;
11 }
12 </style>
13 </head>
14 <body>
15
16 <h2>Demonstrating the Box Model</h2>
17
18 <p>Hey, welcome to Great Learning.</p>
19
20 <div><a href="https://www.mygreatlearning.com/academy" data-internallinksmanage
21
22 </body>
23 </html>

41. How to add a scroll bar in HTML?

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div.ex1 {
6 background-color: lightblue;
7 width: 110px;
8 height: 110px;
9 overflow: scroll;
10 }
11
12 div.ex2 {
13 background-color: lightblue;
14 width: 110px;
15 height: 110px;
16 overflow: hidden;
17 }
18
19 div.ex3 {
20 background-color: lightblue;
21 width: 110px;
22 height: 110px;
23 overflow: auto;
24 }
25
26 div.ex4 {
27 background-color: lightblue;
28 width: 110px;
29 height: 110px;
30 overflow: visible;
31 }
32 </style>
33 </head>
34 <body>
35
36 <h1>Welcome to great learning</h1>
37
38
39
40 <h2>scroll:</h2>
41 <div class="ex1">Great Learning Academy is an initiative taken by Great Learnin
42 </body>
43 </html>
44

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?

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

44. How to change font size in HTML?

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Demo HTML font size</title>
5 </head>
6 <body>
7 <h1 style="color:red;font-size:40px;">Heading</h1>
8 <p style="color:blue;font-size:18px;">Font size demo</p>
9 </body>
10 </html>
45. How to change color of text in HTML?

1 <p style="color:red">This is a demo</p>


2 <p style="color:blue">This is another demo</p>
3 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.

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

47. How to add a footer in HTML?

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1>The footer element</h1>
6
7 <footer>
8 <p>demo of footer<br>
9 <a href="mailto:[email protected]">[email protected]</a></p>
10 </footer>
11
12 </body>
13 </html>
14

48. Who invented HTML?

The inventor of HTML Tim Berners-Lee.

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

1 <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?

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5
6 <header>
7 <b>hey</b>
8 </header>
9
10
11 </body>
12 </html>

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

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

53. How to change image size in HTML?

1 <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:

1 <link rel="icon" type="image/png" href="/favicon.png"/>


2 <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?

1 <div class="container">
2 <img src="img_snow.jpg" alt="Snow" style="width:100%;">
3 <div class="bottom-left">Left</div>
4 <div class="top-left">Up Left</div>
5 <div class="top-right">Up Right</div>
6 <div class="bottom-right"> Right</div>
7 <div class="centered">Middle</div>
8 </div>

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

1 <div class="popup" onclick="myFunction()">Click me!


2 <span class="popuptext" id="NewPopup">Your text</span>
3 </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?

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5
6
7 <button onclick=”CalenderFunction()">Put the date</button>
8
9
10 <script>
11 function CalenderFunction()n() {
12 var x = document.createElement("INPUT");
13 x.setAttribute("type", "date");
14 x.setAttribute("value", "2014-02-09");
15 document.body.appendChild(x);
16 }
17 </script>
18
19 </body>
20 </html>

63. How to add video in HTML?

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


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

64. How to add google map in HTML?

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1> Google Map</h1>
6
7 <div id="googleMap" style="width:100%;height:400px;"></div>
8
9 <script>
10 function myMap() {
11 var mapProp= {
12 center:new google.maps.LatLng(51.508742,-0.120850),
13 zoom:5,
14 };
15 var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
16 }
17 </script>
18
19 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMa
20
21 </body>
22 </html>

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

1 <form>
2 <label for="fname">First name:</label><br>
3 <input type="text" id="fname" name="fname"><br>
4 <label for="lname">Last name:</label><br>
5 <input type="text" id="lname" name="lname">
6 </form>

66. How to create a dynamic calendar in HTML?

1 <div class="month">
2 <ul>
3 <li class="prev">❮</li>
4 <li class="next">❯</li>
5 <li>August<br><span style="font-size:18px">2017</span></li>
6 </ul>
7 </div>
8
9 <ul class="weekdays">
10 <li>Mo</li>
11 <li>Tu</li>
12 <li>We</li>
13 <li>Th</li>
14 <li>Fr</li>
15 <li>Sa</li>
16 <li>Su</li>
17 </ul>
18
19 <ul class="days">
20 <li>1</li>
21 <li>2</li>
22 <li>3</li>
23 <li>4</li>
24 <li>5</li>
25 <li>6</li>
26 <li>7</li>
27 <li>8</li>
28 <li>9</li>
29 <li><span class="active">10</span></li>
30 <li>11</li>
31 </ul>

67. How to create frames in HTML?

1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>HTML Demp Frames</title>
6 </head>
7
8 <frameset rows = "10%,80%,10%">
9 <frame name = "top1" src = "/html/top_frame.htm" />
10 <frame name = "mainframe" src = "/html/main_frame.htm" />
11 <frame name = "bottompart" src = "/html/bottom_frame.htm" />
12
13 <noframes>
14 <body>Hey Great Learning</body>
15 </noframes>
16
17 </frameset>
18
19 </html>

68. How to create a menu in HTML?

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 div {
7 width: 35px;
8 height: 5px;
9 background-color: black;
10 margin: 6px 0;
11 }
12 </style>
13 </head>
14 <body>
15
16 <p>Menu icon:</p>
17
18 <div></div>
19 <div></div>
20 <div></div>
21
22 </body>
23 </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>

71. How can you insert a copyright symbol in HTML webpage?

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

3. 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”>

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

Interview Questions Articles Interview Questions


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
Table of contents

5. 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”>

6. 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”>

7. 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”>

8. 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.

1 <head>
2 <title>Charset HTML</title>
3 <meta charset="UTF-8">
4 </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 Padding Cell Spacing

Used to fix the width/space between the Fixes the white space between the single cell, i.e.,
border and its content space between the edges and adjacent cell

Syntax: Syntax:
<table cellpadding=”value” > <table cellspacing=”value” >
….. …..
….. ……
</table> </table>
Here, cellpadding value specifies the space Here, cellspacing value specifies the space
between the border and its content between adjacent cells

The default cellpadding value is 1 The default cell spacing value is 2

Example:

1 <table border="2" cellpadding="2" cellspacing="10">


2 <thead>
3 <td><span>Name</span></td>
4 <td><span>Email Id</span></td>
5 </thead>
6 <tr>
7 <td>abc</td>
8 <td>[email protected]</td>
9 </tr>
10 </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.
2. 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:

Head Body

Describes the metadata or information Describes the documents main content of an HTML
related to the document document

Head Tag contains the title for the Body tag contains all the contents of an HTML
document, and also other tags such as document, defined using different tags such as text,
scripts, styles, links, and meta. 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:

1 <!DOCTYPE HTML>
2 <html lang = "en">
3 <head>
4 <!-- basic.html -->
5 <title>basic.html</title>
6 <meta charset = "UTF-8" />
7 </head>
8 <body>
9 <h1> Sample</h1>
10 <p>
11 This is a sample code.
12 It teaches how to code in HTML5
13 </p>
14 </body>
15 </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

19. How to link CSS to 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-

1 <!DOCTYPE html>
2 <html lang = "en-US">
3 <head>
4 <meta charset = "UTF-8">
5 <title>CSSlink.html</title>
6 <link rel = "stylesheet"
7 type = "text/css"
8 href = "MyStyle.css" />
9 </head>
10 <body>
11 <h1>External Style Sheet</h1>
12 <p>
13 This sheet contains a style set for headings, body and paragraphs. This sheet
14 </p>
15 </body>
16 </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

1 <!DOCTYPE HTML>
2
3 <html>
4 <head>
5 <title> Center text</title>
6 </head>
7 <body>
8 <p style="text-align: center">Hello World!</p>
9 </body>
10
11 </html>
Centering a block using CSS margin alignment property

1 T.blocktext {
2 margin-left: auto; // setting left and right margins to auto places
3 margin-right: auto;
4 width: 10cm
5 }
6 ...
7 <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:

1 <!DOCTYPE HTML>
2
3 <html>
4 <head>
5 <title> Centering an image </title>
6 </head>
7 <body>
8 <p style="text-align:center;"><img src="C:\Users\Lenovo\Desktop\great-lea
9 </body>
10 </html>

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

1 IMG.DisplayLogo
2 {
3 display: block;
4 margin-left: auto;
5 margin-right: auto;
6 }
7 ...
8 <IMG class="DisplayLogo" src=" C:\Users\Lenovo\Desktop\great-learning-logo.png "

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:

1 <!DOCTYPE HTML>
2
3 <html>
4 <head>
5 <title> Canvas usage </title>
6 <style>
7 #mycanvas{border:5px solid green;}
8 </style>
9 </head>
10
11 <body>
12 <canvas id = "mycancvas" width = "100" height = "200"></canvas>
13 </body>
14 </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.

28. Which HTML5 tag would you use to define footer?


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

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> footer example</title>
5 </head>
6 <body>
7 <p> The part below this paragraph is the footer section of this page. Hop
8 Happy learning! </p>
9 <footer>
10 <div class="column">
11 <p>Company Info</p>
12 <ul style="list-style-type:disc">
13 <li>About Us</li>
14 <li>Terms & Conditions</li>
15 <li>Contact Us</li>
16 </ul>
17 </div>
18 </footer>
19 </body>
20 </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:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Table</title>
5 </head>
6 <body>
7 <table border = "2">
8 <tr>
9 <td>row1,cell1</td>
10 <td>row1,cell2</td>
11 </tr>
12 <tr>
13 <td>row2,cell1</td>
14 <td>row2,cell2</td>
15 </tr>
16 </body>
17 </html>
18 <!DOCTYPE html>
19 <html>
20 <head>
21 <title>Table</title>
22 </head>
23 <body>
24 <table border = "2">
25 <tr>
26 <td>row1,cell1</td>
27 <td>row1,cell2</td>
28 </tr>
29 <tr>
30 <td>row2,cell1</td>
31 <td>row2,cell2</td>
32 </tr>
33 </body>
34 </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:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> article example</title>
5 </head>
6 <body>
7 < article class = ‘OurCourses’>
8 <h1>We provide following courses</h1>
9 <article class = ‘Courses’>
10 <h2> HTML5</h2>
11 <p>HTML5 is a mark-up language</p>
12 </article class = ‘Courses’>
13 <article>
14 <h2>Python</h2>
15 <p>Python is a programming language</p>
16 </article>
17 </article>
18 </body>
19 </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:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> location page</title>
5 </head>
6 <body>
7 <p>Click The My Location Button given below to get your location.</p>
8 <button onclick="getLocation()"> My Location </button>
9 <p id="location"></p>
10 <script>
11 var x = document.getElementById("location");
12 function getLocation() {
13 if (navigator.geolocation) {
14 navigator.geolocation.getCurrentPosition(showPosition);
15 } else {
16 x.innerHTML = "Geolocation is not supported by this browser.";
17 }
18 }
19 function showPosition(position) {
20 x.innerHTML = "At Latitude: " + position.coords.latitude +
21 "<br>At Longitude: " + position.coords.longitude;
22 }
23 </script>
24 </body>
25 </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 A progress tag is used to specify a progress bar
data within a defined range. that shows the progress of a task.

For example, usage of the disk, purpose of a For example, form completion task, file upload
query result, the temperature of an object, etc progress, file download progress, etc on a website

Syntax:<meter>….<meter> Syntax:<progress>….</progress>

Attributes of meter tag are: form, max, min,


Attributes of progress tag are max and value
high, low, optimum, 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:

1 <html>
2 <body>
3 <div itemscope>
4 <p>My name is <span itemprop = “name''>ABC</span>.</p>
5 </div>
6 <div itemscope>
7 <p>My name is <span itemprop = “name''>DEF</span>.</p>
8 </div>
9 </body>
10 </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:

1 <script type="text/javascript">
2 var c=document.getElementById("myCan");
3 var ctx=c.getContext("2d");
4 ctx.fillStyle="#FF0000";
5 ctx.fillRect(60,60,120,80);
6 </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.

Sharing is caring:

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

You might also like