0% found this document useful (0 votes)

2 views105 pages

HTML Interview Questions

Uploaded by

rohithpranay0

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2 views105 pages

HTML Interview Questions

Uploaded by

rohithpranay0

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

HTML Interview Questions

Q. What is the difference between HTML and XHTML?

The Extensible Hypertext Markup Language, or XHTML, has two important notes for front enQ.
What is the difference between HTML and XHTML?
The Extensible Hypertext Markup Language, or XHTML, has two important notes for front end
developers.
1) It needs to be well formed, meaning all elements need to be closed and nested correctly or
you will return errors. 2) Since it is more strict than HTML it requires less preprocessing by the
browser, which may improve your sites performance.

Q. What are the building blocks of HTML5?

● Semantics: allowing you to describe more precisely what your content is.
● Connectivity: allowing you to communicate with the server in new and innovative ways.
● Offline and storage: allowing webpages to store data on the client-side locally and
operate offline more efficiently.
● Multimedia: making video and audio first-class citizens in the Open Web.
● 2D/3D graphics and effects: allowing a much more diverse range of presentation
options.
● Performance and integration: providing greater speed optimization and better usage of
computer hardware.
● Device access: allowing for the usage of various input and output devices.
● Styling: letting authors write more sophisticated themes.

Q. Why would you like to use a semantic tag?

● Search Engine Optimization, accessibility, repurposing, light code.
● Many visually impaired person rely on browser speech and semantic tag helps to
interpret page content clearly.
● Search engine needs to understand page content to rank and semantic tag helps.
● Semantic code aids accessibility. Specially, many people whose eyes are not good rely
on speech browsers to read pages to them. These programs cannot interpret pages very
well unless they are clearly explained.
● Help Search engines to better understand pages. Search engine need to understand
what your content is about when rank you properly on search engines. Semantic code
tends to improve your placement on search engines, as it is easier for the “search
engine spiders” to understand.
● It's easier to read and edit, which saves time and money during maintenance.

Q. What does a <DOCTYPE html> do?

A DOCTYPE is always associated to a DTD ( Document Type Definition ). A DTD defines how
documents of a certain type should be structured (i.e. a button can contain a span but not a div),
whereas a DOCTYPE declares what DTD a document supposedly respects (i.e. this document
respects the HTML DTD). For webpages, the DOCTYPE declaration is required. It is used to tell
user agents what version of the HTML specifications your document respects.
Once a user agent has recognized a correct DOCTYPE, it will trigger the no-quirks mode
matching this DOCTYPE forreading the document. If a user agent doesn’t recognize a correct
DOCTYPE, it will trigger the quirks mode.
Q. What happens when DOCTYPE is not given?
The web page is rendered in quirks mode. The web browsers engines use quirks mode to
support older browsers which does not follow the W3C specifications. In quirks mode CSS class
and id names are case insensitive. In standards mode they are case sensitive.

Q. What are the new form elements in HTML5?

There are five new form elements in the HTML5 forms specification: <datalist>, <output>,
<progress>, and <meter>.

2. Meter Tag
Indicates a numeric value that falls within a range. The tag supports a number of attributes:
value: If you don't specify a value, the first numeric value inside the <meter></meter> pair
becomes the value.
● max: The maximum possible value of the item.
● min: The minimum possible value of the item.
● high: If the value can be defined as a range, this is the high end of the range.
● low: If the value can defined as a range, this is the low end of that range.
● optimum: The optimal value of the element.
<p>Disk Usage: <meter value="0.2">20%</meter></p>

<p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter></p>

<p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>

3. Output Tag
It indicates a section of the page that can be modified by a script (usually JavaScript).
<form oninput="[Link]=parseInt([Link])+parseInt([Link])">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="100"> =
<output name="result" for="a b"></output>
</form>

4. Progress Tag
Indicates how much of a task has been completed (often marked as a percentage). It is
expected to be modified through JavaScript code.

<p>Progress: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>

function countNumbers() {
if(i < 100) {
i = i + 1;
[Link] = i;
// For browsers that don't support progress tag
[Link]("span")[0].textContent = i;
}

// Wait for sometime before running this script again

setTimeout("countNumbers()", 100);
}
countNumbers();
</script>

Q. How many new form elements are introduced in html5?

[Link] Element Description
01. color Gives the end user a native color picker to choose a color.

02. date Offers a datepicker.

03. datetime An element to choose both date and time.

04. datetime-local An element to choose both date and time, with local settings
support.

05. email A field for entering e-mail address(es).

06. month Choose a full month.

07. number Picking a number.

08. range Offers a slider to set to a certain value/position.

09. search A field for search queries.

10. tel Choosing a telephone number.

11. time Input a certain time.

12. url Entering a URL.

13. week Picking a specific week.

Example:

<input type="color" value="#b97a57">

<input type="datetime" value="2020-06-09T20:35:34.32">

<input type="datetime-local" value="2020-06-09T22:41">

<input type="email" value="robert@[Link]">

<input type="month" value="2020-06">

<input type="number" value="4">

<input type="range" value="15">

<input type="search" value="[Any search text]">

<input type="tel" value="[Any numeric value]">

<input type="time" value="22:38">

<input type="url" value="[Link]

<input type="week" value="2020-W24">

Q. What is the difference between span tag and div tag?

The primary difference between div and span tag is their default behavior. By default, a <div> is
a block-level-element and a <span> is an inline element.
● <div> is a block level element which means it will render it on its own line with a width of
a 100% of the parent element.
● <span> is an inline element which means it will render on the same line as the previous
element, if it is also an inline element, and its width will be determined by its content.
Example: -

<div>Demo Text, with <span>some other</span> text.</div>

Q10. What are optional closing tags?

<p>, <li>, <td>, <tr>, <th>, <html>, <body>, etc. don't have to provide end tag. Whenever
browser hits a new tag it automatically ends the previous tag.

Q. What is a self closing tag?

In HTML5 it is not strictly necessary to close certain HTML tags. The tags that aren't required to
have specific closing tags are called “self closing” tags.
An example of a self closing tag is something like a line break (<br />) or the meta tag (<meta>).
This means that the following are both acceptable:
<meta charset="UTF-8">
...
<meta charset="UTF-8" />

Q. Explain the difference between block elements and inline

elements?
● block elements <h1>, <p>, <ul>, <ol>, <li>,
● inline elements <span>, <a>, <strong>, <i>, <img>

Q. What are semantic and non-semantic elements?

● Semantic elements: clearly describes its meaning to both the browser and the
developer. For example:
○ <form>, <table>, <article>, <aside>, <details>, <figcaption>, <figure>, <footer>,
<header>, <main>, <mark>, <nav>, <section>, <summary>, <time> clearly
defines its content.

● Non-semantic elements:
○ <div> and <span> tells nothing about its content.
Q. What is the purpose of the main element?
The HTML <main> element represents the dominant content of the <body> of a document. The
main content area consists of content that is directly related to or expands upon the central topic
of a document, or the central functionality of an application.
<main role="main">
<p>Geckos are a group of usually small, usually nocturnal lizards.
They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and
even windows.</p>
</main>

Note: A document mustn't have more than one <main> element that doesn’t have the
hidden attribute specified.

Q. Define semantic markup. What are the semantic meanings for

<section>, <article>, <aside>, <nav>, <header>, <footer> and
when/how should each be used in structuring html markup?
● <header> is used to contain introductory and navigational information about a section of
the page. This can include the section heading, the author's name, time and date of
publication, table of contents, or other navigational information.
● <article> is meant to house a self-contained composition that can logically be
independently recreated outside of the page without losing its meaning. Individual blog
posts or news stories are good examples.
● <section> is a flexible container for holding content that shares a common informational
theme or purpose.
● <footer> is used to hold information that should appear at the end of a section of content
and contain additional information about the section. Author's name, copyright

Q. When should you use section, div or article?

● <section>, the group of content inside is related to a single theme, and should appear
as an entry in an outline of the page. It's a chunk of related content, like a subsection of
a long article, a major part of the page (eg the news section on the homepage), or a
page in a webapp's tabbed interface. A section normally has a heading (title) and maybe
a footer too.
● <article>, represents a complete, or self-contained, composition in a document, page,
application, or site and that is, in principle, independently distributable or reusable, e.g.
in syndication. This could be a forum post, a magazine or newspaper article, a blog
entry, a user-submitted comment, an interactive widget or gadget, or any other
independent item of content.
● <div>, on the other hand, does not convey any meaning, aside from any found in its
class, lang and title attributes.

Q. Can a web page contain multiple <header> elements? What

about <footer> elements?
Yes, header elements can be used multiple times in documents. A <header> tag must be
present for all articles, sections, and pages, although a <footer> tag is not necessary.
From W3C standards
A header element is intended to usually contain the section's heading (an h1–h6 element or an
hgroup
element), but this is not required. The header element can also be used to wrap a section's
table of
contents, a search form, or any relevant logos.

The footer element represents a footer for its nearest ancestor sectioning content or sectioning
root
element. A footer typically contains information about its section such as who wrote it, links to
related
documents, copyright data, and the like.

Q. What is Character Encoding?

Character encoding is a method of converting bytes into characters. To validate or display an
HTML document properly, a program must choose a proper character encoding. This is
specified in the tag:
<meta charset="utf-8"/>

● UTF-8: A Unicode Translation Format that comes in 8-bit units that is, it comes in bytes.
A character in UTF8 can be from 1 to 4 bytes long, making UTF8 variable width.

Q. What is the purpose of meta tags?

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>HTML5 Meta Tags</title>

</head>
<body>
...
</body>
</html>

Q. What does async and defer refer in script tag? Describe the
difference between <script>, <script async> and <script defer>
● Async: Downloads the script file during HTML parsing and will pause the HTML parser to
execute it when it has finished downloading.
● Defer: Defer downloads the script file during HTML parsing and will only execute it after
the HTML parser has completed. Not all browsers support this.
The async attribute is used to indicate to the browser that the script file can be executed
asynchronously. The HTML parser does not need to pause at the point it reaches the script tag
to fetch and execute, the execution can happen whenever the script becomes ready after being
fetched in parallel with the document parsing.
The defer attribute tells the browser to only execute the script file once the HTML document has
been fully parsed.
Example

<script src="[Link]"></script>

<script async src="[Link]

<script defer src="[Link]"></script>

Q. Describe the difference between a cookie, sessionStorage and

localStorage?
● cookie: A text file saved on the users computer to store and retrieve data
● sessionStorage: Is memory space in a browser to save temporary data until the window
or tab is closed.
● localStorage: Like cookie, where data can be saved and retrieved after browser
sessions, but stored in memory like sessionStorage. Data is stored as plain key value
pairs and can be stored as Json objects.
cookie localStorage sessionStorage

Initiator Client or server. Server can use Client Client

Set-Cookie header

Expiry Manually set Forever On tab close

Persistent across Depends on whether expiration is Yes No

browser sessions set

Sent to server with Cookies are automatically being No No

every HTTP request sent via Cookie header

Capacity (per domain) 4kb 5MB 5MB

Accessibility Any window Any window Same tab

Note: If the user decides to clear browsing data via whatever mechanism provided by the
browser, this will clear out any cookie, localStorage, or sessionStorage stored. It's important to
keep this in mind when designing for local persistance, especially when comparing to
alternatives such as server side storing in a database or similar (which of course will persist
despite user actions).

Q. Does localStorage throw error after reaches maximum limits?

Yes
Example:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 localStorage</title>
</head>
<body>
<script type="text/javascript">
try{
if([Link]){ // Check if the localStorage object exists
var result = "";
var characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = [Link];
for(var i = 0; i < 10000; i++){
result += [Link]([Link]([Link]() * charactersLength));
[Link]("key"+i, result);
}
} else {
alert("Sorry, your browser do not support localStorage.");
}
} catch(e) {
[Link]('Exception: '+e);
}
</script>
</body>
</html>

