Interview question and answer – Part 6

Q1. What is HTML?
HTML or Hypertext Markup Language, was created by Berners-Lee in 1991. It is a markup language used to create and structure website templates or web pages to present content on the World Wide Web. It consists of a series of elements, and the HTML elements tell the browser how to display the content. HTML helps in making the text more interactive and dynamic. You can save an HTML page by adding .html or .html in the web page name.

Q2. What are the features of HTML?
The following are the features of HTML:

It is a markup language that provides flexibility to design web pages with text.
It is easy to use and learn.
HTML is platform-independent and can be used on Windows, Linux, Macintosh, etc.
It enables programmers to add images, video, and audio to a web page to make it more interactive.
HTML allows programmers to add a link on web pages, helping the readers to browse the information of their interest.
It is case-insensitive. You can use tags either in lower-case or upper-case.

Q3. What is the difference between HTML elements and tags?
The differences between HTML elements and tags are:

HTML Elements	Tags
1. The element is an individual component of the HTML web page or document that consists of a start tag, its attributes, an end tag, and everything in between.	1. HTML tag (either opening or closing) marks the start or end of an element.
2. They usually contain a start tag, content, and an end tag.	2. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.
3. HTML Elements hold the content.	3. HTML Tags hold the HTML element.
4. They specify the general content.	4. HTML tags are like keywords. Each tag has a unique meaning.
5. For example, <p>This is an example of a paragraph.</p>	5. For example, <a> is an opening anchor tag and </a> is a closing anchor tag.

Q4. Do all HTML tags have an end tag?
No, all HTML tags do not have an end tag. For example, the <br> tag is used to break the line, and <image> tag is used to insert an image into a document. They are considered self-closing tags and do not require an end tag.

Q5. Which HTML tags are used while displaying the data in the tabular form?
The following HTML tags are used to display the data in tabular form:

1	<table>	Defines a table.
2	<tr>	Defines a row in a table.
3	<th>	It defines a header cell in a table.
4	<td>	Defines a cell in a table.
5	<caption>	This tag defines the table caption.
6	<colgroup>	This tag specifies a group of one or more columns in a table for formatting.
7	<col>	It is used with <colgroup> element to specify column properties for each column.
8	<tbody>	This tag groups the body content in a table.
9	<thead>	It groups the header content in a table.
10	<tfooter>	It groups the footer content in a table.

Q6. Write the basic structure of the HTML template.
The basic structure of the HTML template is:

<html>

<head>

<title>Title of the page</title>

</head>

<body>content of the page</body>

</html>

Q7. What is HTML5? What are some of its new features that were not present in HTML?
HTML5 is the latest version of the Hypertext Markup Language. Some of the new features of HTML5 are:

HTML5 supports SVG, canvas, and other virtual vector graphics. In HTML, vector graphics can only be used with Flash, VML (Vector Markup Language), or Silverlight.
HTML5 allows JavaScript to run within a web browser. The previous version allowed JavaScript to run in the browser interface thread.
HTML5 is not based on SGML. It comes with enhanced parsing rules for improved compatibility.
In HTML5, web SQL databases are used to store data temporarily. Previously, only the browser cache was used.
Some elements have been removed – applet, isindex, noframes, acronym, dir, font, frame, frameset, and big are removed.
New elements have been added – time, summary, aside, audio, command, and data.

Q8. What are the most commonly used lists used while designing a page?
The following are the most commonly used lists that are used while designing a page:

unordered list (<ul> tag) – displays elements in a bulleted format.
ordered list (<ol> tag) – displays elements in a numbered format.
definition list (<dl>, <dt> and <dd> tags) – displays elements in definition form like in a dictionary.

Q9. What are HTML Attributes?
HTML attributes provide additional information about HTML elements. They are defined directly after the tag name. They only appear in opening tags and not in closing tags.

HTML attributes usually contain name/value pairs like name=”value”. The Attribute values should always be enclosed in quotation marks. The name parameter takes the property’s name to be assigned to the element. The value takes the property value or extent of the property names that can be aligned over the element.

Some commonly used HTML attributes include src Attribute, alt Attribute, id Attribute, and href Attribute.

Q10. What is semantic HTML?
Semantic HTML is a coding style. It uses HTML markup to reinforce the semantics or meaning of the content in webpages and web applications rather than just defining its look or appearance. It introduces meaning to the code we write.

For example: <form>, <table>, and <article>, these tags clearly define its content.

Q11. What is the HTML article element?
The HTML <article> Element specifies independent and self-contained content in a document, page, application, or site which is independently distributable or reusable. Since it is independent of the document or website, it can be viewed, reused, and distributed separately.

For example, syndication. The HTML article element is used in the following:

Forum post
Blog post
Newspaper article

Q12. Explain the layout of HTML.
HTML layout represents how all the elements in the document are arranged. It is a vital part of basic page design and is important for creating a website to appear professional and attractive. Every website has a specific layout to display content in a specific manner. The following HTML elements are used to define the different parts of a webpage:

<header>: define a header for a document or a section.
<nav>: defines a container for navigation links
<section>: it defines a section in a document
<article>: define an independent, self-contained article
<aside>: it defines content aside from the content
<footer>: define a footer for a document or a section
<details>: define additional details

