Scribd
Upload
12 views

HTML

Hii

Uploaded by

Bahadure Ashish
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

HTML

Hii

Uploaded by

Bahadure Ashish
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Interview Questions and Answers - HTML

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.
For example, content could be structured within a set of paragraphs, a list of bulleted points, or using
images and data tables. As the title suggests, this article will give you a basic understanding of HTML and
its functions.

1. What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.

A Simple HTML Document


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Interview Questions & Answers - HTML">
<title>Interview Questions & Answers - HTML</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

<script src="./script.js"></script>
</body>
</html>
Where,

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

2. What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
Interview Questions and Answers - HTML

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

3. What are HTML Attributes

HTML attributes provide additional information about HTML elements.

1. All HTML elements can have attributes


2. Attributes provide additional information about elements
3. Attributes are always specified in the start tag
4. Attributes usually come in name/value pairs like: name="value"

<a href="https://www.skillsafari.in">Visit SkillSafari!</a>


<img src="demo_image.jpg" width="500" height="600">

href, src, width, height are attributes.

4. Are the HTML tags and elements the same thing?

No. HTML elements are defined by a starting tag, may contain some content and a closing tag. For example,
<h1>Heading 1</h1> is a HTML element but just <h1> is a starting tag and </h1> is a closing tag.

5. What are tags and attributes in HTML?

Tags are the primary component of the HTML that defines how the content will be structured/ formatted,
whereas Attributes are used along with the HTML tags to define the characteristics of the element. For
example, <p align=” center”>Interview questions</p>, in this the ‘align’ is the attribute using which we
will align the paragraph to show in the center of the view.

6. What are void elements in HTML?

HTML elements which do not have closing tags or do not need to be closed are Void elements. For
Example: <br />, <img />, <hr />, etc.

7. What is the advantage of collapsing white space?

In HTML, a blank sequence of whitespace characters is treated as a single space character, Because the
browser collapses multiple spaces into a single space character and this helps a developer to indent lines of
text without worrying about multiple spaces and maintain readability and understand ability of HTML
codes.

8. What are HTML Entities?

In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in our webpage we
need to use the character entities called HTML Entities. Below are few mapping between the reserved
character and its respective entity character to be used.
Interview Questions and Answers - HTML

Character Entity Name Entity Number


< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
(non-breaking space) Eg. 10 PM &nbsp; Eg. <p>10&nbsp&nbspPM</p> &#160;

9. What are different types of lists in HTML?

HTML lists allow to group a set of related items in lists. The following are different types of lists in HTML

 Definition List - <dl><dt></dt><dd></dd></dl>


 Ordered List - <ol><li></li></ol>
 UnOrdered List - <ul><li></li></ul>

<body>

<h1>Definition List (dl, dt, dd)</h1>


<p>Used mostly for Table of Contents.</p>
<dl>
<dt>This is Definition Title</dt>
<dd>This is Definition Description</dd>
</dl>
<dl>
<dt>What is HTML?</dt>
<dd>HTML stands for Hyper Text Markup Language. </dd>
</dl>
<hr>
<h1>Ordered List (ol, li)</h1>
<p>Used for Numbering Items.</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</ol>
<hr>
<h1>UnOrdered List (ul, li)</h1>
<p>Used for Bullet points.</p>
<ul>
<li>JavaScript</li>
<li>React</li>
<li>Node</li>
</ul>
<hr>
<h1>Mixed Items</h1>
<ol>
<li>Programming Languages:</li>
<ul>
<li>C</li>
Interview Questions and Answers - HTML

<li>C++</li>
<li>Java</li>
</ul>
<li>Scritping Languages:</li>
<ul>
<li>JavaScript</li>
<li>Python</li>
</ul>
</ol>
</body>
Interview Questions and Answers - HTML

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

The class attribute is used to specify the class name for an HTML element. Multiple elements in HTML
can have the same class value. Also, it is mainly used to associate the styles written in the stylesheet with
the HTML elements.

11. What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?