Output
Exception: QuotaExceededError: Failed to execute 'setItem' on 'Storage':
Setting the value of 'key3230' exceeded the quota.

Q. Why to use IndexedDB instead of WebSQL in HTML5?

1. WebSQL
It is an API that is only supported in Chrome and Safari (and Android and iOS by extension). It
provides an asynchronous, transactional interface to SQLite. Since 2010, it has been
deprecated in favor of IndexedDB.
Advantages
● Supported on major mobile browsers (Android Browser, Mobile Safari, Opera Mobile) as
well as several desktop browsers (Chrome, Safari, Opera).
● Good performance generally, being an asynchronous API. Database interaction won’t
lock up the user interface. (Synchronous API is also available for WebWorkers.)
● Good search performance, since data can be indexed according to search keys.
● Robust, since it supports a transactional database model.
● Easier to maintain integrity of data, due to rigid data structure.
Disadvantages
● Deprecated. Will not be supported on IE or Firefox, and will probably be phased out from
the other browsers at some stage.
● Steep learning curve, requiring knowledge of relational databases and SQL.
● Suffers from object-relational impedance mismatch.
● Diminishes agility, as database schema must be defined upfront, with all records in a
table matching the same structure.

2. IndexedDB
It is the successor to both LocalStorage and WebSQL, designed to replace them as the “one
true” browser database. It exposes an asynchronous API that supposedly avoids blocking the
DOM, but as we'll see below, it doesn't necessarily live up to the hype. Browser support is
extremely spotty, with only Chrome and Firefox having fully usable implementations.
Advantages
● Good performance generally, being an asynchronous API. Database interaction won’t
lock up the user interface. (Synchronous API is also available for WebWorkers.)
● Good search performance, since data can be indexed according to search keys.
● Supports versioning.
● Robust, since it supports a transactional database model.
● Fairly easy learning curve, due to a simple data model.
● Decent browser support: Chrome, Firefox, mobile FF, IE10.
Disadvantages
● Very complex API resulting in large amounts of nested callbacks.

Q. Explain Application Cache in HTML5. OR What is a manifest

file in HTML?
HTML5 provides an application caching mechanism that lets web-based applications run offline.
Developers can use the Application Cache (AppCache) interface to specify resources that the
browser should cache and make available to offline users. Applications that are cached load
and work correctly even if users click the refresh button when they are offline.
Using an application cache gives an application the following benefits:
● Offline browsing: users can navigate a site even when they are offline.
● Speed: cached resources are local, and therefore load faster.
● Reduced server load: the browser only downloads resources that have changed from
the server.
Syntax:
<html manifest="[Link]">
...
</html>

Note: Using the application caching feature described here is at this point highly discouraged;
it's in the process of being removed from the Web platform. Use Service Workers instead. In
fact as of Firefox 44, when AppCache is used to provide offline support for a page a warning
message is now displayed in the console advising developers to use Service workers instead
(bug 1204581).
Q. What is the purpose of cache busting and how can you
achieve it?
Browsers have a cache to temporarily store files on websites so they don't need to be re-
downloaded again when switching between pages or reloading the same page. The server is
set up to send headers that tell the browser to store the file for a given amount of time. This
greatly increases website speed and preserves bandwidth.
However, it can cause problems when the website has been changed by developers because
the user’s cache still references old files. This can either leave them with old functionality or
break a website if the cached CSS and JavaScript files are referencing elements that no longer
exist, have moved or have been renamed.
Cache busting is the process of forcing the browser to download the new files. This is done by
naming the file something different to the old file.
A common technique to force the browser to re-download the file is to append a query string to
the end of the file.

<script src="js/[Link]?v=2"></script>

The browser considers it a different file but prevents the need to change the file name.

Q. What ARIA and screenreaders are, and how to make a

website accessible?
Screen readers are software programs that provide assistive technologies that allow people with
disabilities (such as no sight, sound or mouse-ing ability) to use web applications. You can
make your sites more accessible by following ARIA standards such as semantic HTML, alt
attributes and using [role=button] in the expected ways

Q. How to use data- attribute in html5

ToDo

Q. What is the purpose of the alt attribute on images?

The alt attribute provides alternative information for an image if a user cannot view it. The alt
attribute should be used to describe any images except those which only serve a decorative
purpose, in which case it should be left empty.
<img src="[Link]" alt="Stack of blueberry pancakes with powdered sugar">
Q. What does enctype='multipart/form-data' mean?
The enctype attribute specifies how the form-data should be encoded when submitting it to the
server.
Example: 01
<form action="[Link]" method="post" enctype="multipart/form-data">
<p>Please select the file you would like to upload.</p>
<input type="file" name="upload">
<br>
<input type="submit" value="Upload File">
</form>

Example: 02
<form action="/urlencoded?token=A87412B" method="POST" enctype="application/x-www-
form-urlencoded">
<input type="text" name="username" value=""/>
<input type="text" name="password" value=""/>
<input type="submit" value="Submit" />
</form>

Example: 03
<form action="[Link]" method="get" enctype="text/plain">
Name: <input type="text" name="name" />
Phone: <input type="number" name="phone" />
<input type="submit" value="Submit" />
</form>

[Link] Value Description

01. application/x-www- Default. All characters are encoded before sent (spaces
form-urlencoded are converted to “+” symbols, and special characters are
converted to ASCII HEX values)

02. multipart/form-data No characters are encoded. This value is required when

you are using forms that have a file upload control

03. text/plain Spaces are converted to “+” symbols, but no special

characters are encoded
Q. What is the difference between Select and Datalist?
For the select element, the user is required to select one of the options you've given. For the
datalist element, it is suggested that the user select one of the options you've given, but he can
actually enter anything he wants in the input.

Select
<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Q. Explain some of the pros and cons for CSS animations versus
JavaScript animations?
Regarding optimization and responsiveness the debate bounces back and forth but, the concept
is:
● CSS animations allows the browser to choose where the animation processing is done,
CPU or the GPU. (Central or Graphics Processing Unit)
● That said, adding many layers to a document will eventually have a performance hit.
● JS animation means more code for the user to download and for the developer to
maintain.
● Applying multiple animation types on an element is harder with CSS since all
transforming power is in one property transform
● CSS animations being declarative are not programmable therefore limited in capability.
Q. What does CORS stand for and what issue does it address?
Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain
communication from the browser. By building on top of the XMLHttpRequest object, CORS
allows developers to work with the same idioms as same-domain requests. CORS gives web
servers cross-domain access controls, which enable secure cross-domain data transfers.

Q. Can you describe the difference between progressive

enhancement and graceful degradation?
● Graceful degradation is when you initially serve the best possible user experience, with
all modern functionality, but use feature detection to “gracefully degrade” parts of your
application with a fallback or polyfill.
● Progressive enhancement ensures a page works at the lowest expected abilities of
browsers. So if you have a JavaScript web application that enhances a persons ability to
send information to a database with features like ajax – at the very least you need to
provide the ability for a person to send that same information without JavaScript
enabled. In this case a simple form with full-page refresh will do what you need.

Q. What is the DOM? How does the DOM work?

The DOM (Document Object Model) is a cross-platform API that treats HTML documents as a
tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects
that can be programmatically manipulated and any visible changes made to them are reflected
live in the document. In a browser, this API is available to JavaScript where DOM nodes can be
manipulated to change their styles, contents, placement in the document, or interacted with
through event listeners.
● The DOM was designed to be independent of any particular programming language,
making the structural representation of the document available from a single, consistent
API.
● [Link]() and [Link]() are common functions for
selecting DOM nodes.
● Setting the innerHTML property to a new value runs the string through the HTML parser,
offering an easy way to append dynamic HTML content to a node.

Q. How does the browser rendering engine work?

In order to render content the browser has to go through a series of steps:
● Document Object Model(DOM)
● CSS object model(CSSOM)
● Render Tree
● Layout
● Paint
Q. What is the difference between standards mode and quirks
mode?
In Quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5.
This is essential in order to support websites that were built before the widespread adoption of
web standards. In Standards mode, the behavior is described by the HTML and CSS
specifications.
For HTML documents, browsers use a <!DOCTYPE html> in the beginning of the document to
decide whether to handle it in quirks mode or standards mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Hello World!</title>
</head>
<body>
</body>
</html>

Q. What is the Critical Rendering Path?

● Constructing the DOM Tree
● Constructing the CSSOM Tree
● Running JavaScript - parser blocking resource
● Creating the Render Tree
● Generating the Layout
● Painting

Q. What are the Benefits of Server Side Rendering (SSR) Over

Client Side Rendering (CSR)?
● We are using server side rendering for two reasons:
○ performance benefit for our customers
○ Consistent SEO performance
● The main difference is that for SSR your server's response to the browser is the HTML
of your page that is ready to be rendered, while for CSR the browser gets a pretty empty
document with links to your javascript. That means for SSR your browser will start
rendering the HTML from your server without having to wait for all the JavaScript to be
downloaded and executed.
● for SSR, the user can start viewing the page while all of that is happening. For the CSR
world, you need to wait for all of the above to happen and then have the virtual dom
moved to the browser dom for the page to be viewable.

Q. Name 3 ways to decrease page load?

1. LocalStorage
2. Caching resources
3. DNS-prefetch (sample below)
4. Keep resources on a CDN

Q. Ways to improve website performance

● Minimize HTTP Requests
○ Sites are mainly slow because of too many (or too large) HTTP requests. We can
eliminate unnecessary request;
■ combined files: js to a file, css to a file
■ CSS sprites: CSS Sprites are the preferred method for reducing the
number of image requests. Combine your background images into a
single image and use the CSS background-image and background-
position properties to display the desired image segment.
● Use a Content Delivery Network CDN
○ A CDN is essentially many optimized servers around the world that deliver web
content to users based on their geographic location. This means big performance
improvements for site users. Because, say, if a person accessing your site in
India, they will be retrieving web content from a server nearby
● Optimize Images:
○ image sizes make a huge difference to site speed. The larger content/images,
the slower the site. we could:
■ Changing the resolution: reducing the “quality” of the image (and thereby
the file size)
■ Compressing the picture: increasing the efficiency of image data storage
■ Cropping the picture: when cropping, you are cutting out unneeded areas
and thus making the image smaller in size
● Put Scripts at the Bottom:
○ Javascript files can load after the rest of your page. The simplest solution is to
place your external Javascript files at the bottom of your page, just before the
close of your body tag. Now more of your site can load before your scripts.
Another method that allows even more control is to use the defer or async
attributes when placing external .js files on your site.
■ Async tags load the scripts while the rest of the page loads, but this
means scripts can be loaded out of order. Basically, lighter files load first.
This might be fine for some scripts, but can be disastrous for others.
■ The defer attribute loads your scripts after your content has finished
loading. It also runs the scripts in order. Just make sure your scripts run
so late without breaking your site.
● Add an Expires or a Cache-Control Header
○ Web page designs are getting richer and richer, which means more scripts,
stylesheets, images, and Flash in the page. A first-time visitor to your page may
have to make several HTTP requests, but by using the Expires header you make
those components cacheable. This avoids unnecessary HTTP requests on
subsequent page views. Expires headers are most often used with images, but
they should be used on all components including scripts, stylesheets, and Flash
components.
● Gzip Components
○ Compression reduces response times by reducing the size of the HTTP
response. Gzipping generally reduces the response size by about 70%.
● Put Stylesheets at the Top:
○ This is because putting stylesheets in the HEAD allows the page to render
progressively.
● Avoid CSS Expressions
● Use GET for AJAX Requests:
○ Ajax is that it provides instantaneous feedback to the user because it requests
information asynchronously from the backend web server
● Make JavaScript and CSS External:
○ Using external files in the real world generally produces faster pages because
the JavaScript and CSS files are cached by the browser. JavaScript and CSS
that are inlined in HTML documents get downloaded every time the HTML
document is requested. This reduces the number of HTTP requests that are
needed, but increases the size of the HTML document. On the other hand, if the
JavaScript and CSS are in external files cached by the browser, the size of the
HTML document is reduced without increasing the number of HTTP requests.
● Use get to ajax request:
○ POST is implemented in the browsers as a two-step process: sending the
headers first, then sending data. So it’s best to use GET, which only takes one
TCP packet to send (unless you have a lot of cookies).
● No 404s:
○ HTTP requests are expensive so making an HTTP request and getting a useless
response (i.e. 404 Not Found) is totally unnecessary and will slow down the user
experience without any benefit.
● Reduce Cookie Size:
○ HTTP cookies are used for a variety of reasons such as authentication and
personalization. Information about cookies is exchanged in the HTTP headers
between web servers and browsers. It’s important to keep the size of cookies as
low as possible to minimize the impact on the user’s response time.
● Reduce DNS Lookups
● Minify JavaScript and CSS
● Avoid Redirects
● Remove Duplicate Scripts
● Configure Etags
● Make Ajax Cacheable
● Post-load Components
● Preload Components
● Reduce the Number of DOM Elements
● Minimize the Number of iframes
● Minimize DOM Access
● Optimize CSS Sprites
● Don’t Scale Images in HTML
● Make [Link] Small and Cacheable
● Avoid Empty Image src