Q13. What is the difference between a block-level element and an inline element?
The differences between block-level elements and inline elements are:

Block-level Elements	Inline Elements
They start on a new line.	Do not start on a new line and can begin within a line.
Stretch to fill the full width available to them.	Take up as much width as necessary. Its width only extends as far as it is defined by its tags.
They have a top and a bottom margin.	Inline elements do not have a top and a bottom margin.
Examples of block-level elements in HTML: <div>, <img>, <form>, <main>, <table>, <video>.	Examples of inline elements: <span>, <img>, <strong>, <code>, <input>, <time>, <i>.

Q14. How to insert an image in HTML?
Images can be inserted using an HTML page’s <img> tags. It is an empty tag with only attributes and does not require a closing tag. The <img> tag must be used inside <body>…</body> tag. The following parameters will be required to insert an image using <img> tag

src attribute – It is used to add the path to the image (URL of the image).
alt attribute – It is for adding alternate text.
Width – To add the width of the image
Height – To add the height of the image

Example:

Q15. How to align text in HTML?
HTML content is aligned on a page using the CSS text-align property. It sets the horizontal alignment of the content inside a block element or table-cell box. The text-align property works like a vertical-align but in the horizontal direction. It works on text and all other content inside the block element, such as images and buttons.

Q16. How to write text on image in HTML
Below is the code to write text on image in HTML:

Q17. How can comments be added in CSS?
We can add comments in CSS using /* and */.

Q18. How to underline text in HTML?
Ans. We use the <u> tag to underline the text in HTML.

Q19. How do you bold text in HTML?
The <b> </b> tag or <strong> </strong> tag are used to bold text in HTML.

Q20. What are the new input types in HTML5 for forms?
The following are the new input types in HTML5 for forms:

INPUT TYPE	DESCRIPTION	HTML MARKUP
date	Allows the user to select a date	<input type=”date”>
datetime	Allows the user to select date and time using UTC date and time format	<input type=”datetime”>
datetime-local	To select the date and time as per the local time	<input type=”datetime-local”>
month	Select month and year	<input type=”month”>
time	The time of day	<input type=”time”>
week	Enables you to select the week and year	<input type=”week”>
color	Enables you to enter a simple color value	<input type=”color””>
email	Validates the input using the standard email format	<input type=”email”>
search	Searches a data set	<input type=”search”>

Q21. What is a marquee?
Marquee tag is a non-standard HTML element that causes text to scroll up, down, left, or right automatically. You can put the text which you want to scroll on a web page within the following tag:

Q22. What happens if you open the external CSS file in a browser?
If you try to open the external CSS file in a browser, the browser will not open the file. This is because the file has a different extension. The only way to use an external CSS file is to reference it using the <link/> tag within another HTML document.

Q23. Which tags are used to separate a section of texts?
The following three tags are used to separate a section of texts:

<br> – to separate the line of text. It breaks the current line and conveys the flow to the next line
<p> – It contains the text in the form of a new paragraph.
<blockquote> – defines a large quoted section.

Q24. Explain the use of an iframe tag.
The <iframe> tag specifies an inline frame. It is used to display a web page within a web page (to embed another document within the current HTML document).

For example – The src attribute is used to specify the URL of the document that occupies the iframe.

Syntax:

Q25. What is the difference between LocalStorage and SessionStorage Objects?
The differences between LocalStorage and SessionStorage Objects are:

LocalStorage Object	SessionStorage Object
1. It stores the data without an expiry date.	1. Stores the data for only one session.
2. The data can be shared between multiple windows of the browser.	2. Data is accessible only in the current window of the browser.
3. Data is not deleted when the browser window closes.	3. The data is deleted if the browser window closes.

Q26. What are the different media types and formats supported by HTML?
Ans. HTML supports a variety of media formats for sound, music, videos, movies, and animations. The different formats supported by HTML are:

Images: jpg, jpeg, png, gif, svg, apng, BMP ico
Audio: RealAudio, WMA, MIDI, AAC, WAV, MP3, MP4
Video: MPEG, AVI, QuickTime, RealVideo, WMV, Flash, WebM, and MP4

Q27. Explain an image map in HTML.
An image map is defined by the <map> tag. Using this the image map tag, we can linking the different web pages using a single image. We can add one or more clickable areas in a single image using <area> tags.

Q28. How to create multi-colored text on a web page?
We can use <font color =”color”> </font> to create multi-colored text on a web page for the specific texts that you want to color.

Q29. How to add a favicon in HTML?
Below is the code to add a favicon. Access the code of your webpage and in the <HEAD> section add the following code.

Q30. What is the difference between HTML and XHTML?
The differences between HTML and XHTML are:

HTML	XHTML
HTML stands for Hypertext Markup Language.	XHTML stands for Extensible Hypertext Markup Language.
It is extended from SGML (Standard Generalized Markup Language).	It has features of both XML and HTML.
HTML is a static Web Page.	XHTML is a dynamic Web Page.
It uses a document file format.	It uses markup language.
HTML is about displaying information.	It is about describing the information.
Not case sensitive.	XHTML is case-sensitive. Every tag and attribute should be in lower case.
Not necessary to close the tags in the order they are opened.	It is necessary to close the tags in the order they are opened.
All content can be included in the body element.	All contents must be put in blocks.
It requires a lenient HTML-specific parser.	Parsing is done with a standard XML parser.
+ More 1 Rows