Multiple elements in HTML can have the same class value, whereas a value of id attribute of one element
cannot be associated with another HTML element.

12. Define multipart form data?

Multipart form data is one of the values of the enctype attribute. It is used to send the file data to the
server-side for processing. The other valid values of the enctype attribute are text/plain and application/x-
www-form-urlencoded.

13. Describe HTML layout structure.

Every web page has different components to display the intended content and a specific UI. But still,
there are few things which are templated and are globally accepted way to structure the web page, such
as:

1. <header>: Stores the starting information about the web page.


2. <footer>: Represents the last section of the page.
3. <nav>: The navigation menu of the HTML page.
4. <article>: It is a set of information.
5. <section>: It is used inside the article block to define the basic structure of a page.
6. <aside>: Sidebar content of the page.

14. How to optimize website assets loading?

To optimize website load time we need to optimize its asset loading and for that:

1. CDN hosting - A CDN or content delivery network is geographically distributed servers to help
reduce latency.
2. File compression - This is a method that helps to reduce the size of an asset to reduce the data
transfer
3. File concatenation - This reduces the number of HTTP calls
4. Minify scripts - This reduces the overall file size of js and CSS files
5. Parallel downloads - Hosting assets in multiple subdomains can help to bypass the download
limit of 6 assets per domain of all modern browsers. This can be configured but most general
users never modify these settings.
6. Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be loaded on a
need basis.

15. What are the various formatting tags in HTML?

HTML has various formatting tags:

1. <b> - makes text bold


Interview Questions and Answers - HTML

2. <i> - makes text italic


3. <em> - makes text italic but with added semantics importance
4. <big> - increases the font size of the text by one unit
5. <small> - decreases the font size of the text by one unit
6. <sub> - makes the text a subscript
7. <sup> - makes the text a superscript
8. <del> - displays as strike out text
9. <strong> - marks the text as important
10. <mark> - highlights the text
11. <ins> - displays as added text

16. What is the difference between <strong>, <b> tags and <em>, <i> tags?

The effect on a normal webpage of the tags <strong>, <b> and <em>, <i> is the same. <b> and <i> tags
stand for bold and italic. These two tags only apply font styling and bold tag <b>, just adds more ink to
the text, these tags don't say anything about the text.

Whereas, <strong> and <em> tags represent that the span of text is of strong importance or more
importance and emphatic stress respectively than the rest of the text. These tags have semantic meaning.

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

<head> tag provides the information about the document. It should always be enclosed in the <html> tag.
This tag contains the metadata about the webpage and the tags which are enclosed by head tag like
<link>, <meta>, <style>, <script>, etc. are not displayed on the web page. Also, there can be only 1
<head> tag in the entire Html document and will always be before the <body> tag.

<body> tag defines the body of the HTML document. It should always be enclosed in the <html> tag. All
the contents which needs to be displayed on the web page like images, text, audio, video, contents, using
elements like <p>, <img>, <audio>, <heading>, <video>, <div>, etc. will always be enclosed by the
<body> tag. Also, there can be only 1 body element in an HTML document and will always be after the
<head> tag.

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

Yes, we can display a web page inside another HTML web page. HTML provides a tag <iframe> using
which we can achieve this functionality.

<body>
<iframe src="url of the web page to embed"></iframe>
</body>

19. How is Cell Padding different from Cell Spacing?

Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell Padding is the space or
gap between the text/ content of the cell and the edge/ border of the cell. Please refer to the above figure
example to find the difference.
Interview Questions and Answers - HTML

20. How can we club two or more rows or columns into a single row or column in an HTML table?

HTML provides two table attributes “rowspan” and “colspan” to make a cell span to multiple rows and
columns respectively.

21. Is it possible to change an inline element into a block level element?

Yes, it is possible using the “display” property with its value as “block”, to change the inline element into
a block-level element.

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

There are mainly 6 values of position attribute that can be used to position an HTML element:

1. static: Default value. Here the element is positioned according to the normal flow of the
document.
2. absolute: Here the element is positioned relative to its parent element. The final position is
determined by the values of left, right, top, bottom.
3. fixed: This is similar to absolute except here the elements are positioned relative to the <html>
element.
4. relative: Here the element is positioned according to the normal flow of the document and
positioned relative to its original/ normal position.
5. initial: This resets the property to its default value.
6. inherit: Here the element inherits or takes the property of its parent.

23. In how many ways you can display HTML elements?

1. inline: Using this we can display any block-level element as an inline element. The height and
width attribute values of the element will not affect.
2. block: using this, we can display any inline element as a block-level element.
3. inline-block: This property is similar to inline, except by using the display as inline-block, we
can actually format the element using height and width values.
4. flex: It displays the container and element as a flexible structure. It follows flexbox property.
5. inline-flex: It displays the flex container as an inline element while its content follows the
flexbox properties.
6. grid: It displays the HTML elements as a grid container.
7. none: Using this property we can hide the HTML element.

Below are some of the display types which are rarely used:

1. table
2. inline-table
3. table-cell
4. table-column
5. table-row
6. inline-grid
7. list-item
8. inherit
9. initial
10. table-caption
Interview Questions and Answers - HTML

24. What is the difference between “display: none” and “visibility: hidden”, when used as
attributes to the HTML element.

When we use the attribute “visibility: hidden” for an HTML element then that element will be hidden
from the webpage but still takes up space. Whereas, if we use the “display: none” attribute for an HTML
element then the element will be hidden, and also it won’t take up any space on the webpage.

25. How to specify the link in HTML and explain the target attribute?

HTML provides a hyperlink - <a> tag to specify the links in a webpage. The ‘href’ attribute is used to
specify the link and the ‘target’ attribute is used to specify, where do we want to open the linked
document. The ‘target’ attribute can have the following values:

1. _self: This is a default value. It opens the document in the same window or tab as it was clicked.
2. _blank: It opens the document in a new window or tab.
3. _parent: It opens the document in a parent frame.
4. _top: It opens the document in a full-body window.

26. In how many ways can we specify the CSS styles for the HTML element?

There are three ways in which we can specify the styles for HTML elements:

1. Inline: Here we use the ‘style’ attribute inside the HTML element.
2. Internal: Here we use the <style> tag inside the <head> tag. To apply the style we bind the
elements using ‘id’ or ‘class’ attributes.
3. External: Here we use the <link> tag inside <head> tag to reference the CSS file into our HTML
code. Again the binding between elements and styles is done using ‘id’ or ‘class’ attributes.

27. How to include javascript code in HTML?

HTML provides a <script> tag using which we can run the javascript code and make our HTML page
more dynamic.

28. When to use scripts in the head and when to use scripts in the body?

If the scripts contain some event-triggered functions or jquery library then we should use them in the
head section. If the script writes the content on the page or is not inside a function then it should be
placed inside the body section at the bottom. In short, follow below three points:

1. Place library scripts or event scripts in the head section.


2. Place normal scripts that do not write anything on the page, in the head section until there is any
performance issue.
3. Place scripts that render something on the web page at the bottom of the body section.

29. What are forms and how to create forms in HTML?

The HTML form is used to collect the user inputs. HTML provides a <form> tag to create forms. To take
input from the user we use the <input> tag inside the form so that all collected user data can be sent to the
server for processing. There are different input types like ‘button’, ‘checkbox’, ‘number’, ‘text’,
‘password’, ‘submit’ etc.
Interview Questions and Answers - HTML

<form action="/result.php">
<label>Enter your name: </label>
<input type="text" name="name" />
<label>Enter Mobile number </label>
<input type="number" name="mobile_no"/>
<input type="submit" value="Submit">
</form>

30. How to handle events in HTML?

HTML allows event trigger actions in browsers using javascript or JQuery. There are a lot of events like
‘onclick’, ‘ondrag’, ‘onchange’, etc.

<body>
<h3 id="eventDemo">0</h3>
<input type="button" onclick="myFunction()" value="Click Me" />
<input type="reset" onclick="reset()" value="Reset" />