Q. Comparison of browsers engines like Chrome, Firefox, Internet

explorer, Safari?
● Chrome:
○ Layout rendering engine Webkit.
○ JavaScript engine V8
● Firefox:
○ Layout rendering engine Gecko.
○ JavaScript engine Spider monkey
● Internet explorer:
○ Layout rendering engine Trident.
○ JavaScript engine Chakra
● Safari:
○ Layout rendering engine Webkit.
○ JavaScript engine JavascriptCore i.e Nitro
Q. What does the lang attribute in html do?
● Helps in styling pages by using them in css :lang() pseudo class Spelling and grammar
checkers Languade detection by search engines

Q. What is desktop first and mobile first design approach?

● Desktop first : General selectors and styles designed to make the site look good on
DESKTOP screens defined globally. But they affect all devices, and must be overridden
by max-width media queries targeting minimum screen size
● Mobile First : General selectors and styles designed to make the site look good on small
MOBILE screens go here. But they affect all devices, and must be overridden by min-
width media queries targeting maximum scrren size
In desktop first approach the media queries will be written with respect to max-width
whereas in mobile first approach media queries will be written with respect to min-width

Q. What are data- attributes good for?

● The HTML5 data attribute lets you assign custom data to an element. When we want to
store more information/data about the element when no suitable HTML5 element or
attribute exists

Q. Explain the difference between layout, painting and

compositing?

● JavaScript: Typically JavaScript is used to handle work that will result in visual changes,
whether it's jQuery's animate function, sorting a data set, or adding DOM elements to the
page. It doesn't have to be JavaScript that triggers a visual change, though: CSS
Animations, Transitions, and the Web Animations API are also commonly used.
● Style calculations: This is the process of figuring out which CSS rules apply to which
elements based on matching selectors, for example, .headline or .nav > .nav__item.
From there, once rules are known, they are applied and the final styles for each element
are calculated.
● Layout: Once the browser knows which rules apply to an element it can begin to
calculate how much space it takes up and where it is on screen. The web's layout model
means that one element can affect others, for example the width of the <body> element
typically affects its children's widths and so on all the way up and down the tree, so the
process can be quite involved for the browser.
● Paint: Painting is the process of filling in pixels. It involves drawing out text, colors,
images, borders, and shadows, essentially every visual part of the elements. The
drawing is typically done onto multiple surfaces, often called layers.
● Compositing: Since the parts of the page were drawn into potentially multiple layers they
need to be drawn to the screen in the correct order so that the page renders correctly.
This is especially important for elements that overlap another, since a mistake could
result in one element appearing over the top of another incorrectly.

Q. Explain about HTML Layout Engines used by browsers?

Engine Status Embedded in

WebKit Active Safari browser, plus all browsers hosted on the iOS App Store

Blink Active Google Chrome and all other Chromium-based browsers like
Opera and Microsoft Edge

Gecko Active Firefox browser and Thunderbird email client, plus forks like
SeaMonkey and Waterfox

KHTML Discontinued Konqueror browser

Presto Discontinued formerly in the Opera browser

EdgeHTML Discontinued formerly in the Microsoft Edge browser

Trident Discontinued Internet Explorer browser and Microsoft Outlook email client

Q. How to make the page responsive?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or
enlarge a website, to make it look good on all devices (desktops, tablets, and phones).

1. Setting the viewport

3. Show different Images depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window
sizes.
<picture>
<source srcset="img_small.jpg" media="(max-width: 600px)">
<source srcset="img_large.jpg" media="(max-width: 1500px)">
<source srcset="[Link]">
<img src="img_small.jpg" alt="Image">
</picture>

4. Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”. That way the text
size will follow the size of the browser window.
<h1 style="font-size:10vw">Hello World</h1>

5. Media Queries
Using media queries you can define completely different styles for different browser sizes.
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}

Q. Does the following trigger http request at the time of page

load?
<img src="[Link]" style="visibility: hidden" alt="My photo">

<div style="display: none;">

● Yes
Q. What is difference between SVG and Canvas?

SVG
The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-
dimensional vector based graphics for the web. Unlike raster image (e.g. .jpg, .gif, .png, etc.), a
vector image can be scaled up or down to any extent without losing the image quality.
There are following advantages of using SVG over other image formats like JPEG, GIF, PNG,
etc.
● SVG images can be searched, indexed, scripted, and compressed.
● SVG images can be created and modified using JavaScript in real time.
● SVG images can be printed with high quality at any resolution.
● SVG content can be animated using the built-in animation elements.
● SVG images can contain hyperlinks to other documents.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>
<body>
<h2 align="center">HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="[Link]
<circle id="bluecircle" cx="60" cy="60" r="50" fill="blue" />
</svg>
</body>
</html>

Canvas
Canvas is a HTML element is used to draw graphics on a web page. It is a bitmap with an
“immediate mode” graphics application programming interface (API) for drawing on it. The
<canvas> element is only a container for graphics. In order to draw the graphics, you are
supposed to use a script. Canvas has several strategies when it comes to drawing paths,
boxes, circles, text & adding images.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="200" height="100" style="border:1px solid
#000000;"></canvas>
<script>
var c = [Link]('newCanvas');
var ctx = [Link]('2d');
[Link] = '#7cce2b';
[Link](0,0,300,100);
</script>
</body>
</html>

Differences between SVG and Canvas

SVG Canvas

Vector based (composed of shapes) Raster based (composed of pixel)

Multiple graphical elements, which become Single element similar to in behavior.

the part of the page’s DOM tree Canvas diagram can be saved to PNG or
JPG format

Modified through script and CSS Modified through script only

Good text rendering capabilities Poor text rendering capabilities

Give better performance with smaller number Give better performance with larger number
of objects or larger surface, or both of objects or smaller surface, or both

Better scalability. Can be printed with high Poor scalability. Not suitable for printing on
quality at any resolution. Pixelation does not higher resolution. Pixelation may occur
occur
Q. What is an iframe and how it works?
The <iframe> HTML element represents a nested browsing context, embedding another HTML
page into the current one. Each embedded browsing context has its own session history and
document. The browsing context that embeds the others is called the parent browsing context.
The topmost browsing context — the one with no parent — is usually the browser window,
represented by the Window object.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 iframe</title>
</head>
<style type="text/css">
iframe {
border: 1px solid #333;
width: 50%;
}
.output {
background: #eee;
}
</style>
<body>
<p>The Inline iFrame Example</p>
<iframe id="inlineFrameId"
title="Inline iFrame Example"
width="300"
height="200"
src="[Link]
0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.4785
69861898606&layer=mapnik">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>

The Iframe Tag Attributes

Attribute Description
allow indicates what features the iframe is allowed to use (e.g. fullscreen, camera,
autoplay)

allowfullscreen grants or denies permission for the iframe to appear in full-screen mode

height sets the height of the iframe (if not specified, the default height is 150
pixels)

loading sets lazy loading or eager loading for the iframe

referrerpolicy sets what referrer information should be sent in the request for the iframe

src the address of the resource included in the iframe

width sets the width of the iframe (if not specified, the default width is 300 pixels)

Note: Because each browsing context is a complete document environment, every <iframe> in a
page requires increased memory and other computing resources.

Q. Explain the use of rel=”nofollow”, rel=”noreferrer”,

rel=”noopener” attribute?

1. rel=”nofollow”
When rel="nofollow" tag is used, it instruct the search engines not to pass any PageRank from
one page to the other. It does not allow it to pass the authority to the specific website. The main
advantage of using this attribute is to control the spam attack.
There may be times, when you do not have control over what people publish on your websites,
for example some blog comments and some kind of forum posting.
Example
<a href="[Link] rel="nofollow">Link to [Link]</a>

2. rel=”noreferrer”
Noreferrer is related to analytics and tracking. The referrer value shows the previous page
where a user came from. By using the noreferrer attribute on a link, you are preventing other
pages from seeing that traffic came from a click on your link.
Example
<a href="[Link] rel="noreferrer">Link to [Link]</a>
3. rel=”noopener”
It prevents the new page from being able to access the [Link] property and will make it
run in a separate process. noopener tag works as a security fix which prevents malicious links
to take control over an opened tab.
Example
<a href="[Link] target="_blank" rel="noopener">Link to [Link]</a>

Q. How can you highlight text in HTML?

The <mark> HTML element represents text which is marked or highlighted for reference or
notation purposes, due to the marked passage's relevance or importance in the enclosing
context.
Example
<!DOCTYPE html>
<html>
<head>
<title>Highlight text in HTML</title>
</head>
<body>
<p>Search results for "salamander":</p>
<hr>
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the
Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other
small creatures.</p>
</body>
</html>

Q. How can I get indexed better by search engines?

HTML tags are used to influence the way our pages appear in search results. With the help of
certain tags, we can turn regular search snippets into rich snippets, and maybe even into
featured snippets. And, as our search snippets get more advanced, they are able to secure
better Search Engine Results Pages (SERP) positions and attract more traffic.
Here are all the HTML tags that still matter:

1. Title tag
Title tags are used by search engines to determine the subject of a page and display it in SERP.
As a rule of thumb, titles that are under 60 characters long will fit on most screens. In HTML, a
title tag looks like this:
<title>Your Title Goes Here</title>
2. Meta description tag
Meta description is a short paragraph of text used to describe your page in search results. The
function of meta description is similar to the title. It provides a little more detail about your page
and it helps users decide whether to visit your page or not. In HTML, a meta description tag
looks like this:
<meta name="description" content="Your description goes here">

3. Heading tags
Headings (H1-H6) are used to split your page into sections or chapters. Each heading is like a
small title within the page. In HTML, a heading looks like this:
<h1>Your heading goes here</h1>

4. Image alt attribute

The alt text attribute is a part of an image tag, and it provides a description for an image. Alt text
plays a major role in image optimization. It makes your images accessible both to search
engines (by telling them what a particular image means) and to people (by displaying an
alternative text in case a particular image cannot be loaded or by helping screen readers convey
images). In HTML it may look like this:
<img src="url" alt="Your image description goes here">

5. Open Graph tags