Q31. What is URL Encoding? Why are URLs encoded in HTML?
URL Encoding is the process of encoding non-ASCII characters in URLs to a format that is universally accepted by web browsers. URLs are sent over the Internet using the ASCII character set. If a URL contains characters outside the ASCII set, the URL has to be converted.

URL is encoded in HTML as it converts non-ASCII characters into a format that can be transmitted over the web. The URL encoding replaces non-ASCII characters with a “%” followed by hexadecimal digits.

Looking for one single place to learn and grow in your career? Here’s the list of Top Online IT Courses for freshers and experienced professionals.

Q32. What is an empty element?
An empty element is an HTML element that has no content. Example <br>

Q33. How many types of CSS can be included in HTML?
This is one of the commonly asked HTML CSS interview questions.

There are three types of CSS:

Inline CSS – using the style attribute inside HTML elements

Inline CSS is used for styling small contexts. It contains the CSS property in the body section attached to the element. The style attribute is used in the relevant tag to use inline styles added.

<h1 style=”color:red;”>A Red Heading</h1>

Internal or Embedded CSS – using <style> element in the <head> section

It requires you to add <style> tag in the <head> section of the HTML document. It is most suited for styling a single page that has a unique style. However, using this style for multiple pages is time-consuming as CSS rules need to be added to every page of the website.

Example:
h1 {
color: red;
padding: 50px;
}

External CSS – using a <link> element to link to an external CSS file

It is used when the style is applied to many pages. To use an external CSS, add a link to it in the <head> section of each HTML page.

Example:

Q34. What is the use of the figure tag in HTML 5?
The <figure> tag identifies self-contained content related to the main content. It adds self-contained content like photos, diagrams, illustrations, etc. The figure, its caption, and its contents are referenced as a single unit from the main flow of the document. The <figure> tag has two elements img src and figcaption. Img src is used for adding image sources in a document, while figcaption sets the caption of an image.

Example:

<figcaption>A Stack of Blueberry Pancakes</figcaption>

</figure>

Q35. What is a datalist tag?
The <datalist> tag provides autocomplete feature in the HTML files. It enables users to add the autocomplete form based on the predefined options. It can be used with an input tag so users can easily fill the data in the forms using predefined options.

Example: If you press A, it will show a list of cars starting with A letter.

<label for=”car”>Choose your car from the list:</label>
<input list=”cars” name=”car” id=”car”>
<datalist id=”cars”>
<option value=”Honda”>
<option value=”Hyundai”>
<option value=”Maruti”>
<option value=”Audi”>
<option value=”BMW”>
</datalist>

Q36. What are HTML entities?
A Group of characters that represent reserved and invisible characters in HTML are known as HTML entities. These strings start with an ampersand(&) symbol and end with a semicolon(;). They can also replace some characters that are challenging to type on a standard keyboard.

Syntax: &entity_name; or &#entity_number;

Few entity symbols and their number are mentioned in below table:

Character	Symbol	Entity Name	Entity Number
<	Less than	<	<
>	Greater than	>	>
“	Double quotation mark	"	"
©	Copyright	©	©
®	Registered Trademark	®	®
&	Ampersand	&	&

Q37. What is the difference between cell padding and cell spacing?

Cell Padding	Cell Spacing
cell padding is the white space that exists between the edge of a table cell and its contents.	The space that exists between specific neighboring cells is known as “cell spacing.”
It is associated with just one cell.	It is associated with multiple cells.
Cellpadding’s default value is 1.	Cellspacing’s default value is 2.

Q38. What are the different ways to display HTML elements?
The different ways to display HTML elements are listed below:

inline: Any element at the block level can be shown as an inline element using this technique. Aspect values for the element’s height and width have no bearing.
none: The HTML element can be hidden by using this property.
block: used to display inline element as a block element.
inline-block: This property is identical to inline, however utilizing the display as inline-block, allows us to format the element by using its height and width values.
flex: The element and container are shown as flexible construction. It adheres to flexbox properties.
inline-flex: While its content adheres to the flexbox specifications, the flex container is shown as an inline element.
grid: It presents the HTML elements in a grid container.

Q39. What is the difference between display: none and visibility: hidden?
Ans. When an HTML element has the property “visibility: hidden,” it will be hidden from the webpage yet still occupy space. However, if we apply the “display: none” property for an HTML element, the element will be hidden and will not occupy any space on the website.

Q40. What is the canvas element in HTML5?
Using a scripting language such as JavaScript, the “canvas” element serves as a container for drawing visuals on web pages. It enables the rendering of bitmap pictures and 2D shapes in a dynamic and scriptable manner. In canvas, there are numerous ways to draw pathways, boxes, circles, text, and add images.

Q41. Will HTML5 work if I don’t use <!DOCTYPE html>?
No, the HTML 5 tags won’t work properly and the browser won’t be able to tell that it’s an HTML document.