<script>
function myFunction() {
let value = document.getElementById("eventDemo").innerHTML
value = parseInt(value) + 1;
document.getElementById("eventDemo").innerHTML = value;
}
function reset() {
document.getElementById("eventDemo").innerHTML = 0;
}
</script>
</body>

31. What are the advantages of HTML5?

Some advantages of HTML5 are:

1. It has Multimedia Support.


2. It has the capabilities to store offline data using SQL databases and application cache.
3. Javascript can be run in the background.
4. HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
5. Included new Semantic tags and form control tags.

32. Inline and block elements in HTML5?

Inline Block
Inline elements just take up the space that is Block elements start on a new line and consume the full
absolutely necessary for the content and does width of the page available.
not start from a new line. Example:- <div>, <p>, <header>, <footer>,
Example:- <span>, <a>, <strong>, <img>, <h1>...<h6>, <form>, <table>, <canvas>, <video>,
Interview Questions and Answers - HTML

Inline Block
<button>, <em>, <select>, <abbr>, <label>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>,
<sub>, <cite>, <abbr>, <script>, <label>, <i>, <figure>, <hr>, <article>, <section>, etc.
<input>, <output>, <q>, etc.

33. What is the difference between <figure> tag and <img> tag?

The <figure> tag specifies the self-contained content, like diagrams, images, code snippets, etc. <figure>
tag is used to semantically organize the contents of an image like image, image caption, etc., whereas the
<img> tag is used to embed the picture in the HTML5 document.

34. How to specify the metadata in HTML5?

To specify we can use <meta> tag which is a void tag,i.e., it does not have a closing tag. Some of the
attributes used with meta tags are name, content, http-equiv, etc. The below image tells how to specify
the metadata.

35. Is the <datalist> tag and <select> tag same?

No. The <datalist> tag and <select> tag are different. In the case of <select> tag a user will have to
choose from a list of options, whereas <datalist> when used along with the <input> tag provides a
suggestion that the user selects one of the options given or can enter some entirely different value.

36. Define Image Map?

Image Map lets a developer map/link different parts of images with the different web pages. It can be
achieved by the <map> tag in HTML5, using which we can link images with clickable areas.

<img src=”image_url” , usemap=”#workspace” />


<map name=”workspace”>
<area shape=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” />
<area shape=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” />
</map>

37. What are Semantic Elements?

Semantic elements are those which describe the particular meaning to the browser and the developer.
Elements like <form>, <table>, <article>, <figure>, etc., are semantic elements.

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

<progress> tag should be used when we want to show the completion progress of a task, whereas if we
just want a scalar measurement within a known range or fraction value. Also, we can specify multiple
extra attributes for <meter> tags like ‘form’, ‘low’, ‘high’, ‘min’, etc.

39. Difference between SVG and Canvas HTML5 element?

SVG Canvas

SVG is a vector based i.e., composed of shapes. It is Raster based i.e., composed of pixels.
Interview Questions and Answers - HTML

SVG Canvas

SVG works better with a larger surface. Canvas works better with a smaller surface.

SVG can be modified using CSS and scripts. Canvas can only be modified using scripts.

SVG is highly scalable. So we can print at high


It is less scalable.
quality with high resolution.

40. What type of audio files can be played using HTML5?

HTML5 supports the following three types of audio file formats:

1. Mp3
2. WAV
3. Ogg

41. Explain the concept of web storage in HTML5.

This web storage helps in storing some of the static data in the local storage of the browser so that we do
not need to fetch it from the server every time we need it. There is a size limit based on different
browsers. This helps in decreasing the load time and a smooth user experience. There are two types of
web storage that are used to store data locally in HTML5:

1. Local Storage - This helps in storing data that will be retained even though the user reopens the
browser. It is stored for each webapp on different browsers.
2. Session Storage - This is used for one session only. After the user closes the browser this gets
deleted.

42. Explain HTML5 Graphics.

HTML5 supports two kinds of graphics:

1. Canvas - It is like drawing on a whitepaper or a blank webpage. We can add different graphic
designs on web pages with available methods for drawing various geometrical shapes.