Open Graph (OG) tags are placed in the <head> section of a page and allow any webpage to
become a rich object in social networks. OG tags let you control how the information about your
page is represented when shared via social channels. This possibility may help you enhance
the performance of your links on social media, thus driving more click-throughs and increasing
conversions. In HTML, it can look like this:
<meta name="og:title" property="og:title" content="Your Open Graph Title Goes Here">

6. Robots tag
A robots tag is an element in the HTML of a page that informs search engines which pages on
your site should be indexed and which should not. Its functions are similar to [Link], but
[Link] gives suggestions. Whereas robots tags give instructions. In HTML, it can look like
this:
<meta name="robots" content="index, follow">
7. Canonical tag
A canonical tag is a way of telling search engines that a specific URL represents the master
copy of a page. Using the canonical tag prevents problems caused by identical or “duplicate”
content appearing on multiple URLs. Practically speaking, the canonical tag tells search engines
which version of a URL you want to appear in search results. In HTML, it may look like this:
<link href="URL" rel="canonical">

8. HTML5 semantic tags

One of the most important features of HTML5 is its semantics tags. Semantic tags refers to
syntax that makes the HTML more comprehensible by better defining the different sections and
layout of web pages. It makes web pages more informative and adaptable, allowing browsers
and search engines to better interpret content. For example, instead of using <div
id="header"></div> you can use a <header></hrader> tag.
Q. What is the difference between an “attribute” and a “property”
in HTML?
Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model)
nodes.
Example
<input id="inputId" type="text" value="Hello World!" />

The value property reflects the current text-content inside the input box, whereas the value
attribute contains the initial text-content of the value attribute from the HTML source code
Difference between HTML attributes and DOM properties:
Attribute Property

Attributes are defined by HTML. Properties are defined by the DOM.

The value of an attribute is constant. The value of a property is variable.

These are used to initialize the DOM properties. No such job defined.

Q. How do you set IE compatibility mode?

X-UA-Compatible is a document mode meta tag that allows to choose what version of Internet
Explorer the page should be rendered as. It is used by Internet Explorer 8 to specify whether a
page should be rendered as IE 7 (compatibility view) or IE 8 (standards view).
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>

Emulating the version tells the browser to use the DOCTYPE to determine how to render
content. pages without a DOCTYPE will be rendered in quirks mode. Edge mode tells Windows
Internet Explorer to display content in the highest mode available, which actually breaks the
“lock-in” paradigm. With Internet Explorer 8, this is equivalent to IE8 mode.
Setting the Meta Element
The meta element includes a content attribute that enables you to specify the mode that content
is rendered in for the webpage, as the following table shows.
Value Rendering mode

IE=edge Display content in the highest mode available

IE=9 Use the Windows Internet Explorer 9 standards rendering mode

IE=8 Use the Internet Explorer 8 standards rendering mode

IE=7 Use the Windows Internet Explorer 7 standards rendering mode

IE=5 Use the Microsoft Internet Explorer 5 standards rendering mode

Note: It is recommended that Web developers restrict their use of Edge mode to test pages and
other non-production uses because of the possible unexpected results of rendering page
content in future versions of Windows Internet Explorer.

Q. What is an optional tag?

The following lists all optional tags.
Tag Description

<area>

<base>

<body>

<br>

<col>

<dd>

<dt>

<hr>

<html>

<img>

<input>

<li>

<link>

<meta>

<p>

<param>

<rp>

<rt>

<tbody>

<th>

<thead>

<tr>

<track>

<wbr>

Q. What is an HTML preprocessor? Have you used different

Q. How do you change the direction of html text?

The default text direction in HTML is left-to-right. However, when developing web content and
applications, we may need to set it to right-to-left, for instance, to cater for languages such as
Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi.
We can set text direction in HTML in one of two ways:
● With the HTML dir attribute
● With the CSS direction property
Example

<element dir="ltr|rtl|auto">

<textarea dir="rtl"></textarea>
Attribute Values
Value Description

ltr Default. Left-to-right text direction

rtl Right-to-left text direction

auto Let the browser figure out the text direction, based on the content

Q. When is it appropriate to use the small element?

The <small> HTML element represents side-comments and small print, like copyright and legal
text, independent of its styled presentation. By default, it renders text within it one font-size
smaller, such as from small to x-small.
Example
<!DOCTYPE html>
<html>
<head>
<title>Small Element</title>
</head>
<style>
small {
font-size: .7em
}
</style>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr>
<p><small>The content is licensed under a W3C License.</small></p>
</body>
</html>

Q. How do you serve a page with content in multiple languages?

The lang attribute specifies the language of the element's content.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Multilanguage Page</title>
</head>
<body>
<h2>English</h2>
<p lang="en">This is demo text</p>

<h2>French</h2>
<p lang="fr">Ceci est un texte de démonstration</p>

<h2>Spanish</h2>
<p lang="es">Este es un texto de demostración</p>
</body>
</html>

Q. What is the difference between <section> and <div>?

The <section> tag creates independent sections within a webpage having logically connected
content. And the <div> tag is an empty container specifying a division or a section.
The <section> Element
According to the W3C specification, the <section> tag means that the content inside this
element is grouped. In other words, the content relates to a single theme. It must be an entry in
the outline of the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Section Tag Example</title>
</head>
<body>
<h1>W3Docs</h1>
<section>
<h2>W3Docs Sections</h2>
<ul>
<li>Books</li>
<li>Quizzes</li>
<li>Snippets</li>
</ul>
</section>
<section>
<h3>Books</h3>
<p>Learn HTML</p>
<p>Learn CSS</p>
<p>Learn Javascript</p>
</section>
</body>
</html>

The <div> Element

Q. Discuss the differences between an HTML specification and a

browser's implementation thereof.
HTML specifications such as HTML5 define a set of rules that a document must adhere to in
order to be “valid” according to that specification. In addition, a specification provides
instructions on how a browser must interpret and render such a document.
A browser is said to “support” a specification if it handles valid documents according to the rules
of the specification. As of yet, no browser supports all aspects of the HTML5 specification
(although all of the major browser support most of it), and as a result, it is necessary for the
developer to confirm whether the aspect they are making use of will be supported by all of the
browsers on which they hope to display their content. This is why cross-browser support
continues to be a headache for developers, despite the improved specificiations.
In addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one
that contains syntactical errors), invalid documents may contain anything, and it is impossible
for the specification to handle all possibilities comprehensively. Thus, many decisions about
how to handle malformed documents are left up to the browser.

Q. Why you would use a srcset attribute in an image tag? Explain

the process the browser used when evaluating the content of this
attribute.
The srcset attribute allows to define a list of different image resources along with size
information so that browser can pick the most appropriate image based on the actual device's
resolution.
Syntax
<img
srcset="
url size,
url size,
url size "
src="default url"
>

1. Using display density descriptor

srcset provides a comma-separated list of image resources along with display density it should
be used, for example1x, 2x etc.
Example
<img src="[Link]"
srcset="[Link],
image_2x.jpg 2x"
/>

2. Using width descriptor

The syntax is similar to the display density descriptor, but instead of display density values, we
provide the actual width of the image.
Example
<img src="[Link]"
srcset="[Link] 300w,
[Link] 600w,
[Link] 900w"
/>
Q. What is accessibility & ARIA role means in a web application?
The Accessible Rich Internet Applications (ARIA) Suite, defines a way to make Web content
and Web applications more accessible to people with disabilities. It especially helps with
dynamic content and advanced user interface controls developed with HTML, JavaScript, and
related technologies.
Screen readers work with regular HTML, but adding ARIA can provide screen reader users with
greater context and interactivity with the content on the page. ARIA has no effect on how
elements are displayed or behave in browsers. It does not add new functionality, and is meant
to act only as an extra descriptive layer for screen readers.
Without WAI-ARIA certain functionality used in Web sites is not available to some users with
disabilities, especially people who rely on screen readers and people who cannot use a mouse.
WAI-ARIA addresses these accessibility challenges, for example, by defining ways for
functionality to be provided to assistive technology. With WAI-ARIA, developers can make
advanced Web applications accessible and usable to people with disabilities.
ARIA attributes are divided into two categories: roles, and states & properties.

ARIA Roles
An ARIA role is added via a role="<ROLE TYPE>" attribute, and does not ever change for an
element once it is set. There are four categories of ARIA roles:
● landmark
● document
● widget
● abstract

Landmark ARIA Roles

Much like semantic HTML elements, landmark ARIA Roles are used to give users of assistive
technology a better way to navigate and identify the different parts of a web page.
Example
<nav class='mobile-nav' role='navigation' aria-label='Mobile Menu'> List of Links </nav>

While seeming redundant, is actually useful for screen readers. It wouldn't read the aria-label on
this navigation, which is really helpful for giving greater context to visually impaired users,
without the role="navigation".
The different landmark roles you can use are as follows, copied from the W3C Wiki Page:
● banner: A region that contains the prime heading or internal title of a page.
● complementary: Any section of the document that supports the main content, yet is
separate and meaningful on its own.
● contentinfo: A region that contains information about the parent document such as
copyrights and links to privacy statements.
● form: A region of the document that represents a collection of form-associated elements,
some of which can represent editable values that can be submitted to a server for
processing.
● main: Main content in a document. In almost all cases a page will have only one
role=“main”.
● navigation: A collection of links suitable for use when navigating the document or related
documents.
● search: The search tool of a Web document.
● application: A region declared as a web application, as opposed to a web document.

Document ARIA Roles

Document roles describe the structure of the content on the page, as opposed to the structure
of the whole page, which landmark roles describe. The roles in bold are the ones we think are
the most common document aria roles, and the ones which are useful to think about including in
your HTML.
● article: A section of a page that consists of a composition that forms an independent part
of a document, page, or site.
● columnheader
● definition: A definition of a term or concept.
● directory
● document
● group: A set of user interface objects which are not intended to be included in a page
summary or table of contents by assistive technologies.
● heading: A heading for a section of the page.
● img
● list
● listitem
● math
● note
● presentation
● region
● row
● rowgroup
● rowheader
● separator
● toolbar

Widget ARIA Roles

Widget Roles are used to describe what are often javascript-based interfaces, or the more
complicated parts of your web page's interface. The roles that are starred are the ones we think
are the most common elements widget aria roles, and the ones which are useful useful to think
about including in your HTML.
● alert: A message with important, and usually time-sensitive, information.
● alertdialog: A type of dialog that contains an alert message, where initial focus goes to
an element within the dialog.
● button: An input that allows for user-triggered actions when clicked or pressed.
● checkbox: A checkable input that has three possible values: true, false, or mixed.
● dialog: A dialog is an application window that is designed to interrupt the current
processing of an application in order to prompt the user to enter information or require a
response.
● gridcell
● link
● log
● marquee
● menuitem
● menuitemcheckbox
● menuitemradio
● option
● progressbar
● radio: A checkable input in a group of radio roles, only one of which can be checked at a
time.
● scrollbar
● slider
● spinbutton
● status
● tab: A grouping label providing a mechanism for selecting the tab content that is to be
rendered to the user.
● tabpanel: A container for the resources associated with a tab, where each tab is
contained in a tablist.
● textbox: Input that allows free-form text as its value.
● timer
● tooltip
● treeitem

Abstract ARIA Roles

Abstract aria roles are the basis of how the other ARIA roles are defined. These are not to be
used in HTML.

ARIA States & Properties