Q42. Why is the required attribute used in HTML5?
Ans. This attribute is mainly used for form validation. Before submitting the form, it compels the user to enter text in the text area or text field.

Q43. What is the difference between <em>, <i> and <strong>, <b> tags?
The effects of the tags <strong>, <b> and <em>, <i> on a typical webpage are identical. Italic and bold are indicated by the tags <b> and <i>. These two tags do little more than apply font styles, while the bold tag (<b>) simply adds extra ink to the text.

While the <strong> and <em> tags indicate that a section of text is more important than other material in both terms of importance and emphatic stress. These tags’ meanings are semantic.

Q44. What is the difference between <div> and <span> tag?
Ans. The difference between the span and div elements is that the span element is in-line and typically used for a brief paragraph or another tiny block of HTML inside a line. A div or division element, on the other hand, is a block line, which is comparable to having a line break before and after it and is used to combine larger portions of code.

Q45. If there isn’t any text in between the HTML tags, what will happen?
If no text is present in between the tags, there would be nothing to format. As a result, nothing will show up on the screen. Some tags, such as those that don’t have a closing tag, like the <img> tag, don’t need any text in between them.

Q45. How can you tell what character set an HTML5 document is using? What distinguishes this from earlier HTML standards?
In HTML5, the charset attribute of a <meta> tag inside the document’s <head> element can be used to specify the encoding being utilized.

Since the charset attribute wasn’t present in earlier HTML standards, this syntax is a little bit simpler. The following is an example of how the <meta> element would be used in an HTML 4.01 document:

Q46. What is the use of Geolocation API in HTML5?
One of the best HTML5 APIs is Geolocation API which is used to determine the geographical location of the user for a web application. With HTML5, you can now browse to the visitor’s current website’s latitude and longitude coordinates. These coordinates can be recorded by JavaScript and sent to the server, allowing it to display your position on the page. The geolocation API is used with navigation.geolocation object. A Geolocation object that contains the user’s location information and can produce a customized result is returned via the read-only property of the object.

Q47. What is the benefit of collapsing the white space in HTML?
White space is a term used to describe empty or blank values in the code the browser reads and displays. The collapsing of these white spaces is a unique characteristic of HTML. The advantage of this feature is in its ability to reduce the time of transmitting data between server and client by removing unused bytes taken up by the white spaces. If you accidentally leave excess white space, the browser will disregard it and perfectly display the UI.

Q48. Is it possible for the text to occasionally appear elsewhere other than the browser?
Ans. The text is automatically wrapped to fit the browser window by default. The text might, however, go outside the browser window if it is a component of a table cell with a fixed width.

Q49. In terms of style sheets, what is the hierarchy that is being used?
Ans. The style definition that is closest to the actual tag takes precedence when a single selector has three separate style definitions. External style sheets have a lower priority than embedded style sheets, which have a lower priority than the inline style.

Q50. Compare and contrast an HTML specification with a browser’s implementation.
Ans. For a document to be considered “valid” in accordance with an HTML specification, such as HTML5, it must follow a set of requirements. In addition, a specification gives guidelines for how a browser should comprehend and display such a document.

A browser is deemed to “support” a specification if it processes legitimate documents in accordance with the specifications’ guidelines. Although most of the HTML5 specification is supported by all of the main browsers, not all of it is supported by any browser as of yet, hence it is up to the developer to determine whether the feature they plan to utilize will be supported by all of the browsers they intend to use to view their content.

Due to this, despite the enhanced specifications, cross-browser support still causes developers problems. Additionally, while HTML5 specifies certain guidelines for invalid documents (those with syntactical faults), faulty documents may contain anything, making it hard for the specification to fully address every scenario. Thus, the browser is left in charge of making numerous decisions regarding how to handle damaged documents.

Q51. Can elements from articles be found in sections? Can a section element be found in an article? Give usage illustrations.
Ans. The answer to both queries is “yes,” meaning that both “section” and “article” elements can be found in both a section and an article.

A personal dashboard page might, for instance, have sections for social network interactions and the most recent news stories, the latter of which might have many article elements.

On the other hand, an article can have a section at the end for reader feedback.

Q52. What is an SVG tag in HTML? Give Example.
Ans. Scalable Vector Graphics is the abbreviation for the HTML SVG. A modularized language called HTML SVG is used to describe visuals in XML. Vector and hybrid vector/raster graphics in two dimensions are described in XML. It comes from the W3C. Text files containing XML define the actions of SVG images. The ability to produce and edit SVG images as XML files means that they can be done with a text editor, but usually speaking, drawing applications like Inkspace are preferred for this purpose.

Q53. What is the difference between meter and progress tag?
The meter tag measures data within a specified range, whereas the progress tag just represents the task’s progress.

Q54. How can website assets be optimized?
To optimize website assets, we must comprehend a few fundamental optimization principles. First, we need to reduce the download size and the number of HTTP queries. We can use the following strategies to optimize website assets:

File compression
File concatenation
CDN Hosting
Offloading assets
Re-organizing
Refining code

Q55. What is data transfer API?
The management of data transfers from one user to another within a domain is handled by the Data Transfer API. For example, this transfer can be used to redistribute application data belonging to a user who has left the company. You must first define a transfer before starting it with the insert method to use the Data Transfer API. The transfer can include application-specific parameters and describes one or more apps whose data will be transmitted.