<body>
<canvas width="300" height="100" style="border:2px solid;"></canvas>
</body>

2. SVG - Scalable Vector Graphics are used mostly for diagrams or icons. It follows the XML
format.

<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:#FFF;stroke-width:2;stroke:#000" />
</svg>
</body>
Both of the above examples produce this output and represent two different approaches provided by
HTML5 to implement graphical aspects in the webpage.
Interview Questions and Answers - HTML

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

Following are the significant new data types offered by HTML5:

1. Date - Only select date by using type = "date"


2. Week - Pick a week by using type = "week"
3. Month - Only select month by using type = "month"
4. Time - Only select time by using type = "time".
5. Datetime - Combination of date and time by using type = "datetime"
6. Datetime-local - Combination of date and time by using type = "datetime-local." but ignoring the
timezone
7. Color - Accepts multiple colors using type = "color"
8. Email - Accepts one or more email addresses using type = "email"
9. Number - Accepts a numerical value with additional checks like min and max using type =
"number"
10. Search - Allows searching queries by inputting text using type = "search"
11. Tel - Allows different phone numbers by using type = "tel"
12. Placeholder - To display a short hint in the input fields before entering a value using type =
"placeholder"
13. Range - Accepts a numerical value within a specific range using type = "range"
14. Url - Accepts a web address using type = "url”

<body>
<form>
<div>
<label>Date:</label>
<input type="date" id="date" />
<br>
<label>Week:</label>
<input type="week" id="week" />
<br>
<label>Month:</label>
<input type="month" id="month" />
<br>
<label>Time:</label>
<input type="time" id="time" />
<br>
<label>Datetime:</label>
<input type="datetime" id="datetime" />
<br>
<label>Datetime Local:</label>
<input type="datetime-local" id="datetime-local" />
<br>
<label>Color:</label>
<input type="color" id="color"/>
<br>
<label>Email:</label>
<input type="email" id="email" placeholder="email address" />
<br>
<label>Number:</label>
Interview Questions and Answers - HTML

<input type="number" id="number" />


<br>
<label>Search:</label>
<input type="search" id="search" />
<br>
<label>Phone:</label>
<input type="tel" id="phone" placeholder="Phone Number" pattern="\d{10}$" />
<br>
<label>Range:</label>
<input type="range" id="range" />
<br>
<label>URL:</label>
<input type="url" id="url"/>
</div>
</form>

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

1. <audio> - Used for sounds, audio streams, or music, embed audio content without any additional
plug-in.
2. <video> - Used for video streams, embed video content etc.
3. <source> - Used for multiple media resources in media elements, such as audio, video, etc.
4. <embed> - Used for an external application or embedded content.
5. <track> - Used for subtitles in the media elements such as video or audio.

<body>
<label>
Video:
</label>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
<br>
<label>
Embed:
</label>
<embed type="video/webm" src="https://www.youtube.com/embed/nBpQqKodPxw" width="400"
height="300">
<br>
<label>
Audio:
</label>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
Interview Questions and Answers - HTML

45. What are raster images and vector images?

Raster Images - The raster image is defined by the arrangement of pixels in a grid with exactly what
color the pixel should be. Few raster file formats include PNG(.png), JPEG(.jpg), etc.
Vector Images - The vector image is defined using algorithms with shape and path definitions that can
be used to render the image on-screen written in a similar markup fashion. The file extension is .svg

46. How to support SVG in old browsers?

To support old browsers instead of defining the resource of svg in src attribute of <img> tag, it should be
defined in srcset attribute and in src the fallback png file should be defined.

<img src="circle.png" alt="circle" srcset="circle.svg">

47. What is the Geolocation API in HTML5?

Geolocation API is used to share the physical location of the client with websites. This helps in serving
locale-based content and a unique experience to the user, based on their location. This works with a new
property of the global navigator object and most of the modern browsers support this.

<body>
<script>
let geolocation = navigator.geolocation;
</script>
</body>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy