HTML Interview Questions
Uploaded by
kunduruishwarya03HTML Interview Questions
Uploaded by
kunduruishwarya03HTML 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?
fe
<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
Li
<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.
on
<img> tag has two required parameters:
● src – The path to the image
● alt – An alternate text for the image
th
To insert a image in html you need to use img tag:
Py
<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?
fe
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
Li
matter how many times you have entered the space bar.
Now if you Type to force an extra space.
on
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?
th
Before start with how to link CSS with HTML,
Let’s have a look at: What is CSS?
Py
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.
fe
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:
Li
<h1 style="color:red;">A Blue Heading</h1>
on
<p style="color:blue;">A red paragraph.</p>
Internal CSS
th
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
Py
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
fe
each HTML page:
<!DOCTYPE html>
<html>
<head>
Li
<link rel="stylesheet" href="styles.css">
</head>
<body>
on
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
th
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Py
</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;
fe
The text-align property discusses the horizontal alignment of text in an element.
8. How to create a table in HTML?
Li
HTML tables help web developers to set the data into rows and columns.
The <table> tag is there in the HTML table.
on
Each table row can be defined with a <tr> tag.
Each header can be defined with a <th> tag.
th
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.
Py
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.
fe
● 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
Li
● Enter the filename and save your new PDF file in a desired location
10. How to change text color in HTML?
on
The HTML style attribute is the option to add styles to an element, like: Color, Font,
Size, and more.
th
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
Py
<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">
fe
<!-- The color attribute of font tag sets the color name 'orange'
for the word PythonLifet-->
<center>
<h1>
PythonLife
</h1>
</center>
</font>
</body>
Li
on
</html>
12. How to change background color in HTML?
th
<!DOCTYPE html>
<html>
Py
<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>
fe
<p style =
"font-family:georgia,garamond,serif;font-size:16px;font-style:ital
ic;">
This is sample doc
</p>
</body>
Li
on
</html>
15. How to add space using < pre > tag in HTML?
th
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”.
Py
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?
fe
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input
</form> Li
type="text" id="lname" name="lname">
on
19. How to create button in HTML?
<button type="button">Click Here!</button>
th
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.
Py
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>
fe
</select>
23. How to use div tag in html to divide the page?
Li
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:
on
1. open(<div>) and
2. closing (</div>) tag and it is mandatory to maintain the tag.
th
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.
Py
● 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>
fe
<div > div tag demo 3 </div>
<div > div tag demo 4 </div>
</body>
</html>
Li
on
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?
th
<!DOCTYPE html>
<html>
<head>
Py
<title>New HTML Document</title>
</head>
<body>
<h1>Demo</h1>
<p style="text-align:center;">PythonLife</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?
fe
The HTML <button> tag is used to create a button in a website.
28. How to add images in html?
Li
<img src="img.jpg" alt="Italian Trulli">
on
29. How to change button color in HTML?
<!DOCTYPE html>
<html>
<head>
th
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
Py
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>
fe
</html>
30. Which is better: HTML or HTML5?
Li
HTML5 is the newest version of HTML and it is better than HTML because it includes
on
new features like audio and video elements, new semantic elements, and support for
local storage.
31. How to create drop down list in HTML?
th
1 <label for="Fruits">Choose a Fruit:</label>
2
3 <select name="Fruits" id="cars">
4 <option value="Mango">Mango</option>
Py
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.
fe
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)”
Li
on
● <font color=”#00FF00″>
1 <!DOCTYPE html>
2 <html>
3 <head>
th
4 <title>
5 Example of color attribute
6 </title>
7 </head>
Py
8 <body>
9 <font color="orange">
10 <!-- The color attribute of font tag sets the color name
11 'orange' for the word PythonLifet-->
12 <center>
13 <h1>
14 PythonLife
15 </h1>
16 </center>
17 </font>
18 </body>
</html>
37. How to add a link in HTML?
To add links in html we use <a> and </a> tags, which are the tags used to define the
links. The <a> tag indicates where the hyperlink starts and the </a> tag indicates
where it ends. Whatever text gets added inside these tags, will work as a hyperlink.
Add the URL for the link in the <a href=” ”>.
38. What is HTML tags?
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Title of the document</title>
5 </head>
6 <body>
fe
7
8 <h1>This is a heading</h1>
9 <p>This is a paragraph.</p>
10
11
12
</body>
</html>
39. How to create a checkbox in HTML?
Li
on
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>
th
5 <input type="checkbox" id="car3" name="vehicle3"
6 value="Boat">
<label for="car3"> I have a BMW</label><br>
Py
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;
1 margin: 20px;
0 }
1 </style>
1 </head>
1 <body>
fe
2
1 <h2>Demonstrating the Box Model</h2>
3
1 <p>Hey, welcome to PythonLife.</p>
4
1
5
1
Li
<div>PythonLife Academy is an initiative taken by PythonLife,
where we are offering 1000+ hours of content across 80+ courses
in Data Science, Machine Learning, Artificial Intelligence,
on
6 Cloud Computing, Business, Digital Marketing, Big Data and many
1 more for free.</div>
7
1 </body>
8 </html>
1
th
9
2
0
2
Py
1
2
2
2
3
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;
1 }
0
1 div.ex2 {
1 background-color: lightblue;
1 width: 110px;
fe
2 height: 110px;
1 overflow: hidden;
3 }
1
4
1
5
1
div.ex3 {
Li
background-color: lightblue;
width: 110px;
height: 110px;
on
6 overflow: auto;
1 }
7
1 div.ex4 {
8 background-color: lightblue;
1 width: 110px;
th
9 height: 110px;
2 overflow: visible;
0 }
2 </style>
Py
1 </head>
2 <body>
2
2 <h1>Welcome to PythonLife</h1>
3
2
4
2 <h2>scroll:</h2>
5 <div class="ex1">PythonLife Academy is an initiative taken by
2 PythonLife, where we are offering 1000+ hours of content across
6 80+ courses in Data Science, Machine Learning, Artificial
2 Intelligence, Cloud Computing, Business, Digital Marketing, Big
7 Data and many more for free.</div>
</body>
2 </html>
8
2
9
3
0
3
1
3
2
3
3
3
4
fe
3
5
3
6
3
7
3
8
Li
on
3
9
4
0
4
1
th
4
2
4
3
Py
4
4
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>
fe
7 <h1 style="color:red;font-size:40px;">Heading</h1>
8
9 <p style="color:blue;font-size:18px;">Font size
10 demo</p>
</body>
</html>
Li
45. How to change color of text in HTML?
on
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
th
46. How to bold text in HTML?
To text bold in HTML, use the <b> </b> tag or <strong> </strong> tag.
Py
1 <b> hey, welcome to PythonLife!</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
10 href="mailto:[email protected]">[email protected]</a></p>
11 </footer>
fe
12
13 </body>
14 </html>
48. Who invented HTML?
The inventor of HTML Tim Berners-Lee.
Li
on
49. How to align the image in the center in HTML?
1 <img src="demo.jpg" alt="Paris" class="center">
th
50. How to create a hyperlink in HTML?
a hyperlink in an HTML page, use the <a> and </a> tags
Py
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?
fe
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? Li
on
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
th
55. What tag is used to add a video in HTML?
Py
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">
fe
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
7
8
<div class="centered">Middle</div>
</div>
Li
<div class="bottom-right"> Right</div>
on
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>
th
60. How to connect html to database with MySQL?
● Step 1: Filter your HTML form requirements for your contact us web page.
Py
● 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() {
fe
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
18
19
}
</script>
</body> Li
on
20 </html>
63. How to add video in HTML?
1 The HTML <video> element is used to show a video on a web
th
2 page.
3 <video width="320" height="240" controls>
4 <source src="movie.mp4" type="video/mp4">
5 <source src="movie.ogg" type="video/ogg">
6 Your browser does not support the video tag.
Py
</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= {
fe
12 center:new google.maps.LatLng(51.508742,-0.120850),
13 zoom:5,
14 };
15 var map = new
16
17
18
19
);
}
</script> Li
google.maps.Map(document.getElementById("googleMap"),mapProp
on
20
21 <script
22 src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&ca
llback=myMap"></script>
</body>
th
</html>
65. How to create registration form in HTML with database?
Py
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
6 style="font-size:18px">2017</span></li>
7 </ul>
8 </div>
9
10 <ul class="weekdays">
11 <li>Mo</li>
fe
12 <li>Tu</li>
13 <li>We</li>
14 <li>Th</li>
15 <li>Fr</li>
16
17
18
19
<li>Sa</li>
<li>Su</li>
</ul>
Li
on
20 <ul class="days">
21 <li>1</li>
22 <li>2</li>
23 <li>3</li>
24 <li>4</li>
25 <li>5</li>
th
26 <li>6</li>
27 <li>7</li>
28 <li>8</li>
29 <li>9</li>
Py
30 <li><span class="active">10</span></li>
31 <li>11</li>
</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 />
fe
12 <frame name = "bottompart" src =
13 "/html/bottom_frame.htm" />
14
15 <noframes>
16
17
18
19
</noframes>
</frameset> Li
<body>Hey PythonLife</body>
on
</html>
68. How to create a menu in HTML?
th
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width,
5 initial-scale=1">
Py
6 <style>
7 div {
8 width: 35px;
9 height: 5px;
10 background-color: black;
11 margin: 6px 0;
12 }
13 </style>
14 </head>
15 <body>
16
17 <p>Menu icon:</p>
18
19 <div></div>
20 <div></div>
21 <div></div>
22
23 </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.
fe
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>
Li
on
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
th
<h5> heading 5 </h5>
<h6> heading 6 </h6>
Py
71. How can you insert a copyright symbol in HTML webpage?
To insert the copyright symbol you can use the “©” as well as “©” 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?
fe
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.
Li
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
on
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?
th
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.
Py
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’
fe
attribute indicates the sections in the documents.
81. What is an image map?
Li
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.
on
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:
th
<label>
Enter your favorite Bollywood Actor: Press any character<br />
Py
<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”>
fe
</datalist>
</label>
Li
83. What is difference between HTML and XHTML?
on
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
th
● 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
Py
● 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?
fe
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
hexadecimal digits.
Li
character set. The non-ASCII characters can be replaced by “%” which is followed by
88. What are the different kinds of Doctypes available?
on
A document type declaration or doctype is actually an instruction that conveys to the
web browser what type of document it should expect.
th
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:
Py
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.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
fe
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.
Li
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
on
6. XHTML 1.0 Transitional: In XHTML 1.0 version Transitional document type
definition (DTD), allows deprecated elements.
th
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Py
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.
fe
1 <head>
2 <title>Charset HTML</title>
3 <meta charset="UTF-8">
4 </head>
Li
90. What is the advantage of collapsing white space?
White spaces are a sequence of blank space characters, treated as a single space
on
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.
th
● 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.
Py
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:
● – non-breaking space
● < – less than sign
● > – greater than sign
● & – ampersand (&)
● " – double quotation mark
● ' – single quotation mark
● ¢ – cent sign
● £ – 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
fe
a way to arrange web pages in well-mannered, well-structured using simple HTML
tags.
HTML Layout can be structured
Li
Using Tables. Giving rows and column and assigning text to it
Multiple Columns Layout using tables
on
Using DIV, SPAN tag
HTML Layout Elements: <header> to defines a header section for a document
th
<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
Py
,<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
fe
the white spaces in your table.
Cell Padding Cell Spacing
Li
on
Used to fix the width/space between Fixes the white space between the single
the border and its content cell, i.e., space between the edges and
adjacent cell
th
Syntax: Syntax:
<table cellpadding=”value” > <table cellspacing=”value” >
Py
….. …..
….. ……
</table> </table>
Here, cellpadding value specifies the Here, cellspacing value specifies the space
space between the border and its between adjacent cells
content
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>
fe
7 <td>abc</td>
8 <td>[email protected]</td>
9 </tr>
10 </table>
Li
95. In how many ways can we position an HTML element? Or what are
the permissible values of the position attribute?
on
To position an HTML element there are five different values:
● static.
● relative.
th
● fixed.
● absolute.
● sticky.
Py
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:
fe
Head Body
Describes the metadata or
information related to the document
Li
Describes the documents main content of an
HTML document
on
Head Tag contains the title for the Body tag contains all the contents of an HTML
document, and also other tags such document, defined using different tags such as
as scripts, styles, links, and meta. text, hyperlinks, images, tables, lists, etc.
th
98. Can we display a web page inside a web page or Is nesting of
webpages possible?
Py
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
fe
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
Li
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.
on
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
th
data in SQL databases
● Allowing offline editing
● Supporting Protocol and MIME handler registration simultaneously
● Encouragement of semantic(markup)
Py
●
● SEO semantic Coding: The fundamentals of semantic coding in SEO
fe
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? Li
on
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
th
versatile.
37. Explain the Drag and Drop concept of HTML5.
Py
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
fe
8 location.</p>
9 <button onclick="getLocation()"> My Location </button>
10 <p id="location"></p>
11 <script>
12
13
14
15
function getLocation() {
if (navigator.geolocation) { Li
var x = document.getElementById("location");
navigator.geolocation.getCurrentPosition(showPosition);
on
16 } else {
17 x.innerHTML = "Geolocation is not supported by this
18 browser.";
19 }
20 }
21 function showPosition(position) {
th
22 x.innerHTML = "At Latitude: " + position.coords.latitude +
23 "<br>At Longitude: " + position.coords.longitude;
24 }
25 </script>
Py
</body>
</html>
Output:
fe
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:
Li
● Go to Settings in browser(Google Chrome)
● Click on Content Settings as the next step, from there access Advanced
Settings option
on
● 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
th
Now, you won’t find Out of HTML5 Storage Space message anymore while
downloading a file using HTML5 downloader.
Py
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
fe
● 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.
Li
● Defining winning and losing conditions
● Adding sound and display messages
on
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
th
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
Py
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
fe
44. What are Semantic Elements?
Semantic element is that it clearly defines its meaning to the developer and the
browser.
Li
Examples of non-semantic elements do not convey anything about the content:
on
<div> and <span>
Examples of semantic elements conveys the meaning of the content to the browser
and developer: <form>, <table>, <header>, <article> etc.
th
Py
45. What is the difference between <meter> tag and <progress> tag?
<meter> <progress>
The meter tag describes a scale for A progress tag is used to specify a progress
measuring data within a defined range. bar that shows the progress of a task.
For example, usage of the disk, For example, form completion task, file
purpose of a query result, the upload progress, file download progress, etc
temperature of an object, etc on a website
fe
Syntax:<meter>….<meter> Syntax:<progress>….</progress>
Attributes of meter tag are: form, max,
min, high, low, optimum, value
Li
Attributes of progress tag are max and
value
on
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
th
multi-threading in your web applications
To create a web worker object use the new keyword:
Py
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>
fe
2 <body>
3 <div itemscope>
4 <p>My name is <span itemprop =
5 “name''>ABC</span>.</p>
6
7
8
9
</div>
<div itemscope>
Li
<p>My name is <span itemprop =
“name''>DEF</span>.</p>
on
10 </div>
</body>
</html>
48. Explain HTML5 Graphics.
th
There are the two type of graphics elements:
Canvas.
Py
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");
fe
4 ctx.fillStyle="#FF0000";
5 ctx.fillRect(60,60,120,80);
6 </script>
Has different context methods
Li
fillRect(x, y, width, height): Draw a filled rectangle.
on
strokeRect(x, y, width, height): Draw a rectangle outline only.
clearRect(x, y, width, height): Clears the specified rectangular area, making it fully
transparent
th
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
Py
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
fe
SVG: (predefined shape element)
SVG stands for Scalable Vector Graphics it defines vector-based graphics using
Li
HTML elements. SVG graphics do NOT lose any quality if they are zoomed or
resized
on
Syntax:
<svg width=”200″ height=”200″>
<circle cx=”60″ cy=”60″ r=”50″ stroke=”red” stroke-width=”5″ fill=”green” />
th
</svg>
49. Explain new input types provided by HTML5 for forms?
Py
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.
fe
The MathML can be used to describe Matrix form, Partial Differential Equation and
Chemical Reaction Equation.
Li
52. What are the server-sent events in HTML5?
HTML5 server-sent event is a feature that creates a unidirectional and constant
on
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
th
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
Py
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.
fe
● Send messages via the postMessage() function.
● Send AJAX requests using the XMLHttpRequest.
● Create timers using the setTimeout() and sendInterval() functions.
Li
54. What is the usage of a novalidate attribute for the form tag that is
introduced in HTML5?
on
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.
th
Syntax: <form novalidate>
55. What are raster images and vector images?
Py
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
fe
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
Li
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.
on
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
th
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
Py
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
HTML Interview Questions for Freshers
1. What is HTML?
The full form of HTML stands for Hypertext Markup Language and it also allows the
fe
user to create and structure sections, paragraphs, headings, links, and blockquotes
for web pages and applications.
2. How to insert an image in HTML?
Li
<img> tag is used to add an image in a web page.
on
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.
th
<img> tag has two required parameters:
● src – The path to the image
Py
● 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?
fe
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
Li
on
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.
th
Now if you Type to force an extra space.
This is known as a non-breaking space because it helps to prevent a line break at its
Py
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
fe
The most common and used way to add CSS, is to have the styles in external CSS
files.
Inline CSS
Li
An inline CSS can be used to apply a unique and also different style to a single
on
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>
th
element to blue:
<h1 style="color:red;">A Blue Heading</h1>
Py
<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>
fe
External CSS
Li
An external style sheet concept is normally used to define the style for many HTML
pages.
on
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>
th
<link rel="stylesheet" href="styles.css">
</head>
<body>
Py
<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;
fe
}
div.c {
text-align: justify;
}
Li
The text-align property discusses the horizontal alignment of text in an element.
on
8. How to create a table in HTML?
HTML tables help web developers to set the data into rows and columns.
th
The <table> tag is there in the HTML table.
Each table row can be defined with a <tr> tag.
Py
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>
fe
</table>
9. How to convert HTML to PDF?
Li
If you are working in a Windows system then open an HTML web page in Internet
Explorer, Google Chrome or Firefox.
on
● 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
th
10. How to change text color in HTML?
The HTML style attribute is the option to add styles to an element, like: Color, Font,
Py
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>
fe
<title>
Example of color attribute
</title>
</head>
<body>
<font color="orange">
Li
<!-- The color attribute of font tag sets the color name 'orange'
for the word PythonLifet-->
on
<center>
<h1>
PythonLife
</h1>
</center>
</font>
th
</body>
</html>
Py
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>
fe
<title>HTML Font</title>
</head>
<body>
<h1>Our Products</h1>
<p style =
Li
"font-family:georgia,garamond,serif;font-size:16px;font-style:ital
ic;">
on
This is sample doc
</p>
</body>
th
</html>
15. How to add space using < pre > tag in HTML?
Py
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.
fe
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
Li
for="fname">First name:</label><br>
on
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
th
19. How to create button in HTML?
<button type="button">Click Here!</button>
Py
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?
fe
<label for="Fruit">Choose a Fruit:</label>
<select name="Fruit" id="Fruit">
<option value="Mango">Mango</option>
<option value="Lichhi">Licchi</option>
</select>
Li
on
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:
th
1. open(<div>) and
2. closing (</div>) tag and it is mandatory to maintain the tag.
Py
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>
fe
</head>
<body>
<div
<div
<div
<div
>
>
>
>
div
div
div
div
tag demo 1
Li
</div>
tag demo 2 </div>
tag demo 3 </div>
tag demo 4 </div>
on
</body>
</html>
th
24. What is HTML used for?
HTML is used to make static web pages and HTML stands for markup language.
Py
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;">PythonLife</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>
fe
</html>
27. What tag is used to create button in HTML?
Li
The HTML <button> tag is used to create a button in a website.
on
28. How to add images in html?
<img src="img.jpg" alt="Italian Trulli">
th
29. How to change button color in HTML?
<!DOCTYPE html>
<html>
Py
<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>
fe
<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> Li
on
30. Which is better: HTML or HTML5?
th
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.
Py
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?
fe
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?
Li
<img> tag is used to insert an image in a web page.
on
36. How to change font in HTML?
<font> tag,is used to specify the text color.
th
● <font Color=”Blue”>
● <font color=”rgb(128,128,0)”
● <font color=”#00FF00″>
Py
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
11 'orange' for the word PythonLifet-->
12 <center>
13 <h1>
14 PythonLife
fe
15 </h1>
16 </center>
17 </font>
18 </body>
</html>
37. How to add a link in HTML? Li
on
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=” ”>.
th
38. What is HTML tags?
1 <!DOCTYPE html>
Py
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"
6 value="Boat">
<label for="car3"> I have a BMW</label><br>
40. How to create a box in HTML?
1 <!DOCTYPE html>
2 <html>
3 <head>
fe
4 <style>
5 div {
6 background-color: lightgrey;
7 width: 300px;
8
9
1
0 }
border: 15px solid green;
padding: 50px;
margin: 20px;
Li
on
1 </style>
1 </head>
1 <body>
2
1 <h2>Demonstrating the Box Model</h2>
3
th
1 <p>Hey, welcome to PythonLife.</p>
4
1 <div>PythonLife Academy is an initiative taken by PythonLife,
5 where we are offering 1000+ hours of content across 80+ courses
Py
1 in Data Science, Machine Learning, Artificial Intelligence,
6 Cloud Computing, Business, Digital Marketing, Big Data and many
1 more for free.</div>
7
1 </body>
8 </html>
1
9
2
0
2
1
2
2
2
3
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;
fe
9 overflow: scroll;
1 }
0
1 div.ex2 {
1
1
2
1
width: 110px;
height: 110px;
overflow: hidden;
Li
background-color: lightblue;
on
3 }
1
4 div.ex3 {
1 background-color: lightblue;
5 width: 110px;
1 height: 110px;
th
6 overflow: auto;
1 }
7
1 div.ex4 {
Py
8 background-color: lightblue;
1 width: 110px;
9 height: 110px;
2 overflow: visible;
0 }
2 </style>
1 </head>
2 <body>
2
2 <h1>Welcome to PythonLife</h1>
3
2
4
<h2>scroll:</h2>
2 <div class="ex1">PythonLife Academy is an initiative taken by
5 PythonLife, where we are offering 1000+ hours of content across
2 80+ courses in Data Science, Machine Learning, Artificial
6 Intelligence, Cloud Computing, Business, Digital Marketing, Big
2 Data and many more for free.</div>
7 </body>
2 </html>
8
2
9
3
0
3
1
fe
3
2
3
3
3
4
3
5
Li
on
3
6
3
7
3
8
th
3
9
4
0
Py
4
1
4
2
4
3
4
4
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?
fe
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Demo HTML font size</title>
5
6
7
8
</head>
<body>
Li
<h1 style="color:red;font-size:40px;">Heading</h1>
on
9 <p style="color:blue;font-size:18px;">Font size
10 demo</p>
</body>
</html>
45. How to change color of text in HTML?
th
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
Py
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 PythonLife!</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
10 href="mailto:[email protected]">[email protected]</a></p>
11 </footer>
12
13 </body>
14 </html>
fe
48. Who invented HTML?
The inventor of HTML Tim Berners-Lee.
Li
49. How to align the image in the center in HTML?
on
1 <img src="demo.jpg" alt="Paris" class="center">
50. How to create a hyperlink in HTML?
th
a hyperlink in an HTML page, use the <a> and </a> tags
51. How do add a header in HTML?
Py
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;">
fe
The width and height attributes always define the width and height of the image in
pixels.
54. Why do we use doctype in HTML?
Li
Doctype is used for Document Type Declaration and also It informs the web
on
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?
th
The HTML <video> element is used to show a video on a web page.
Py
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>
fe
6 <div class="bottom-right"> Right</div>
7 <div class="centered">Middle</div>
8 </div>
1 Li
59. How to create a popup in html with CSS?
<div class="popup" onclick="myFunction()">Click me!
on
2 <span class="popuptext" id="NewPopup">Your text</span>
3 </div>
60. How to connect html to database with MySQL?
th
● 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
Py
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() {
fe
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
18
19
}
</script>
</body> Li
on
20 </html>
63. How to add video in HTML?
1 The HTML <video> element is used to show a video on a web
th
2 page.
3 <video width="320" height="240" controls>
4 <source src="movie.mp4" type="video/mp4">
5 <source src="movie.ogg" type="video/ogg">
6 Your browser does not support the video tag.
Py
</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= {
fe
12 center:new google.maps.LatLng(51.508742,-0.120850),
13 zoom:5,
14 };
15 var map = new
16
17
18
19
);
}
</script> Li
google.maps.Map(document.getElementById("googleMap"),mapProp
on
20
21 <script
22 src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&ca
llback=myMap"></script>
</body>
th
</html>
65. How to create registration form in HTML with database?
Py
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
6 style="font-size:18px">2017</span></li>
7 </ul>
8 </div>
9
10 <ul class="weekdays">
11 <li>Mo</li>
fe
12 <li>Tu</li>
13 <li>We</li>
14 <li>Th</li>
15 <li>Fr</li>
16
17
18
19
<li>Sa</li>
<li>Su</li>
</ul>
Li
on
20 <ul class="days">
21 <li>1</li>
22 <li>2</li>
23 <li>3</li>
24 <li>4</li>
25 <li>5</li>
th
26 <li>6</li>
27 <li>7</li>
28 <li>8</li>
29 <li>9</li>
Py
30 <li><span class="active">10</span></li>
31 <li>11</li>
</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 />
fe
12 <frame name = "bottompart" src =
13 "/html/bottom_frame.htm" />
14
15 <noframes>
16
17
18
19
</noframes>
</frameset> Li
<body>Hey PythonLife</body>
on
</html>
68. How to create a menu in HTML?
th
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width,
5 initial-scale=1">
Py
6 <style>
7 div {
8 width: 35px;
9 height: 5px;
10 background-color: black;
11 margin: 6px 0;
12 }
13 </style>
14 </head>
15 <body>
16
17 <p>Menu icon:</p>
18
19 <div></div>
20 <div></div>
21 <div></div>
22
23 </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.
fe
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>
Li
on
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
th
<h5> heading 5 </h5>
<h6> heading 6 </h6>
Py
71. How can you insert a copyright symbol in HTML webpage?
To insert the copyright symbol you can use the “©” as well as “©” 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?
fe
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.
Li
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
on
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?
th
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.
Py
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’
fe
attribute indicates the sections in the documents.
81. What is an image map?
Li
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.
on
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:
th
<label>
Enter your favorite Bollywood Actor: Press any character<br />
Py
<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”>
fe
</datalist>
</label>
Li
83. What is difference between HTML and XHTML?
on
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
th
● 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
Py
● 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?
fe
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
hexadecimal digits.
Li
character set. The non-ASCII characters can be replaced by “%” which is followed by
88. What are the different kinds of Doctypes available?
on
A document type declaration or doctype is actually an instruction that conveys to the
web browser what type of document it should expect.
th
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:
Py
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.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
fe
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.
Li
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
on
6. XHTML 1.0 Transitional: In XHTML 1.0 version Transitional document type
definition (DTD), allows deprecated elements.
th
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Py
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.
fe
1 <head>
2 <title>Charset HTML</title>
3 <meta charset="UTF-8">
4 </head>
Li
90. What is the advantage of collapsing white space?
White spaces are a sequence of blank space characters, treated as a single space
on
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.
th
● 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.
Py
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:
● – non-breaking space
● < – less than sign
● > – greater than sign
● & – ampersand (&)
● " – double quotation mark
● ' – single quotation mark
● ¢ – cent sign
● £ – 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
fe
a way to arrange web pages in well-mannered, well-structured using simple HTML
tags.
HTML Layout can be structured
Li
Using Tables. Giving rows and column and assigning text to it
Multiple Columns Layout using tables
on
Using DIV, SPAN tag
HTML Layout Elements: <header> to defines a header section for a document
th
<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
Py
,<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
fe
the white spaces in your table.
Cell Padding Cell Spacing
Li
on
Used to fix the width/space between Fixes the white space between the single
the border and its content cell, i.e., space between the edges and
adjacent cell
th
Syntax: Syntax:
<table cellpadding=”value” > <table cellspacing=”value” >
Py
….. …..
….. ……
</table> </table>
Here, cellpadding value specifies the Here, cellspacing value specifies the space
space between the border and its between adjacent cells
content
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>
fe
7 <td>abc</td>
8 <td>[email protected]</td>
9 </tr>
10 </table>
Li
95. In how many ways can we position an HTML element? Or what are
the permissible values of the position attribute?
on
To position an HTML element there are five different values:
● static.
● relative.
th
● fixed.
● absolute.
● sticky.
Py
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:
fe
Head Body
Describes the metadata or
information related to the document
Li
Describes the documents main content of an
HTML document
on
Head Tag contains the title for the Body tag contains all the contents of an HTML
document, and also other tags such document, defined using different tags such as
as scripts, styles, links, and meta. text, hyperlinks, images, tables, lists, etc.
th
98. Can we display a web page inside a web page or Is nesting of
webpages possible?
Py
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.
● New, easy to implement elements and attributes
● WebSocket
● Server-sent events
You might also like
- Interview Questions and HTML5 Interview Questions in 2023No ratings yetInterview Questions and HTML5 Interview Questions in 202358 pages
- Handout HTML Css Hamburg Coding School 2022No ratings yetHandout HTML Css Hamburg Coding School 202236 pages
- Introduction To HTML For Beginners - , Covers HTML5, CSS3, Beginner - S Guide, 1edNo ratings yetIntroduction To HTML For Beginners - , Covers HTML5, CSS3, Beginner - S Guide, 1ed80 pages
- How To Create A Simple Web Page With HTML - 9 Steps (With Pictures)No ratings yetHow To Create A Simple Web Page With HTML - 9 Steps (With Pictures)6 pages
- HTML Interview Questions & HTML5 Interview Questions in 2021No ratings yetHTML Interview Questions & HTML5 Interview Questions in 202193 pages
- Simple HTML Document: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yetSimple HTML Document: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML17 pages
- The Practical Programmer's Guide To HTML & CSSNo ratings yetThe Practical Programmer's Guide To HTML & CSS128 pages
- What Is HTML?: Emphasised Text. This Is A Heading This Is A SubheadingNo ratings yetWhat Is HTML?: Emphasised Text. This Is A Heading This Is A Subheading6 pages
- Csswizardry - Harry Roberts - Resource HintsNo ratings yetCsswizardry - Harry Roberts - Resource Hints158 pages
- AccountStatement - 10-07-2024 12 - 46 - 47No ratings yetAccountStatement - 10-07-2024 12 - 46 - 4710 pages
- Electronic Business: By: Avreen Bajwa Ravinder PreetNo ratings yetElectronic Business: By: Avreen Bajwa Ravinder Preet13 pages
- Data Security Standard: Payment Card Industry (PCI)No ratings yetData Security Standard: Payment Card Industry (PCI)8 pages
- Senior Web Designer Front-End Development (html5/css3) : DesignationNo ratings yetSenior Web Designer Front-End Development (html5/css3) : Designation3 pages
- Shorouq Al Mamlakah International School: High School Department First Term Examination SY 2021-2022 Computer 11No ratings yetShorouq Al Mamlakah International School: High School Department First Term Examination SY 2021-2022 Computer 113 pages
