Scribd
Upload
35 views

HTML Interview Questions and Answers

Uploaded by

mohammed zaid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

HTML Interview Questions and Answers

Uploaded by

mohammed zaid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML INTERVIEW

QUESTIONS & ANSWERS


Important HTML questions and answers for
front-end developer technical interview

DEVELOPER UPDATES
HTML INTERVIEW QUESTIONS AND ANSWERS

What is HTML?
HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web
applications.

HTML uses tags and attributions to communicate with popular


web browsers and tells them how to display everything on a
web page.

What is tags in HTML?


HTML tags are like keywords which defines that how web
browser will format and display the content. With the help of
tags, a web browser can distinguish between an HTML content
and a simple content.

HTML tags contain three main parts: opening tag, content and
closing tag.

Example - <p> Paragraph Tag </p>, <span> Span Tag </span>

What is Semantic HTML?


Semantic HTML is a type of HTML that helps to define the
meaning of tags. This makes it easier for web browsers to
interpret the code.

Additionally, semantic HTML saves you time by automating


some of the process of coding.

Semantic Elements Example:


<article>
<footer>
<header>
<figure>
<time>
<nav>
<section>
<details>

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 01


HTML INTERVIEW QUESTIONS AND ANSWERS

Explain DOCTYPE in HTML.


All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the
browser about what document type to expect.
What is the difference between HTML and HTML5?
HTML5 HTML
Support for video/audio No audio/video support

Default vector graphics Vector graphics support


support using Canvas & SVG possible with outside tools.
Capable of handling Not capable of handling
inaccurate syntax and inaccurate syntax and other
other errors errors.

HTML5 is mobile friendly HTML is not mobile friendly

Allows JS to run in browser Does not allow JS to run in


browser.

Allows to drag and drop It does not allow to drag and


effects. drop effects.

How you can add a stylesheet to the HTML file?


There are 3 ways to include CSS in the webpage.
1. External CSS
2. Internal CSS
3. Inline CSS
1. External CSS - External CSS is defined using <link> element
within <head> section. Whenever we have to make multiple
changes in pages we make use of External CSS.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 02


HTML INTERVIEW QUESTIONS AND ANSWERS

2. Internal CSS - Internal CSS is defined using <style> element


within <head> section. It helps us to design a single HTML
page and change the style of the web page within HTML
code.

3. Inline CSS - Inline CSS is much more different than


External and Internal CSS. It directly affects the tag in which
CSS is written. It applies the unique style to a particular HTML
element.

What are the form elements available in HTML?


Forms in HTML are required when we want to collect the user
information whenever a user fills the form.

The HTML <form> elements contains following elements within


it.
<input> <output>
<select> <datalist>
<label> <textarea>
<option> <button>
<fieldset>
DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 03
HTML INTERVIEW QUESTIONS AND ANSWERS

What is the difference between document & window?


1. Window is the first thing that loads into the browser. It has
properties like inner width, inner height, length, name.
2. Whereas Document gets loaded inside the window object.
What is the difference between Local Storage, Session
Storage & Cookies?
1. Local Storage - Local Storage allows to store the data
without expiry limits.
2. Session Storage - Session Storage allows to store the data till
window is opened.
3. Cookies - Cookies allows to store data within client server.
Which are the new form element types in HTML5?
HTML5 introduces a number of new form elements. Some of
them are <datalist>, <keygen>, <output>, <progress> and
<meter>.
What are the new features introduced in HTML5?
1. Audio and video - Audio and Video tags are the two major
addition to HTML5. It allows developers to embed a video or
audio on their website.
2. Vector Graphics - Vector Graphics can be used to draw
graphics with various shapes and colors via scripting usually
JS. It is scalable, easy to create and edit.
3. Figure and Figcaption - HTML5 allows to use a <figure>
element to mark up a photo in a document, and a
<figcaption> element to define a caption for the photo. The
<figcaption> tag defines a caption for a <figure> element. This
tag provides a container for content that is equivalent to a
figure. It can be used to group a caption with one or more
images, a block of code, or other content.
4. Progress Tag - The progress tag is used to check the progress
of a task during the execution. Progress tag can be used with
the conjunction of JavaScript.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 04


HTML INTERVIEW QUESTIONS AND ANSWERS

Do all HTML tags come in pair?


No, there are some tags in HTML which does not contain pair
Example - <img>, <br>, <hr>
Name some video and audio formats supported by
HTML5?
Some Video Format Tags supported by HTML5 are - Mp4,
WebM, Ogg
Some Audio Format Tags supported by HTML5 are - Mp3,
WAV, Ogg
What is the use of <iframe> tag?
The <iframe> tag specifies an inline frame. It is used to embed
another document within current HTML document.
What is canvas element in HTML?
The canvas element is used to draw graphics on the web page
using javaScript.
Canvas has several methods for drawing paths, boxes, circles,
text, and adding Images.
What is SVG in HTML?
Scalable Vector Graphics (SVG) is a type of vector image that can
be scaled to any size without losing clarity or quality.
SVG has several methods for drawing paths, boxes, circles, text,
and graphic images.
SVG images and their behaviours are defined in XML text files.
What is HTML Grid Layout?
The HTML Grid Layout offers a layout with rows and columns
making it easier to design web pages without using float and
positioning.
How many types of heading does an HTML contain?
The HTML contains six types of headings which are defined with
the <h1> to <h6> tags. Each type of heading tag displays different
text size from another.
So, <h1> is the largest heading tag and <h6> is the smallest one.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 05