Choose which application(s) you want to transmit data to.
Create a transfer resource that lists the users at the source and destination and the programs to which the data will be sent.
To add the transfer request, use the insert method.

Q56. What does HTML5’s application cache do, and why is it necessary?
Ans. The HTML 5 application cache functionality is used to cache website data, making it accessible even without an internet connection. It is highly helpful for desktop-based web applications that need to save data on local systems.

Q57. What does an HTML5 web worker do?
A script that executes in the background on a different thread from the main web page is known as a “web worker” in HTML5. Long tasks can be completed with the help of web workers without slowing down the website. Web workers cannot access the following JavaScript objects because web workers reside in external files:

The window object
The document object
The parent object

Q58. How to specify the metadata in HTML5?
Metadata in HTML5 can be specified using the “head” element of an HTML document. The “head” element contains information about the document, such as its title, author, description, and keywords.

Q59. What is Microdata?
Ans. A standardized method of adding extra semantics to your web pages is by using microdata.

You can define your unique elements using microdata and add unique attributes to your web pages. Microdata is a general term for a collection of name-value pairs.

Each name-value pair in the groups is referred to as a property. Regular elements are used to represent objects and properties.

Q60. What is the difference between SVG and Canvas HTML5 elements?

Vector-based graphics	Bitmap-based graphics
Uses XML to define shapes	Uses JavaScript to draw graphics
Ideal for static and interactive graphics	Ideal for complex animations and games
Can be scaled without losing quality	Scaling can lead to loss of quality
Supports interactivity with CSS and JavaScript	Requires scripting for interactivity
Good for high-resolution displays	Good for low-resolution displays
Ideal for logos, icons, and charts	Ideal for games, photo editing, and video editing
Slower performance for complex animations	Faster performance for complex animations
Supported in all modern browsers	Supported in all modern browsers

Q61. What are the custom attributes in HTML5?
Custom attributes are those that are specifically designed and are not included in the standard HTML5 attributes. They enable us to customize HTML tags by adding our own data. These can be used with any HTML element because they are not specialized. Custom attributes allow storing additional data that is not required for a specific purpose.

This information is kept within the program or website. The term “data attributes” also applies to the custom attributes. A custom attribute is one whose name begins with the prefix data-. Custom attributes can be included using the data-* attributes on any HTML element. The user agent ignores these entirely. The page’s JavaScript can make use of the stored data. Additionally, we may style our elements using these data attributes.

Q62. What are the essential goals of the HTML5 specification?
The HTML5 specification was designed to achieve several significant goals, including:

Compatibility: Ensure backwards and forward compatibility with older versions of HTML and other web technologies.

Multimedia Support: Provide native support for multimedia content such as video and audio, eliminating the need for third-party plugins like Adobe Flash.

Device Independence: Allow web applications to run on various devices, including desktop computers, laptops, tablets, and smartphones.

Accessibility: Improve accessibility by providing support for assistive technologies and making it easier to create web content that is accessible to users with disabilities.

Semantic Markup: Promote semantic markup to make web content more meaningful and understandable by humans and machines.

Consistency: Provide consistent features and behaviours across different browsers, reducing the need for browser-specific code.

Security: Improve security by providing more robust mechanisms for handling user input and data and preventing malicious code from executing on a user’s device.

Q63. What is the use of the <output> tag in HTML, and what are its attributes?
The HTML <output> tag is used to represent a result for any calculation. Its attributes are mentioned below:

for: It outlines the connection between the calculation’s inputs and outputs.
form: This specifies the form to which the output element belongs.
name: An <output> element’s name is specified via the name attribute.

Q64. What is HTML?
HTML stands for HyperText Markup Language and it is the language of the internet. This standard text formatting language is used to create and display pages on the Internet. HTML documents include elements and tags that format it for proper display on pages.

Q65. What are HTML tags?
HTML tags are used for placing elements in the proper and appropriate format. The tags, < and >, set them apart from the HTML content. It is not always necessary to close these HTML tags. For example, in the case of images, the closing tags are not required as tag.

Q66. What are HTML attributes?
Attributes are properties that are added to an HTML tag. They change the way the tag behaves or is displayed. Attributes are added right after the name of the HTML tag, inside the brackets. Attributes can be added to opening or self-closing tags, but never in closing tags.

For example, the tag has an src attribute, which can add the source from which the image should be displayed.

Q67. What is a marquee in HTML?
Marquee in HTML is used to scroll text or image on a web page. It can scroll up, down, left, or right automatically. Marquee can be applied by using tags.

Q68. How do you separate a section of texts in HTML?
A section of texts in HTML can be separated with the help of the following tags:

<br> – It is used to separate the line of text by breaking the current line and moving the flow of the text to a new line.
<p> – It is used to write a paragraph of text.
<blockquote> – It is used to define large quoted sections.

Q69. Define the list types in HTML?
Following are the list types in HTML:

Ordered list – The ordered list displays elements in a numbered format with the help of the <ol> tag.
Unordered list – The unordered list displays elements in a bulleted format with the help of the <ul> tag.
Definition list – The definition list uses <dl>, <dt>, and <dd> tags for displaying elements in definition form.

Q70. What are void elements in HTML?
HTML elements that do not have closing tags or do not need to be closed are known as void elements.

Q71. What is the advantage of collapsing white space?
In HTML, a blank sequence of whitespace characters is treated as a single space character. The browser collapses the multiple spaces into a single space character thus aiding a developer to indent lines of text without the need to worry about multiple spaces. In this way, readability and understandability of HTML codes is maintained.

Q72. What are HTML entities?
In HTML some characters like ‘<’, ‘>’, ‘/’, etc. are reserved. To use them in web pages, character entities or HTML entities need to be used. Below are a few mapping between the reserved character and its respective entity character to be used.

Character	Entity Name	Entity Number
<	<	<
>	>	>
&	&	&
(non-breaking space) Eg. 10 PM	Eg. <p>10&nbsp&nbspPM</p>

Q73. What is the ‘class’ attribute in HTML?
The ‘class’ attribute specifies the class name for an HTML element. Multiple HTML elements can have the same class value. It is primarily used to associate the styles on the stylesheet with the HTML elements.

Q74. 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. The same is not true for an id attribute of an element.

Q75. Describe the HTML layout structure.
For the purpose of displaying the intended content and specific UI, each web page has to include different components. However, few things in the HTML layout structure come templated and are universally accepted practices. For example:

<header>: It is used to include the starting information about the web page
<footer>: A footer represents the final section of a web page
<nav>: It involves the navigation menu of the HTML page
<article>: It is a set of information
<section>: This defines the basic structure of a page and is used inside the article block
<aside>: It is used for the sidebar content of a web page

Compare HTML & XML

Criteria	HTML	XML
Deployed for	Rendering things on screen	Describing what things are
Functioning area	Human to computer interaction	Computer to computer interaction
Can explain what data means	No	Yes

Q76. What is $() in jQuery library?
The $() function is an alias of the jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love its brevity. $() function is used to wrap any object into a jQuery object, which then allows you to call various method-defined jQuery objects. You can even pass a selector string to the $()function, and it will return a jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it being quite basic. It is used to differentiate between developers who knows jQuery and those who do not.

Q77. What are the advantages of using jQuery?

Easy to use and learn
Easily expandable
Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
Easy to use for DOM manipulation and traversal
Large pool of built-in methods
AJAX capabilities
Methods for changing or applying CSS, creating animations
Event detection and handling
Tons of plug-ins for all kinds of needs

Q78. Explain the difference between ID selector and class selector in jQuery.
If you have used CSS, then you might know the difference between ID and class selector. It’s the same with jQuery. ID selector uses ID e.g. #element1 to select element, while class selector uses CSS class to select elements. When you just need to select only one element, use ID selector, while if you want to select a group of elements, having the same CSS class then use a class selector. There is a good chance that the interviewer will ask you to write a code using ID and class selector. From a syntax perspective, as you can see, another difference between ID and class selector is that the former uses “#” and later uses the “.” character.

Q79. What is the difference between $(this) and this keyword in jQuery?
This could be a tricky question for many jQuery beginners, but it’s in fact the simplest one. $(this) returns a jQuery object, on which you can call several jQuery methods e.g. text() to retrieve text, val() to retrieve value, etc. While this represents the current element, it’s one of the JavaScript keywords to denote the current DOM element in a context. You can not call the jQuery method on this until it’s wrapped using the $() function i.e. $(this).

Q80. What is the main advantage of loading the jQuery library using CDN?
This is a slightly advanced jQuery question, and don’t expect that jQuery beginners can answer that. Well, apart from many advantages including reducing server bandwidth and faster download, one of the most important advantages is that if the browser has already downloaded the same jQuery version from the same CDN, then it won’t download it again. Nowadays, almost any public website uses jQuery for user interaction and animation, so there is a very good chance that browsers already have the jQuery library downloaded.

Q81. What is “Semantic HTML?”
Semantic HTML is a coding style where the tags embody what the text is meant to convey. Also known as semantic markup, this HTML introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph.

Tags for bold and italic are not examples of semantic HTML as they just represent formatting and provide no indication of meaning or structure.

Q82. What is a class? What is an ID?
A class is a style (i.e., a group of CSS attributes) that can be applied to one or more HTML elements. This means it can apply to instances of the same element or instances of different elements to which the same style can be attached. Classes are defined in CSS using a period followed by the class name. It is applied to an HTML element via the class attribute and the class name.

The following snippet shows a class defined and its application to an HTML DIV element.

.test {font-family: Helvetica;font-size: 20;background: black;}test

Also, you could define a style for all elements with a defined class. This is demonstrated with the following code that selects all P elements with specified column class.

p.column {font-color: black;}

An ID selector is a name assigned to a specific style. It can be associated with one HTML element with the assigned ID. Within CSS, ID selectors are defined with the # character followed by the selector name.

The following snippet shows the CSS example1 defined followed by the use of an HTML element’s ID attribute, which pairs it with the CSS selector.

#example1 {background: blue;}

Q83. What is Grouping?
When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.h1, h2, h3 {background: red;}

