HTML Interview Questions
HTML Interview Questions
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.
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:
In order to add a background image on an HTML element you need to use two
things:
Normally HTML comments are not being displayed in the browser. But these
comments can help to document the HTML source code.
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.
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:
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
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.
<!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>
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.
Li
HTML tables help web developers to set the data into rows and columns.
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>
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
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
Py
</body>
</html>
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>
<!DOCTYPE html>
<html>
Py
<body style="background-color:powderblue;">
</body>
</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
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.
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?
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
22. How to select multiple options from a drop down list in HTML?
fe
</select>
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
<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.
<!DOCTYPE html>
<html>
<head>
Py
<body>
<h1>Demo</h1>
<p style="text-align:center;">PythonLife</p>
</body>
</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>
fe
The HTML <button> tag is used to create a button in a website.
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
<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>
5 <option value="Apple">Apple</option>
6
7 </select>
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.
fe
36. How to change font in HTML?
● <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>
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>
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
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
HTML attributes help to provide the additional information about HTML elements.
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
To text bold in HTML, use the <b> </b> tag or <strong> </strong> tag.
Py
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>
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5
6 <header>
7 <b>hey</b>
8 </header>
9
10
11 </body>
12 </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>
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.
You can create a .png image and then use f the following snippets between the
<head> tags for the static HTML documents:
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?
● Step 1: Filter your HTML form requirements for your contact us web page.
Py
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>
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>
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>
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>
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.
To insert the copyright symbol you can use the “©” as well as “©” in the
HTML file.
<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.
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
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.
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>.
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.
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>
<datalist id=”BolActor”>
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.
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.
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.
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
The common doctype declaration for different version of HTML and XHTML are:
Py
“http://www.w3.org/TR/html4/transitional.dtd”>
“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
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Py
“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.
● 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
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 (;).
fe
a way to arrange web pages in well-mannered, well-structured using simple HTML
tags.
Li
Using Tables. Giving rows and column and assigning text to it
Page loading refers to how quickly your content is displayed when a user visits a
page on your site.
Cell Padding and Cell Spacing are the attributes of formatting a table basically sets
fe
the white spaces in your table.
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> </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:
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
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:
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>
The Head and Body tag of HTML have their own significance as below:
fe
Head Body
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:
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-
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.
versatile.
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
</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
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.
HTML5 has been gaining popularity in developing games too. The steps to make a
game in HTML5 are as follows-
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
43. What are some of the advantages of HTML5 over its previous
versions?
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>
Li
Attributes of progress tag are max and
value
on
46. Explain the concept of web storage in HTML5.
The disadvantage of a web worker is that it does not have access to the DOM of the
page that creates the web worker.
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>
Canvas.
Py
Canvas:
Uses JavaScript to draw graphics on a web page. A rectangular area, and you
control every pixel of it
Syntax
</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>
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
lineTo(x, y): Draws a line from the current drawing position to the position specified
Py
by x and y
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.
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>
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.
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?
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
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.
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
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.
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.
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
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
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
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.
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
fe
Normally HTML comments are not being displayed in the browser. But these
comments can help to document the HTML source code.
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
This is known as a non-breaking space because it helps to prevent a line break at its
Py
location.
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:
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.
Now put the text color of the <h1> element to red, and the text color of the <p>
th
element to blue:
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
<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>
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
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>
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
The HTML style attribute is the option to add styles to an element, like: Color, Font,
Py
<!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?
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
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
</body>
</html>
13. What is doctype in HTML?
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>
<!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”.
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.
fe
4. Insert the file path into your HTML code between the double quote marks
of the src=”” code.
<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
22. How to select multiple options from a drop down list in HTML?
fe
<label for="Fruit">Choose a Fruit:</label>
</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.
<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
HTML is used to make static web pages and HTML stands for markup language.
Py
<!DOCTYPE html>
<html>
<head>
<title>New HTML Document</title>
</head>
<body>
<h1>Demo</h1>
<p style="text-align:center;">PythonLife</p>
</body>
</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>
Li
The HTML <button> tag is used to create a button in a website.
on
28. How to add images 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
<u> tag is used for underline the text. The <u> tag was deprecated in HTML, but
then they re-introduced in HTML5.
fe
A fieldset is used to group related elements in a form. It is useful for creating
structures such as tables or grid layouts.
Li
<img> tag is used to insert an image in a web page.
on
36. How to change font in HTML?
● <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>
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>
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 <!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
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”
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>
To text bold in HTML, use the <b> </b> tag or <strong> </strong> tag.
fe
48. Who invented HTML?
Li
49. How to align the image in the center in HTML?
on
1 <img src="demo.jpg" alt="Paris" class="center">
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>
fe
The width and height attributes always define the width and height of the image in
pixels.
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.
You can create a .png image and then use f the following snippets between the
<head> tags for the static HTML documents:
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?
● 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!
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>
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>
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>
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>
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.
To insert the copyright symbol you can use the “©” as well as “©” in the
HTML file.
<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.
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
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.
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>.
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.
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>
<datalist id=”BolActor”>
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.
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.
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.
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
The common doctype declaration for different version of HTML and XHTML are:
Py
“http://www.w3.org/TR/html4/transitional.dtd”>
“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
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Py
“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.
● 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
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 (;).
fe
a way to arrange web pages in well-mannered, well-structured using simple HTML
tags.
Li
Using Tables. Giving rows and column and assigning text to it
Page loading refers to how quickly your content is displayed when a user visits a
page on your site.
Cell Padding and Cell Spacing are the attributes of formatting a table basically sets
fe
the white spaces in your table.
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> </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:
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
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:
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>
The Head and Body tag of HTML have their own significance as below:
fe
Head Body