ARIA states and properties are often used to support ARIA roles that exist on a page. ARIA
Properties often describe relationships with other elements, and for the most part, do not
change once they're set.
ARIA States are more dynamic and are typically updated with JavaScript as a user interacts
with a page. Screen readers are notified when these states change, and can announce these
changes to users after an interaction takes place.
While there are 35 aria properties and states the W3C defines and which you can read more
about on the W3C site, here are the ones we believe to most commonly used and practical for
most web pages/applications.
● aria-activedescendant: Identifies the currently active descendant of a composite widget.
Use with autofill search suggestions.
● aria-autocomplete: Indicates whether user input completion suggestions are provided.
Use with autofill search suggestions.
● aria-checked (state): Indicates the current “checked” state of checkboxes, radio buttons,
and other widgets. You can set this to true, false, or mixed state.
● aria-controls: Identifies the element (or elements) whose contents or presence are
controlled by the current element.
● aria-describedby: Identifies the element (or elements) that describes the object.
● aria-disabled (state): Indicates that the element is perceivable but disabled, so it is not
editable or otherwise operable.
● aria-expanded (state): Indicates whether the element, or another grouping element it
controls, is currently expanded or collapsed.
● aria-hidden (state): Indicates that the element and all of its descendants are not visible
or perceivable to any user as implemented by the author.
● aria-invalid (state): Indicates the entered value does not conform to the format expected
by the application.
● aria-label: Defines a string value that labels the current element.
● aria-labelledby: Identifies the element (or elements) that labels the current element.
● aria-live: Indicates that an element is dynamic, changing, and will be updated, and
describes the types of updates the user can expect from the live region.
● aria-owns: Identifies an element (or elements) in order to define a visual, functional, or
contextual parent/child relationship between DOM elements where the DOM hierarchy
cannot be used to represent the relationship.
● aria-pressed (state): Indicates the current “pressed” state of toggle buttons.
● aria-required: Indicates that user input is required on the element before a form may be
submitted.
● aria-selected (state): Indicates the current “selected” state of various widgets.
●
d developers.
1) It needs to be well formed, meaning all elements need to be closed and nested correctly or
you will return errors. 2) Since it is more strict than HTML is requires less pre-processing by the
browser, which may improve your sites performance.

Q. What are the building blocks of HTML5?

Q. What are the semantic tags available in html5?

Q. Why you would like to use semantic tag?

Q. What does a <DOCTYPE html> do?

Q. What happens when DOCTYPE is not given?

The web page is rendered in quirks mode. The web browsers engines use quirks mode to
support older browsers which does not follow the W3C specifications. In quirks mode CSS class
and id names are case insensitive. In standards mode they are case sensitive.

Q. What are the new form elements in HTML5?

There are five new form elements in the HTML5 forms specification: <datalist>, <output>,
<progress>, and <meter>.

1. Datalist Tag
Allows to attach a list of suggestions to a text input element. As soon as the user begins to type
in the text field, the list of suggestions appears and the user can choose from the suggestions
with the mouse.
<p>Enter your favorite browser name:</p>
<input type="text" list="browsers" name="favorite_browser">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
2. Meter Tag
Indicates a numeric value that falls within a range. The tag supports a number of attributes:
value: If you don't specify a value, the first numeric value inside the <meter></meter> pair
becomes the value.
● max: The maximum possible value of the item.
● min: The minimum possible value of the item.
● high: If the value can be defined as a range, this is the high end of the range.
● low: If the value can defined as a range, this is the low end of that range.
● optimum: The optimal value of the element.
<p>Disk Usage: <meter value="0.2">20%</meter></p>

<p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter></p>

<p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>

4. Progress Tag
Indicates how much of a task has been completed (often marked as a percentage). It is
expected to be modified through JavaScript code.

<p>Progress: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>

function countNumbers() {
if(i < 100) {
i = i + 1;
[Link] = i;
// For browsers that don't support progress tag
[Link]("span")[0].textContent = i;
}

// Wait for sometime before running this script again

setTimeout("countNumbers()", 100);
}
countNumbers();
</script>

Q. How many new form elements are introduced in html5?

[Link] Element Description

01. color Gives the end user a native color picker to choose a color.

02. date Offers a datepicker.

03. datetime An element to choose both date and time.

04. datetime-local An element to choose both date and time, with local settings
support.

05. email A field for entering e-mail address(es).

06. month Choose a full month.

07. number Picking a number.

08. range Offers a slider to set to a certain value/position.

09. search A field for search queries.

10. tel Choosing a telephone number.

11. time Input a certain time.

12. url Entering a URL.

13. week Picking a specific week.

Example:
<input type="color" value="#b97a57">

<input type="date" value="2020-06-08">

<input type="datetime" value="2020-06-09T20:35:34.32">

<input type="datetime-local" value="2020-06-09T22:41">

<input type="email" value="robert@[Link]">

<input type="month" value="2020-06">

<input type="number" value="4">

<input type="range" value="15">

<input type="search" value="[Any search text]">

<input type="tel" value="[Any numeric value]">

<input type="time" value="22:38">

<input type="url" value="[Link]

<input type="week" value="2020-W24">

Q. What is difference between span tag and div tag?

The primary difference between div and span tag is their default behavior. By default, a <div> is
a block-level-element and a <span> is an inline element.
● <div> is a block level element which means it will render it on it's own line with a width of
a 100% of the parent element.
● <span> is an inline element which means it will render on the same line as the previous
element, if it is also an inline element, and it’s width will be determined by it's content.
<div>Demo Text, with <span>some other</span> text.</div>

Q. What are optional closing tag?

<p>, <li>, <td>, <tr>, <th>, <html>, <body>, etc. don't have to provide end tag. Whenever
browser hits a new tag it automatically ends the previous tag.

Q. What is a self closing tag?

Q. Explain the difference between block elements and inline

elements?
● block elements <h1>, <p>, <ul>, <ol>, <li>,
● inline elements <span>, <a>, <strong>, <i>, <img>

Q. What are semantic and non-semantic elements?

● Semantic elements: clearly describes its meaning to both the browser and the
developer. For example: <form>, <table>, <article>, <aside>, <details>, <figcaption>,
<figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
clearly defines its content.
● Non-semantic elements: <div> and <span> tells nothing about its content.

Q. What is the purpose of main element?

The HTML <main> element represents the dominant content of the <body> of a document. The
main content area consists of content that is directly related to or expands upon the central topic
of a document, or the central functionality of an application.
<main role="main">
<p>Geckos are a group of usually small, usually nocturnal lizards.
They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and
even windows.</p>
</main>

Note: A document mustn't have more than one <main> element that doesn’t have the hidden
attribute specified.

Q. Define semantic markup. What are the semantic meanings for

<section>, <article>, <aside>, <nav>, <header>, <footer> and
when/how should each be used in structuring html markup?
● <header> is used to contain introductory and navigational information about a section of
the page. This can include the section heading, the author's name, time and date of
publication, table of contents, or other navigational information.
● <article> is meant to house a self-contained composition that can logically be
independently recreated outside of the page without losing it's meaining. Individual blog
posts or news stories are good examples.
● <section> is a flexible container for holding content that shares a common informational
theme or purpose.
● <footer> is used to hold information that should appear at the end of a section of content
and contain additional information about the section. Author's name, copyright
information, and related links are typical examples of such content.

Q. When should you use section, div or article?

● <section>, group of content inside is related to a single theme, and should appear as an
entry in an outline of the page. It's a chunk of related content, like a subsection of a long
article, a major part of the page (eg the news section on the homepage), or a page in a
webapp's tabbed interface. A section normally has a heading (title) and maybe a footer
too.
● <article>, represents a complete, or self-contained, composition in a document, page,
application, or site and that is, in principle, independently distributable or reusable, e.g.
in syndication. This could be a forum post, a magazine or newspaper article, a blog
entry, a user-submitted comment, an interactive widget or gadget, or any other
independent item of content.
● <div>, on the other hand, does not convey any meaning, aside from any found in its
class, lang and title attributes.

Q. Can a web page contain multiple <header> elements? What

Q. What is a physical tag and logical tag in HTML?

ToDo

Q. What is Character Encoding?

● UTF-8: A Unicode Translation Format that comes in 8-bit units that is, it comes in bytes.
A character in UTF8 can be from 1 to 4 bytes long, making UTF8 variable width.

Q. What is the purpose of meta tags?

The META elements can be used to include name/value pairs describing properties of the
HTML document, such as author, expiry date, a list of keywords, document author etc.
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="language" content="english">
<meta http-equiv="content-type" content="text/html">
<meta name="author" content="Author Name">
<meta name="designer" content="Designer Name">
<meta name="publisher" content="Publisher Name">
<meta name="no-email-collection" content="name@[Link]">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<meta name="description" content="Project Description">
<meta name="keywords" content="Software Engineer,Product Manager,Project
Manager,Data Scientist">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="7 days">
<meta name="distribution" content="web">
<meta name="robots" content="noodp">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>HTML5 Meta Tags</title>

</head>
<body>
...
</body>
</html>
Q. What does async and defer refer in script tag? Describe the
difference between <script>, <script async> and <script defer>
● Async: Downloads the script file during HTML parsing and will pause the HTML parser to
execute it when it has finished downloading.
● Defer: Defer downloads the script file during HTML parsing and will only execute it after
the HTML parser has completed. Not all browsers support this.
The async attribute is used to indicate to the browser that the script file can be executed
asynchronously. The HTML parser does not need to pause at the point it reaches the script tag
to fetch and execute, the execution can happen whenever the script becomes ready after being
fetched in parallel with the document parsing.
The defer attribute tells the browser to only execute the script file once the HTML document has
been fully parsed.
Example

<script src="[Link]"></script>

<script async src="[Link]

<script defer src="[Link]"></script>

Q. Describe the difference between a cookie, sessionStorage and

Expiry Manually set Forever On tab close

Persistent across Depends on whether expiration is Yes No

browser sessions set

Sent to server with Cookies are automatically being No No

every HTTP request sent via Cookie header

Capacity (per domain) 4kb 5MB 5MB

Accessibility Any window Any window Same tab

Q. Does localStorage throw error after reaches maximum limits?