HTML INTERVIEW QUESTIONS AND ANSWERS

What is the difference between HTML elements and


tags?
HTML elements communicate to the browser to render text.
When the elements are enclosed by brackets <>, they form HTML
tags. Most of the time, tags come in a pair and surround content.
Is it possible to change the color of the bullet?
The color of the bullet is always the color of the first text of the
list. So, if you want to change the color of the bullet, you must
change the color of the text.
How many tags can be used to separate a section of
texts?
Three tags are used to separate the texts.
1. <br> - Usually <br> tag is used to separate the line of text. It
breaks the current line and conveys the flow to the next line
2. <p> - The <p> tag contains the text in the form of a new
paragraph.
3. <blockquote> tag - It is used to define a large quoted section.
If you have a large quotation, then put the entire text within
<blockquote>.............</blockquote> tag.
What is the use of the required attribute in HTML5?
It forces a user to give input before submitting the form. It is
used for form validation.

What are void elements in HTML?


HTML elements which do not have closing tags or do not need
to be closed are Void elements.

For Example <br />, <img />, <hr />, etc.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 06


HTML INTERVIEW QUESTIONS AND ANSWERS

How is Cell Padding different from Cell Spacing?


Cell Spacing is the space or gap between two consecutive cells.
Whereas, Cell Padding is the space or gap between the text/
content of the cell and the edge/ border of the cell.
What is the Difference between link tag <link> and
anchor tag <a>?
The anchor tag is used to create a hyperlink to another webpage
or to a certain part of the webpage and these links are clickable.

Link tags usually define links between documents and external


resources and those are not clickable.
Which HTML tag is used to display data in tabular
form?
The HTML table tag is used to display data in tabular form. There
are some more tags with table to display data in tabular form
with different properties.
Example : <table>, <tr>, <th>, <td>
What are some common lists that are used when
designing a page?
HTML Lists are used to specify lists of information. All lists may
contain one or more list elements. There are three different
types of HTML lists:
1. Ordered List (ol) - It displays elements in number format.
2. Unordered List (ul) - It displays elements in bulleted format.
3. Definition or Description List (dl) - It displays elements in
definition form like <dl>, <dt>, <dd>
What is image map?
Image map provides you to link many different web pages using
single image.

It is represented by <map> tag. You can define shapes in image


that you want to make part of an image mapping.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 07


HTML INTERVIEW QUESTIONS AND ANSWERS

How to create nested webpage in HTML?


The HTML <iframe> tag is used to display a nested webpage. It
represents a webpage within a webpage. It is also called as an
inline frame.
What is marquee?
Marquee is used to put the scrolling text on a web page. It scrolls
the image or text up, down, left or right.
What are empty elements?
HTML elements with no content are called empty elements.
Example - <br>, <hr>
What is datalist tag?
In HTML5 datalist tag provides an autocomplete feature on the
form element.
It facilitates users to choose the predefined options to the users
to select data.
What is the use of required attribute in HTML5?
The required attribute in HTML forces a user to fill text on the
text field or text area before submitting the form. It is used for
validation.
What is Web Storage?
The Web Storage is used to store Web Applications data locally
within user’s Browser.
What is Web Worker?
A Web Worker is JavaScript running in the background without
affecting the performance of the page.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 08


HTML INTERVIEW QUESTIONS AND ANSWERS

How you can show Google Map on the website?


Here are the steps to show Google map on the website:
1. Search location
2. Click on the Share button
3. Click on the Embed tab
4. Select map size
5. Copy HTML
6. Paste the HTML code to your HTML Code

What is difference between class and Id?


Class is an attribute which is used to specify class names for
multiple HTML elements.

Id is an attribute which is used to specify only single HTML


element within the page.

What is Data Attributes?


Data attributes in HTML provide a way to store extra information
on HTML elements.

This means you can add additional data to an element that


doesn't affect the presentation or behavior of the element, but
can be used by JavaScript.
Data attributes are custom attributes prefixed with data-
followed by whatever name you choose for the attribute.

Data Attributes

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 09


HTML INTERVIEW QUESTIONS AND ANSWERS

How to access and modify data attributes?


Data attributes are often used in conjunction with JavaScript.
You can access these data attributes in JavaScript using the
.dataset property.

Accessing Data Attributes

Updating Data Attribute

Note that dataset property transforms the data attribute name


from data-name to name by removing the data- prefix and
converting any hyphens to camelCase.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 10


Stay ahead with daily updates!
Follow us on social media for useful web
development content.

@richwebdeveloper

@new_javascript

@developerupdates

@developerupdates

@_chetanmahajan

Note: This kit is continuously updated. Please continue to


check Gumroad or our website (where you purchased this) for
updated questions and answers. You will receive all updates
for FREE

Download Updated Version

WWW.DEVELOPERUPDATES.COM

You might also like