Q84. How to create a new HTML element?
New HTML elements can be created in the following way:

<myElement>hello Intellipaat!</myElement>

Q85. What are the uses of a span tag? Explain with an example.
The span tag is used for styling purposes like:

Adding color to text
Highlighting any color text
Adding background on text

Example:

In this page we use span.

</span>

Q86. Explain the key differences between localStorage and sessionStorage objects.
The key differences between localStorage and sessionStorage objects are:

The localStorage object stores data indefinitely, while sessionStorage object stores them for only one session.
In the case of a localStorage object, when the browser window is closed, the data will not be erased. However, in the case of sessionStorage objects, the data will get erased after the browser window is closed.
The data that is stored in the sessionStorage is accessible only in the current browser window. The data that is stored in the localStorage can be accessed by multiple browser windows.

Q86. What is the hierarchy when it comes to style sheets?
If there are three different style definitions in a single selector, precedence is given to the definition that is closest to the actual tag. Inline style sheets take priority over embedded style sheets. Between embedded style sheets an external style sheets, embedded style takes precedence.

Q87. How do active links differ from normal links?
Normal and active links have blue as their default color. Certain browsers are capable of detecting an active link when the mouse cursor hovers over that link. The other browsers detect the active link when the link has the focus. An active link is in the action of opening the resource that is being pointed to.

Normal link contains a pointer to another resource. Those links don’t have a mouse cursor over it. A normal link becomes an active link when the user clicks on it.

Q88. What is the significance of and tag in HTML?
<head> contains the information about the document. It is always enclosed in the <html> tag. <head> contains the webpage metadata and tags like <style>, <link>, <meta>, <script>, etc. that are not displayed on the web page. In an HTML document. there can be only one <head> tag and it is one used before the <body> tag.

<body> defines the body of an HTML document and is always enclosed within the <html> tag. Any content that needs to be displayed on the web page, such as text, audio, images, video, contents, can be done using tags like <p>, <img>, <audio>, <heading>, <video>, <div>, etc. These tags have to be enclosed within the <body> tag. There can be only one <body> element in an HTML document and it is used after the <head> tag.

Q89. How can a table be displayed on an HTML webpage?
Data can be displayed in a tabular format with the help of the <table> tag. It can also be used to manage the layout of the web page. For example, the header section, the navigation bar, the content of the body, and the footer section.

The following HTML tags are used for when building a table on an HTML webpage:

Tag	Description
<table>	This tag defines the table.
<tr>	The <tr> tag is used to define a row in the table.
<th>	It is used for defining the header cell in a table.
<td>	The <td> tag defines a cell in a table.
<caption>	It defines the table caption.
<colgroup>	It specifies a group of one or multiple columns for the purpose of formatting.
<col>	This tag is used with <colgroup> for specifying column properties for each column.
<tbody>	<tbody> groups the content of the body in a table.
<thead>	It groups the header content in a table.
<tfoot>	<tfoot> groups the footer content in a table.

Q90. How do you create links to different sections within the same HTML web page?
Links to different sections can be created within the same web page by using the <a> tag, along with the # symbol for referencing.

Q91. How can you create nested web pages in HTML?
When there are web pages within a webpage, these are called nested web pages. These nested web pages in HTML can be developed with the help of the built-in <iframe> tag. It defines an inline frame. For example:

<!DOCTYPE html><html> <body> <h2>HTML Iframes example</h2> <p> specify the size of the iframe using the height and width attributes: </p> <iframe src=”https://intellipaat.com/” height=”500″ width=”700″></iframe> </body></html>

Q92. How can you add buttons in HTML?
Buttons can be added to an HTML web page by using the built-in Button tag.

<!DOCTYPE html><html><body><h2>Example of HTML Button Tag</h2><button name=”button” type=”button”>CLICK HERE</button></body></html>

Q93. What are the different types of headings in HTML?
There are six different types of headings in HTML. These are defined using the <h1> to <h6> tags. Each heading type has a different text size–<h1> being the largest and <h6> being the smallest. For example:

<!DOCTYPE html><html><body><h1>Place Heading 1 here</h1><h2>Place Heading 2 here</h2><h3>Place Heading 3 here</h3><h4>Place Heading 4 here</h4><h5>Place Heading 5 here</h5><h6>Place Heading 6 here</h6></body></html>