Yes
Example:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 localStorage</title>
</head>
<body>
<script type="text/javascript">
try{
if([Link]){ // Check if the localStorage object exists

var result = "";

Output
Exception: QuotaExceededError: Failed to execute 'setItem' on 'Storage':
Setting the value of 'key3230' exceeded the quota.

Q. Why to use IndexedDB instead of WebSQL in HTML5?

Q. Explain Application Cache in HTML5. OR What is a manifest

Q. What is the purpose of cache busting and how can you

achieve it?
Browsers have a cache to temporarily store files on websites so they don't need to be re-
downloaded again when switching between pages or reloading the same page. The server is
set up to send headers that tell the browser to store the file for a given amount of time. This
greatly increases website speed and preserves bandwidth.
However, it can cause problems when the website has been changed by developers because
the user’s cache still references old files. This can either leave them with old functionality or
break a website if the cached CSS and JavaScript files are referencing elements that no longer
exist, have moved or have been renamed.
Cache busting is the process of forcing the browser to download the new files. This is done by
naming the file something different to the old file.
A common technique to force the browser to re-download the file is to append a query string to
the end of the file.

<script src="js/[Link]?v=2"></script>

The browser considers it a different file but prevents the need to change the file name.

Q. What ARIA and screenreaders are, and how to make a

Q. How to use data- attribute in html5

ToDo

Q. What is the purpose of the alt attribute on images?

Q. What does enctype='multipart/form-data' mean?

The enctype attribute specifies how the form-data should be encoded when submitting it to the
server.
Example: 01
<form action="[Link]" method="post" enctype="multipart/form-data">
<p>Please select the file you would like to upload.</p>
<input type="file" name="upload">
<br>
<input type="submit" value="Upload File">
</form>
Example: 02
<form action="/urlencoded?token=A87412B" method="POST" enctype="application/x-www-
form-urlencoded">
<input type="text" name="username" value=""/>
<input type="text" name="password" value=""/>
<input type="submit" value="Submit" />
</form>

Example: 03
<form action="[Link]" method="get" enctype="text/plain">
Name: <input type="text" name="name" />
Phone: <input type="number" name="phone" />
<input type="submit" value="Submit" />
</form>

[Link] Value Description

01. application/x-www- Default. All characters are encoded before sent (spaces
form-urlencoded are converted to “+” symbols, and special characters are
converted to ASCII HEX values)

02. multipart/form-data No characters are encoded. This value is required when

you are using forms that have a file upload control

03. text/plain Spaces are converted to “+” symbols, but no special

characters are encoded

Q. What is difference between Select and Datalist?

For the select element, the user is required to select one of the options you've given. For the
datalist element, it is suggested that the user select one of the options you've given, but he can
actually enter anything he wants in the input.

Datalist
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Q. What does CORS stand for and what issue does it address?
Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain
communication from the browser. By building on top of the XMLHttpRequest object, CORS
allows developers to work with the same idioms as same-domain requests. CORS gives web
servers cross-domain access controls, which enable secure cross-domain data transfers.

Q. Can you describe the difference between progressive

Q. What is the DOM? How does the DOM work?

Q. How does the browser rendering engine work?

Q. What is Critical Rendering Path?

● Constructing the DOM Tree
● Constructing the CSSOM Tree
● Running JavaScript - parser blocking resource
● Creating the Render Tree
● Generating the Layout
● Painting

Q. What are the Benefits of Server Side Rendering (SSR) Over

Q. Name 3 ways to decrease page load?

1. LocalStorage
2. Caching resources
3. DNS-prefetch (sample below)
4. Keep resources on a CDN

Q. Ways to improve website performance

Q. Comparison of browsers engines like Chrome, Firefox, Internet

Q. What is desktop first and mobile first design approach?

Q. What are data- attributes good for?

● The HTML5 data attribute lets you assign custom data to an element. When we want to
store more information/data about the element when no suitable HTML5 element or
attribute exists

Q. Explain the difference between layout, painting and

compositing?

Q. Explain about HTML Layout Engines used by browsers?

Engine Status Embedded in

WebKit Active Safari browser, plus all browsers hosted on the iOS App Store

Blink Active Google Chrome and all other Chromium-based browsers like
Opera and Microsoft Edge

Gecko Active Firefox browser and Thunderbird email client, plus forks like
SeaMonkey and Waterfox

KHTML Discontinued Konqueror browser

Presto Discontinued formerly in the Opera browser

EdgeHTML Discontinued formerly in the Microsoft Edge browser

Trident Discontinued Internet Explorer browser and Microsoft Outlook email client

Q. How to make page responsive?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or
enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

1. Setting the viewport

3. Show different Images depending on Browser Width

4. Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”. That way the text
size will follow the size of the browser window.
<h1 style="font-size:10vw">Hello World</h1>

Q. Does the following trigger http request at the time of page

load?
<img src="[Link]" style="visibility: hidden" alt="My photo">

<div style="display: none;">

● Yes
Q. List the API available in HTML5?

1. High Resolution Time API

The High Resolution Time API provides the current time in sub-millisecond resolution and such
that it is not subject to system clock skew or adjustments.
It exposes only one method, that belongs to the [Link] object, called now(). It
returns a DOMHighResTimeStamp representing the current time in milliseconds. The timestamp
is very accurate, with precision to a thousandth of a millisecond, allowing for accurate tests of
the performance of our code.
var time = [Link]();

2. User Timing API

It allows us to accurately measure and report the performance of a section of JavaScript code. It
deals with two main concepts: mark and measure. The former represents an instant
(timestamp), while the latter represents the time elapsed between two marks.
[Link]("startFoo");
// A time consuming function
foo();
[Link]("endFoo");

[Link]("durationFoo", "startFoo", "endFoo");

3. Network Information API

This API belongs to the connection property of the [Link] object. It exposes two
read-only properties: bandwidth and metered. The former is a number representing an
estimation of the current bandwidth, while the latter is a Boolean whose value is true if the
user's connection is subject to limitation and bandwidth usage, and false otherwise.
[Link] API Description

01. [Link] Network Type

02. [Link] Effective bandwidth estimate ( downlink )

03. [Link] Effective round-trip time estimate ( rtt )

04. [Link] Upper bound on the downlink speed of the first
ax network hop ( downlinkMax )

05. [Link] Effective connection type

06. [Link] True if the user has requested a reduced data

usage mode from the user agent ( saveData )

4.) Vibration API

It exposes only one method, vibrate(), that belongs to the [Link] object. This method
accepts one parameter specifying the duration of the vibration in milliseconds. The parameter
can be either an integer or an array of integers. In the second case, it's interpreted as
alternating vibration times and pauses.
// Vibrate once for 2 seconds
[Link](2000);

5.) Battery Status API

The Battery Status API exposes four properties (charging, chargingTime, discharingTime, and
level) and four events. The properties specify if the battery is in charge, the seconds remaining
until the battery is fully charged, the seconds remaining until the battery is fully discharged, and
the current level of the battery. These properties belongs to the battery property of the
[Link] object.
// Retrieves the percentage of the current level of the device's battery
var percentageLevel = [Link] * 100;

6.) Page Visibility API

The Page Visibility API enables us to determine the current visibility state of the page. The Page
Visibility API is especially useful for saving resources and improving performance by letting a
page avoid performing unnecessary tasks when the document isn't visible.
//[Link] retuns true if page is not visible.
[Link]('Page Visibility: '+[Link]);

7.) Fullscreen API

The Fullscreen API provides a way to request fullscreen display from the user, and exit this
mode when desired. This API exposes two methods, requestFullscreen() and exitFullscreen(),
allowing us to request an element to become fullscreen and to exit fullscreen.
[Link]("keypress", function(e) {
if ([Link] === 13) { // Enter Key
toggleFullScreen();
}
}, false);

function toggleFullScreen() {
if (![Link]) {
[Link]();
} else {
if ([Link]) {
[Link]();
}
}
}

Q. How geolocation api works in html5?

The Geolocation API allows the user to provide their location to web applications if they so
desire. For privacy reasons, the user is asked for permission to report location information.
The Geolocation API is published through the [Link] object.
if ("geolocation" in navigator) {
/* geolocation is available */
} else {
/* geolocation IS NOT available */
}

Example
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<body>
<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>
</body>

if (![Link]){
[Link] = "<p>Geolocation is not supported by your browser</p>";
return;
}

function success(position) {
var latitude = [Link];
var longitude = [Link];

[Link] = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude +

'°</p>';

var img = new Image();

[Link] = "[Link] + latitude + "," +
longitude + "&zoom=13&size=300x300&sensor=false";

[Link](img);
}

function error() {
[Link] = "Unable to retrieve your location";
}

[Link] = "<p>Locating…</p>";

[Link](success, error); //function to get the current

position of the device
}
</script>
</html>

Q. What is the use of WebSocket API?

The WebSocket API is an advanced technology that makes it possible to open a two-way
interactive communication session between the user's browser and a server. With this API, you
can send messages to a server and receive event-driven responses without having to poll the
server for a reply.
Interfaces
[Link] API Description

01. WebSocket The primary interface for connecting to a WebSocket server and
then sending and receiving data on the connection.

02. CloseEvent The event sent by the WebSocket object when the connection
closes.

03. MessageEvent The event sent by the WebSocket object when a message is
received from the server.

Example
// Create WebSocket connection.
const socket = new WebSocket('[Link]

// Connection opened
[Link]('open', function(event) {
[Link]('Hello Server!');
});

// Listen for messages

[Link]('message', function(event) {
[Link]('Message from server ', [Link]);
});

Q. Explain about HTML Canvas?

canvas is an HTML element which can be used to draw graphics via JavaScript. This can, for
instance, be used to draw graphs, combine photos, or create animations.
Colors, Styles, and Shadows
Property Description

fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing

strokeStyle Sets or returns the color, gradient, or pattern used for strokes

shadowColor Sets or returns the color to use for shadows

shadowBlur Sets or returns the blur level for shadows

shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape

shadowOffsetY Sets or returns the vertical distance of the shadow from the shape

Line Styles
Property Description

lineCap Sets or returns the style of the end caps for a line

lineJoin Sets or returns the type of corner created, when two lines meet

lineWidth Sets or returns the current line width

miterLimit Sets or returns the maximum miter length

Rectangles
Method Description

rect() Creates a rectangle

fillRect() Draws a “filled” rectangle

strokeRect() Draws a rectangle (no fill)

clearRect() Clears the specified pixels within a given rectangle

Paths
Method Description

fill() Fills the current drawing (path)

stroke() Actually draws the path you have defined

beginPath() Begins a path, or resets the current path

moveTo() Moves the path to the specified point in the canvas, without creating a line

closePath() Creates a path from the current point back to the starting point

lineTo() Adds a new point and creates a line to that point from the last specified point
in the canvas

clip() Clips a region of any shape and size from the original canvas

arc() Creates an arc/curve (used to create circles, or parts of circles)

arcTo() Creates an arc/curve between two tangents

Transformations
Method Description

scale() Scales the current drawing bigger or smaller

rotate() Rotates the current drawing

translate() Remaps the (0,0) position on the canvas

transform() Replaces the current transformation matrix for the drawing

setTransform() Resets the current transform to the identity matrix. Then runs transform()

Text
Property Description
font Sets or returns the current font properties for text content

textAlign Sets or returns the current alignment for text content

textBaseline Sets or returns the current text baseline used when drawing text

fillText() Draws “filled” text on the canvas

strokeText() Draws text on the canvas (no fill)

measureText() Returns an object that contains the width of the specified text

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas</title>
</head>
<body>

<div><b>Straight Line</b></div>
<canvas id="line" width="300" height="0" style="border: 1px solid
#333;"></canvas><br/><br/>

<div><b>Rectangle</b></div>
<canvas id="rectangle" width="300" height="200" style="border: 1px solid
#999;"></canvas><br/><br/>

<div><b>Rectangle with Style</b></div>

<canvas id="rect">This browser does not support Canvas!</canvas><br/><br/>

<div><b>Circle</b></div>
<canvas id="circle">This browser does not support Canvas!</canvas><br/><br/>
<script type="text/javascript">
// Text with style
var canvas = [Link]('text');
var context = [Link]('2d');
[Link] = '20pt Calibri';
[Link] = 'blue';
[Link]('Hello World!', 50, 50);

// Straight Line
var canvas = [Link]("line");
var context = [Link]("2d");
[Link](50, 150);
[Link](250, 50);
[Link]();

// Rectange with style

var canvas = [Link]("rect");
var context = [Link]("2d");
[Link] = "#FF0000";
[Link](0, 0, 300, 200);

// Circle
var canvas = [Link]("circle");
var context = [Link]("2d");
[Link]();
[Link](95, 50, 40, 0, 2 * [Link]);
[Link]();
</script>
</body>
</html>

Q. What is difference between SVG and Canvas?

Differences between SVG and Canvas

SVG Canvas

Vector based (composed of shapes) Raster based (composed of pixel)

Multiple graphical elements, which become Single element similar to in behavior.

the part of the page’s DOM tree Canvas diagram can be saved to PNG or
JPG format

Modified through script and CSS Modified through script only

Good text rendering capabilities Poor text rendering capabilities

Give better performance with smaller number Give better performance with larger number
of objects or larger surface, or both of objects or smaller surface, or both

Better scalability. Can be printed with high Poor scalability. Not suitable for printing on
quality at any resolution. Pixelation does not higher resolution. Pixelation may occur
occur

Q. Explain Drag and Drop in HTML5?

HTML5 drag-and-drop uses the DOM event model and drag events inherited from mouse
events. A typical drag operation begins when a user selects a draggable element, drags the
element to a droppable element, and then releases the dragged element.
Event Description

Drag It fires every time when the mouse is moved while the object is being dragged.

Dragstart It is a very initial stage. It fires when the user starts dragging object.
Dragenter It fires when the user moves his/her mouse cursur over the target element.

Dragover This event is fired when the mouse moves over an element.

Dragleave This event is fired when the mouse leaves an element.

Drop Drop It fires at the end of the drag operation.

Dragend It fires when user releases the mouse button to complete the drag operation.

Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
[Link]();
}

function drag(ev) {
[Link]("text", [Link]);
}

function drop(ev) {
[Link]();
var data = [Link]("text");
[Link]([Link](data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336"
height="69">
</body>
</html>
Q. Explain Microdata in HTML5?
Microdata is a standardized way to provide additional semantics in web pages. Microdata lets
you define your own customized elements and start embedding custom properties in your web
pages. At a high level, microdata consists of a group of name-value pairs.
The groups are called items, and each name-value pair is a property. Items and properties are
represented by regular elements. Search engines benefit greatly from direct access to this
structured data because it allows search engines to understand the information on web pages
and provide more relevant results to users.
At a high level, microdata consists of a group of name-value pairs
● itemscope:- To create an item
● itemprop:- To add a property to an item
Example
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

Q. What are the HTML tags which deprecated in HTML5?

Deprecated Tags
The following elements are not available in HTML5 anymore and their function is better handled
by CSS.
[Link] Tags (Elements) Description

01. <acronym> Defines an acronym

02. <applet> Defines an applet

03. <basefont> Defines an base font for the page.

04. <big> Defines big text

05. <center> Defines centered text

06. <dir> Defines a directory list

07. <font> Defines text font, size, and color

08. <frame> Defines a frame

08. <frameset> Defines a set of frames

10. <isindex> Defines a single-line input field

11. <noframes> Defines a noframe section

12. <s> Defines strikethrough text

13. <strike> Defines strikethrough text

14. <tt> Defines teletype text

15. <u> Defines underlined text

Deprecated Attributes
Removed From the Elements
Attributes

rev link, a

charset link and a

shape a

coords a
longdesc img and iframe.

target link

nohref area

profile head

version html

name img

scheme meta

archive object

classid object

codebase object

codetype object

declare object

standby object

valuetype param

type param

axis td and t

abbr td and t
scope td

align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4,
h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.

alink body

link body

vlink body

text body

background body

bgcolor table, tr, td, th and body.

border table and object.

cellpadding table

cellspacing table

char col, colgroup, tbody, td, tfoot, th, thead and tr.

charoff col, colgroup, tbody, td, tfoot, th, thead and tr.

clear br

compact dl, menu, ol and ul.

frame table
compact dl, menu, ol and ul.

frame table

frameborder iframe

hspace img and object.

vspace img and object.

marginheight iframe

marginwidth iframe

noshade hr

nowrap td and th

rules table

scrolling iframe

size hr

type li, ol and ul.

valign col, colgroup, tbody, td, tfoot, th, thead and tr

width hr, table, td, th, col, colgroup and pre.

Q. How you can Use Modernizr in HTML5?

Modernizr is a JavaScript library that detects which HTML5 and CSS3 features visitor's browser
supports. In detecting feature support, it allows developers to test for some of the new
technologies and then provide fallbacks for browsers that do not support them. This is called
feature detection and is much more efficient than browser sniffing.

Using Modernizr with CSS

By default, Modernizr sets classes for all of your tests on the root element (<html> for websites).
This means adding the class for each feature when it is supported, and adding it with a no-
prefix when it is not (e.g. .feature or .no-feature).
.no-cssgradients .header {
background: url("images/[Link]");
}

.cssgradients .header {
background-image: linear-gradient(cornflowerblue, rebeccapurple);
}

Using Modernizr with JavaScript

Modernizr keeps track of the results of all of it's feature detections via the Modernizr object.
if ([Link]) {
alert("This browser supports HTML5 canvas!");
} else {
alert("no canvas :(");
}

Q. What is progressive rendering?

Progressive Rendering is the technique of sequentially rendering portions of a webpage in the
server and streaming it to the client in parts without waiting for the whole page to rendered.
It implies that once the important material is produced on the server, you may stream it to the
client without having to wait for non-critical stuff to be displayed. It combines the advantages of
both CSR (Client Side Rendering) and SSR (Server Side Rendering) (Server Side Rendering).

Client Side Rendering

Client Side Rendering (CSR) is a technique in which content is rendered in the browser using
JavaScript. Instead of getting all the content from the HTML file itself, the server sends HTML
with an empty body and script tags that contain links to JavaScript bundles that the browser will
use to render the content.
Typical page load behaviour in CSR —
● Browser requests the server for HTML
● Server sends HTML with script tags in head and no content in body
● Browser parses the HTML and makes http requests to load the scripts
● Once the scripts are loaded, the browser parses them and makes API requests and
loads all the content asynchronously
Since the all the content starts loading only after loading the initial JavaScript, it takes a longer
time to show any content on the page. If the user is on a slow network, the content is blocked
for an even longer time due to lower bandwidth and higher latency.

Server Side Rendering

When rendering on the server side, the HTML is rendered on the server and sent to the client.
The content that we need to display on the screen becomes available immediately after the
HTML is parsed; hence, primary rendering of content is faster than CSR.
Typical page load behaviour in SSR —
● Browser requests the server for HTML.
● Server makes API requests (usually co-located) and renders the content in the server.
● Once the page is ready, the server sends it to the browser.
● The browser loads and parses the HTML and paints the content on the screen without
waiting for the JavaScript bundle(s) to load.
● Once the JavaScript bundle(s) are loaded, the browser hydrates interactivity to DOM
elements, which is usually attaching event handlers and other interactive behaviours.
Since the APIs are usually co-located with the server, the content is loaded super fast (faster
than CSR) and the HTML is sent to the browser. Initial JavaScript load doesn't block content
load as the HTML sent by the server already has the content.

Q. What is an iframe and how it works?

The <iframe> HTML element represents a nested browsing context, embedding another HTML
page into the current one. Each embedded browsing context has its own session history and
document. The browsing context that embeds the others is called the parent browsing context.
The topmost browsing context — the one with no parent — is usually the browser window,
represented by the Window object.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 iframe</title>
</head>
<style type="text/css">
iframe {
border: 1px solid #333;
width: 50%;
}
.output {
background: #eee;
}
</style>
<body>
<p>The Inline iFrame Example</p>
<iframe id="inlineFrameId"
title="Inline iFrame Example"
width="300"
height="200"
src="[Link]
0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.4785
69861898606&layer=mapnik">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>

The Iframe Tag Attributes

Attribute Description

allow indicates what features the iframe is allowed to use (e.g. fullscreen, camera,
autoplay)

allowfullscreen grants or denies permission for the iframe to appear in full-screen mode

height sets the height of the iframe (if not specified, the default height is 150
pixels)

loading sets lazy loading or eager loading for the iframe

referrerpolicy sets what referrer information should be sent in the request for the iframe

src the address of the resource included in the iframe

width sets the width of the iframe (if not specified, the default width is 300 pixels)

Note: Because each browsing context is a complete document environment, every <iframe> in a
page requires increased memory and other computing resources.

Q. Explain the use of rel=”nofollow”, rel=”noreferrer”,

rel=”noopener” attribute?

3. rel=”noopener”
It prevents the new page from being able to access the [Link] property and will make it
run in a separate process. noopener tag works as a security fix which prevents malicious links
to take control over an opened tab.
Example
<a href="[Link] target="_blank" rel="noopener">Link to [Link]</a>
Q. How can you highlight text in HTML?
The <mark> HTML element represents text which is marked or highlighted for reference or
notation purposes, due to the marked passage's relevance or importance in the enclosing
context.
Example
<!DOCTYPE html>
<html>
<head>
<title>Highlight text in HTML</title>
</head>
<body>
<p>Search results for "salamander":</p>
<hr>
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the
Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other
small creatures.</p>
</body>
</html>

Q. How can I get indexed better by search engines?

2. Meta description tag

Meta description is a short paragraph of text used to describe your page in search results. The
function of meta description is similar to the title. It provides a little more detail about your page
and it helps users decide whether to visit your page or not. In HTML, a meta description tag
looks like this:
<meta name="description" content="Your description goes here">
3. Heading tags
Headings (H1-H6) are used to split your page into sections or chapters. Each heading is like a
small title within the page. In HTML, a heading looks like this:
<h1>Your heading goes here</h1>

4. Image alt attribute

5. Open Graph tags

7. Canonical tag
A canonical tag is a way of telling search engines that a specific URL represents the master
copy of a page. Using the canonical tag prevents problems caused by identical or “duplicate”
content appearing on multiple URLs. Practically speaking, the canonical tag tells search engines
which version of a URL you want to appear in search results. In HTML, it may look like this:
<link href="URL" rel="canonical">
8. HTML5 semantic tags
One of the most important features of HTML5 is its semantics tags. Semantic tags refers to
syntax that makes the HTML more comprehensible by better defining the different sections and
layout of web pages. It makes web pages more informative and adaptable, allowing browsers
and search engines to better interpret content. For example, instead of using <div
id="header"></div> you can use a <header></hrader> tag.

Q. What is the difference between an “attribute” and a “property”

in HTML?
Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model)
nodes.
Example
<input id="inputId" type="text" value="Hello World!" />

Attributes are defined by HTML. Properties are defined by the DOM.

The value of an attribute is constant. The value of a property is variable.

These are used to initialize the DOM properties. No such job defined.

Q. How do you set IE compatibility mode?

IE=edge Display content in the highest mode available

IE=9 Use the Windows Internet Explorer 9 standards rendering mode

IE=8 Use the Internet Explorer 8 standards rendering mode

IE=7 Use the Windows Internet Explorer 7 standards rendering mode

IE=5 Use the Microsoft Internet Explorer 5 standards rendering mode

Q. What is an optional tag?

The following lists all optional tags.
Tag Description

<area>

<base>

<body>

<col>

<dd>

<dt>

<embed>

<head>

<hr>

<html>

<img>

<input>

<li>

<link>

<meta>

<rp>

<rt>

<tbody>

<td>

<tfoot>

<th>

<thead>

<tr>

<track>

<wbr>

Q. What is an HTML preprocessor? Have you used different

HTML templating languages before?
A HTML preprocessor is a program that takes one type of data and converts it to another one.
In case of HTML and CSS, some of the more popular preprocessor languages are Slim and
Sass. Slim is processed into HTML and Sass is processed into CSS.
No, but I heard about html template language like PUG (formerly Jade), Haml, ERB, Slim,
Handlebars, Jinja, Liquid etc which is HTML preprocessor this mean that it is basically a
language that will be converted to native html code.
The typical usage is when you render something on the server side. The usual use-case is
when you have to add dynamic content to your website, so when you fetch something from your
database, you will have to replace some parts in your original template.
Q. How do you change the direction of html text?
The default text direction in HTML is left-to-right. However, when developing web content and
applications, we may need to set it to right-to-left, for instance, to cater for languages such as
Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi.
We can set text direction in HTML in one of two ways:
● With the HTML dir attribute
● With the CSS direction property
Example

<element dir="ltr|rtl|auto">

Attribute Values
Value Description

ltr Default. Left-to-right text direction

rtl Right-to-left text direction

auto Let the browser figure out the text direction, based on the content

Q. When is it appropriate to use the small element?

Q. How do you serve a page with content in multiple languages?

<h2>French</h2>
<p lang="fr">Ceci est un texte de démonstration</p>

<h2>Spanish</h2>
<p lang="es">Este es un texto de demostración</p>
</body>
</html>

Q. What is the difference between <section> and <div>?

The <div> Element

The <div> element only represents its child elements and doesn't have a special meaning. It
can be used with the lang, title, and class attributes to add semantics that is common to a group
of consecutive elements. This element can also be used in a <dl> tag and wrap groups of <dt>
and <dd> elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
<style>
div {
background-color: #87f5b3
}
</style>
</head>
<body>
<h1>Example</h1>
<div>
<h2>A heading in a <div> tag.</h2>
<p>Some text in a <div> tag.</p>
</div>
<p>Here is some other text in a <p> tag.</p>
</body>
</html>
Q. Discuss the differences between an HTML specification and a
browser's implementation thereof.
HTML specifications such as HTML5 define a set of rules that a document must adhere to in
order to be “valid” according to that specification. In addition, a specification provides
instructions on how a browser must interpret and render such a document.
A browser is said to “support” a specification if it handles valid documents according to the rules
of the specification. As of yet, no browser supports all aspects of the HTML5 specification
(although all of the major browser support most of it), and as a result, it is necessary for the
developer to confirm whether the aspect they are making use of will be supported by all of the
browsers on which they hope to display their content. This is why cross-browser support
continues to be a headache for developers, despite the improved specificiations.
In addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one
that contains syntactical errors), invalid documents may contain anything, and it is impossible
for the specification to handle all possibilities comprehensively. Thus, many decisions about
how to handle malformed documents are left up to the browser.

Q. Why you would use a srcset attribute in an image tag? Explain

1. Using display density descriptor

srcset provides a comma-separated list of image resources along with display density it should
be used, for example1x, 2x etc.
Example
<img src="[Link]"
srcset="[Link],
image_2x.jpg 2x"
/>

2. Using width descriptor

Q. What is accessibility & ARIA role means in a web application?

The Accessible Rich Internet Applications (ARIA) Suite, defines a way to make Web content
and Web applications more accessible to people with disabilities. It especially helps with
dynamic content and advanced user interface controls developed with HTML, JavaScript, and
related technologies.
Screen readers work with regular HTML, but adding ARIA can provide screen reader users with
greater context and interactivity with the content on the page. ARIA has no effect on how
elements are displayed or behave in browsers. It does not add new functionality, and is meant
to act only as an extra descriptive layer for screen readers.
Without WAI-ARIA certain functionality used in Web sites is not available to some users with
disabilities, especially people who rely on screen readers and people who cannot use a mouse.
WAI-ARIA addresses these accessibility challenges, for example, by defining ways for
functionality to be provided to assistive technology. With WAI-ARIA, developers can make
advanced Web applications accessible and usable to people with disabilities.
ARIA attributes are divided into two categories: roles, and states & properties.

Landmark ARIA Roles

Document ARIA Roles

Widget ARIA Roles

ARIA States & Properties

Introduction to HTML5 Markup Tags
100% (1)
Introduction to HTML5 Markup Tags
88 pages
Introduction to HTML and HTML5 Basics
No ratings yet
Introduction to HTML and HTML5 Basics
88 pages
HTML5 Basics and New Features Guide
No ratings yet
HTML5 Basics and New Features Guide
119 pages
Unit - 3 - Advaned HTML Notes
No ratings yet
Unit - 3 - Advaned HTML Notes
17 pages
Day1 Html5 Intro
No ratings yet
Day1 Html5 Intro
58 pages
Comprehensive Guide to HTML Elements
No ratings yet
Comprehensive Guide to HTML Elements
22 pages
Comprehensive HTML Tutorial Guide
No ratings yet
Comprehensive HTML Tutorial Guide
12 pages
HTML5 Elements and Features Explained
No ratings yet
HTML5 Elements and Features Explained
13 pages
HTML Notes
No ratings yet
HTML Notes
16 pages
Web Architecture and HTML Basics
No ratings yet
Web Architecture and HTML Basics
13 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
21 pages
HTML Structure and Elements Overview
100% (6)
HTML Structure and Elements Overview
495 pages
Understanding HTML and Its Elements
No ratings yet
Understanding HTML and Its Elements
128 pages
24it402-Unit 1
No ratings yet
24it402-Unit 1
250 pages
HTML Css Theory
No ratings yet
HTML Css Theory
18 pages
HTML Structure and Elements Guide
No ratings yet
HTML Structure and Elements Guide
228 pages
Understanding HTML and CSS Basics
No ratings yet
Understanding HTML and CSS Basics
27 pages
Comprehensive Guide to HTML Basics
No ratings yet
Comprehensive Guide to HTML Basics
7 pages
Web Tech Notes
No ratings yet
Web Tech Notes
78 pages
Web Design and Programming Q&A Guide
No ratings yet
Web Design and Programming Q&A Guide
16 pages
HTML Form Elements and Semantic Tags
No ratings yet
HTML Form Elements and Semantic Tags
8 pages
Attribute Note 1
No ratings yet
Attribute Note 1
19 pages
Session - 5 Introduction To Html/Css Assignment
No ratings yet
Session - 5 Introduction To Html/Css Assignment
17 pages
HTML5 Website Design Essentials
No ratings yet
HTML5 Website Design Essentials
58 pages
Understanding HTML5 and Bootstrap Basics
No ratings yet
Understanding HTML5 and Bootstrap Basics
8 pages
HTML5 Basics: Structure and Tags Guide
No ratings yet
HTML5 Basics: Structure and Tags Guide
14 pages
Web Technologies Lab Introduction
No ratings yet
Web Technologies Lab Introduction
14 pages
Chapter 2 & 3updated - HTML and CSS
No ratings yet
Chapter 2 & 3updated - HTML and CSS
50 pages
Introduction to HTML and HTML5 Features
No ratings yet
Introduction to HTML and HTML5 Features
9 pages
Web Programming Assignment Overview
No ratings yet
Web Programming Assignment Overview
8 pages
HTML Forms and Semantic Elements Guide
No ratings yet
HTML Forms and Semantic Elements Guide
17 pages
HTML Cheat Sheet for Quick Reference
No ratings yet
HTML Cheat Sheet for Quick Reference
20 pages
HTML Notes
No ratings yet
HTML Notes
17 pages
Web Technologies Course Overview
100% (1)
Web Technologies Course Overview
69 pages
HTML Structure and Best Practices Guide
No ratings yet
HTML Structure and Best Practices Guide
20 pages
50 HTML Interview Questions and Answers
No ratings yet
50 HTML Interview Questions and Answers
14 pages
HTML4 vs HTML5: Key Differences Explained
No ratings yet
HTML4 vs HTML5: Key Differences Explained
34 pages
HTML 1
No ratings yet
HTML 1
43 pages
HTML5
No ratings yet
HTML5
13 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
36 pages
Understanding HTML Structure and Elements
No ratings yet
Understanding HTML Structure and Elements
128 pages
HTML Basics and Geolocation API
No ratings yet
HTML Basics and Geolocation API
11 pages
New Features of HTML5
No ratings yet
New Features of HTML5
7 pages
Understanding HTML Structure and Tags
No ratings yet
Understanding HTML Structure and Tags
36 pages
Introduction to HTML5 Basics
No ratings yet
Introduction to HTML5 Basics
110 pages
HTML Basics: Structure and Tags
No ratings yet
HTML Basics: Structure and Tags
14 pages
Exp1 HTML
No ratings yet
Exp1 HTML
8 pages
HTML & CSS Basics for Dynamic Web Development
No ratings yet
HTML & CSS Basics for Dynamic Web Development
58 pages
Advanced HTML5: Key Concepts and Features
No ratings yet
Advanced HTML5: Key Concepts and Features
6 pages
Understanding Semantic HTML and SEO
No ratings yet
Understanding Semantic HTML and SEO
66 pages
Notes-Class X CH-3 Basic HTML
No ratings yet
Notes-Class X CH-3 Basic HTML
7 pages
Introduction to Web Applications and HTML
No ratings yet
Introduction to Web Applications and HTML
27 pages
HTML, CSS, and JavaScript Basics Guide
No ratings yet
HTML, CSS, and JavaScript Basics Guide
44 pages
Essential Tools for HTML & CSS Coding
No ratings yet
Essential Tools for HTML & CSS Coding
25 pages
Web Programming Basics: HTML Guide
No ratings yet
Web Programming Basics: HTML Guide
178 pages
Comprehensive Guide to HTML5 Tags
No ratings yet
Comprehensive Guide to HTML5 Tags
26 pages
Web1,2 Units
No ratings yet
Web1,2 Units
42 pages
HTML Basics: Structure and Syntax Guide
No ratings yet
HTML Basics: Structure and Syntax Guide
20 pages
HTML Basics: Structure and Elements Guide
No ratings yet
HTML Basics: Structure and Elements Guide
73 pages
Quiz Application Project Report 2024
No ratings yet
Quiz Application Project Report 2024
19 pages
SVG-T Graphics for S60 Platform
No ratings yet
SVG-T Graphics for S60 Platform
19 pages
WordPress Configuration File Overview
No ratings yet
WordPress Configuration File Overview
39 pages
Betinia Liga Logo Package Guide
No ratings yet
Betinia Liga Logo Package Guide
5 pages
Financial Services Cloud Implementation Guide
No ratings yet
Financial Services Cloud Implementation Guide
180 pages
Comprehensive Artist Resource Hub
No ratings yet
Comprehensive Artist Resource Hub
16 pages
Inkscape SVG File Setup Guide
No ratings yet
Inkscape SVG File Setup Guide
28 pages
CS202 Final Term Solved Paper 2024
No ratings yet
CS202 Final Term Solved Paper 2024
10 pages
Essential UI Design Resources
No ratings yet
Essential UI Design Resources
9 pages
Free Design Resources and Assets Guide
No ratings yet
Free Design Resources and Assets Guide
1 page
File Periodic - Table - Large - SVG
No ratings yet
File Periodic - Table - Large - SVG
8 pages
Understanding Vector and Raster Graphics
No ratings yet
Understanding Vector and Raster Graphics
25 pages
HTML5 & CSS3 Training Overview
No ratings yet
HTML5 & CSS3 Training Overview
15 pages
Datasheet AVEVA InTouchHMI 23-12
No ratings yet
Datasheet AVEVA InTouchHMI 23-12
13 pages
JavaScript and Web Development Basics
No ratings yet
JavaScript and Web Development Basics
4 pages
Penpot: Open Source Design Collaboration
No ratings yet
Penpot: Open Source Design Collaboration
4 pages
IT Practical Exam Instructions 9626/04
No ratings yet
IT Practical Exam Instructions 9626/04
8 pages
EQS Integrity Line Case Manager Manual
No ratings yet
EQS Integrity Line Case Manager Manual
40 pages
AI Tools for XKCD-Style Comics
No ratings yet
AI Tools for XKCD-Style Comics
5 pages
Overview of Web GIS Concepts
No ratings yet
Overview of Web GIS Concepts
15 pages
Default Profile Picture Aesthetics
No ratings yet
Default Profile Picture Aesthetics
1 page
Overview of Web Technologies and Trends
No ratings yet
Overview of Web Technologies and Trends
153 pages
File Upload Attack Methodologies
No ratings yet
File Upload Attack Methodologies
59 pages
Conquering JavaScript D3js
No ratings yet
Conquering JavaScript D3js
222 pages
HTML Canvas and SVG Game Examples
No ratings yet
HTML Canvas and SVG Game Examples
26 pages
Mobile Banking App Implementation Bid
No ratings yet
Mobile Banking App Implementation Bid
110 pages
Kawaii Panda Avatar Design Plan
No ratings yet
Kawaii Panda Avatar Design Plan
33 pages
Free and Open Media Resources
No ratings yet
Free and Open Media Resources
1 page
HTML and CSS Basics Explained
No ratings yet
HTML and CSS Basics Explained
14 pages
Kutengeneza Cheti kwa HTML
No ratings yet
Kutengeneza Cheti kwa HTML
4 pages