Q94. How do CSS precedence/cascading rules work? How does the !important directive affect the rules?
CSS style rules “cascade” in the sense that they follow an order of precedence. Global style rules apply first to HTML elements, and local style rules override them. For example, a style defined in a style element in a webpage overrides a style defined in an external style sheet. Similarly, an inline style that is defined in an HTML element in the page overrides any styles that are defined for that same element elsewhere. The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:p { color: #ff0000 !important; }p { color: #000000; }

Q95. What is microdata in HTML5?
Microdata are a group of name-value pairs that extract data for search engines and site crawlers. Each name-value pair is called a property and a group of them is called an item. Most search engines follow schema.org vocabulary for the extraction of microdata.

itemid – A unique, global identifier of an item
itemprop – Adds properties to an item
itemref – Provides a list of element IDs with additional properties
itemtype – Specifies the vocabulary’s URL that will be used to define itemprop
itemscope – Defines the itemtype’s scope that is associated with it

Q96. Explain HTML5 Graphics.
There are two kinds of graphics that are supported by HTML5:

Canvas – It is like drawing on a blank webpage. Different graphic designs can be added on web pages. There are various available methods for drawing different geometrical shapes. Following is an example of how it is used.

<!DOCTYPE HTML><html><head></head><body><canvas width=”300″ height=”300″ style=”border:2px solid;”></canvas></body></html>

SVG – SVG or Scalable Vector Graphics follows the XML format and these are used for diagrams or icons. Following is an example of how it is used.

<!DOCTYPE html><html><body><svg width=”400″ height=”110″><rect width=”300″ height=”100″ style=”fill:#FFF;stroke-width:2;stroke:#000″ /></svg></body></html>

Q97. What are the server-sent events in HTML5?
Server-sent events are those events that are pushed from the web server to the browsers. These events can be used to continuously update DOM elements.

In the case of polling, since every time an HTTP connection is established and torn down, there is a lot of overhead. In server-sent events, there the HTTP connection is long-lived, which is a big advantage over polling.

To use a server-sent event, <eventsource> is used. This element’s SRC attribute specifies the URL from which it sends a data stream that contains the events.

Q98. What are Web Workers?
Web workers are added to bring parallelism and async capabilities. They run in the background and perform computationally expensive tasks without yielding to make the page responsive. A separate thread has to be started for such tasks. Web workers don’t perform UI operations.

There are three types of web workers:

Dedicated Workers – Used by a single script
Shared Workers – Used by multiple scripts running in different windows, IFrames in HTML, etc.
Service Workers – Mostly used for push notifications and sync APIs and act as proxy servers between the web applications, the browser, and the network

Q99. What is the use of a novalidate attribute for the form tag in HTML5?
The value of a novalidate attribute is a boolean type. It shows whether the data being submitted by the form will be validated in advance or not. The forms can be submitted without validation by making the value false. This helps users to resume it later as well.

<form action = “” method = “get” novalidate>Name:<br><input type=”name” name=”sname”><br>Doubt:<br><input type=”number” name=”doubt”><br><input type=”submit” value=”Submit”></form>

Q100. What are the different ways of making an image responsive?

Art Direction – The landscape image fully shown in desktop layout can be zoomed in with the main subject in focus for a portrait layout by using <picture>.

For example:

For any other screen:

Resolution Switching – Instead of zooming and cropping, the images can be scaled accordingly with the help of vector graphics. It can be set to serve different pixel density screens as well.

For example SVG:

Q101.What is a manifest file in HTML5?
The manifest file lists down the resources that can be cached. This information is used by browsers making the web pages load faster than the first time. The manifest file contains three sections:

CACHE Manifest – Files that are needed to be cached
Network – Files that are never to be cached but always need a network connection
Fallback – Fallback files if a page is inaccessible

CACHE MANIFEST

# 2012-06-16 v1.0.0/style.css/logo.gif/main.jsNETWORK:login.phpFALLBACK:/html/ /offline.html<!DOCTYPE HTML><html manifest=”tutorial.appcache”>……</html>

Q102. What is the geolocation API in HTML5?
The geolocation API in HTML5 shares a client’s physical location with websites. It provides a unique experience to users and locale-based content based on their location. The geolocation API works with a new property of the global navigator object. Most of the modern browsers support this.

var geolocation = navigator.geolocation;

Q103. What happens if there is no text between the tags? Is there any effect on the display of the HTML file?
If there is no text between tags, there is nothing to format so no formatting will be there. Some tags, like tags that don’t have a closing tag (for example, the <img> tag), do not need to have text between them.

Q104. How can JavaScript be added to an HTML webpage?
JavaScript makes HTML web pages user-friendly and more interactive. Based on the user input, it allows one to interact with particular page elements. There are three ways one can add JavaScript:

i) Inline: JavaScript can be added to HTML elements directly whenever a certain event occurs. The code can be added using the attributes of the HTML tags that support it.
ii) Script block: A script block can be defined anywhere on the HTML code. When the browser reaches that specific part of the document, the script block will get executed. This is the reason why they are typically added at the bottom of HTML documents.

iii) External JavaScript file: JavaScript code can be imported from a separate file. This maintains a clutter-free HTML code. It is especially useful when there is a large amount of scripting added to an HTML webpage.

Q105. How can CSS styling be added in HTML?
There are three ways to add CSS in HTML:

Inline CSS: Inline CSS is used when there is less amount of styling required or where only a single element needs styling. Add the style attribute in the relevant tag to use inline styles.
External Style Sheet: External style sheets are used when the style is applied to several elements or HTML pages. Each page must be linked to the style sheet with the <link> tag.

Internal Style Sheet: Internal style sheets are used when an HTML document has a unique style and multiple elements need to be styled to follow the format. This styles sheet is added in the head section of an HTML page with the <style> tag.

<head> <style type=”text/css”> hr { color: sienna; } p { margin-left: 20px; } body { background-image: url(“images/back40.gif”); } </style></head>

HTML: Interview question and answer – Part 6

Leave a Reply Cancel reply