Scribd
Upload
72 views

100 HTML Asked Interview QnA

This document provides an interview guide containing 100 HTML questions and answers. It was designed by Aman Yadav and covers topics like the differences between HTML and XHTML, new features in HTML5, semantic elements, forms, lists, multimedia embedding, and making websites responsive. The guide is intended to help prepare for an HTML interview.

Uploaded by

nic bellic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
72 views

100 HTML Asked Interview QnA

This document provides an interview guide containing 100 HTML questions and answers. It was designed by Aman Yadav and covers topics like the differences between HTML and XHTML, new features in HTML5, semantic elements, forms, lists, multimedia embedding, and making websites responsive. The guide is intended to help prepare for an HTML interview.

Uploaded by

nic bellic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Designed By : Aman Yadav (Insta : @curious_coder_aman)

INTERVIEW GUIDE :

100 HTML Asked


Interview QnA
By Aman Yadav
@curious_coder_aman
Curious_House

1: What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used for
creating web pages and web applications.

2: What is the difference between HTML and XHTML?

XHTML is a stricter and more XML-compliant version of HTML. It requires well-formed


markup and follows stricter syntax rules compared to HTML.

3: What are the new features in HTML5?

HTML5 introduced several new features, including the <canvas> element for graphics, native
audio and video support, semantic elements like <header> and <footer>, local storage
capabilities, and improved form controls.

4: What is the purpose of the doctype declaration in HTML?

The doctype declaration specifies the HTML version and document type being used. It helps
browsers to understand the correct rendering mode for the web page.

5: What are the block-level elements in HTML?

Block-level elements are those that create a block of content on a web page. Examples
include <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, and <table>.

6: What are inline elements in HTML?

Inline elements are those that are used within text content and do not create a separate
block. Examples include <span>, <a>, <strong>, <em>, and <img>.

7: What is the purpose of the alt attribute in the <img> tag? Tap here : @curious_coder_aman

The alt attribute provides alternative text for an image if it cannot be displayed. It is also
used by screen readers to assist visually impaired users in understanding the content of an
image.

8: How do you link external CSS and JavaScript files to an HTML document?
To link an external CSS file, use the <link> tag within the <head> section. For JavaScript, use
the <script> tag and specify the file path using the src attribute, either within the <head>
section or at the end of the <body> section.

9: What is the purpose of the meta viewport tag in HTML?

The meta viewport tag is used to control the layout and behavior of a web page on different
devices. It enables responsive design by specifying how the page should be displayed on
various screen sizes.

10: What is the difference between the <span> and <div> elements?

The <span> element is an inline element used for grouping and applying styles to small
portions of text or elements, while the <div> element is a block-level element used for
creating larger sections or divisions within a web page.

11: What is the difference between HTML and HTML5?

HTML5 is the latest version of HTML and introduced several new features and elements,
including semantic elements, audio and video support, canvas for graphics, local storage,
and improved form controls.

12: What is the purpose of the <form> element in HTML?

The <form> element is used to create an interactive form on a web page. It provides a
container for input controls such as text fields, checkboxes, radio buttons, and buttons.

13: What is the purpose of the <label> element in HTML?

The <label> element is used to associate text with form controls. It improves accessibility by
providing a textual description or name for an input element.

14: What is the difference between GET and POST methods in HTML forms?

The GET method sends form data as part of the URL parameters, visible in the browser's
address bar. The POST method sends form data in the body of the HTTP request, making it
more secure and suitable for sensitive information.

15: How do you create a hyperlink in HTML?

You can create a hyperlink using the <a> (anchor) element. The href attribute specifies the
URL of the destination page, and the link text is placed between the opening and closing <a>
tags.

16: What are semantic elements in HTML?

Semantic elements in HTML provide meaning and structure to the content, making it easier
for search engines and assistive technologies to understand. Examples include <header>,
<nav>, <article>, <section>, <footer>, and <aside>.
17: What is the purpose of the <iframe> element in HTML?

The <iframe> element is used to embed another HTML document or external content within
the current web page. It is commonly used for displaying maps, videos, social media
widgets, and other external content.

18: How can you add comments in HTML?

Comments in HTML are added using the <!-- --> syntax. Anything placed between these
comment tags is not rendered by the browser and is used for adding notes or explanations
in the HTML code.

19: What is the purpose of the <table> element in HTML?

The <table> element is used to create tabular data on a web page. It consists of one or more
<tr> (table row) elements, which contain <td> (table data) or <th> (table header) elements.

20: What are the different types of lists in HTML?

HTML supports three types of lists: unordered lists (<ul>) for unordered or bulleted lists,
ordered lists (<ol>) for ordered or numbered lists, and description lists (<dl>) for terms and
their descriptions.

21: What is the purpose of the <head> section in an HTML document?

The <head> section is used to define metadata about the HTML document, including the
title of the page, external CSS and JavaScript files, character encoding, and other important
information that is not displayed on the web page.

22: What is the difference between the <span> and <div> elements?

The <span> element is an inline element used for grouping and applying styles to small
portions of text or elements, while the <div> element is a block-level element used for
creating larger sections or divisions within a web page.

23: How can you embed audio and video in HTML?

HTML provides the <audio> and <video> elements for embedding audio and video content.
You can specify the source file using the src attribute and use optional attributes like
controls, autoplay, and loop to control the playback behavior.

24: What is the purpose of the <canvas> element in HTML5?

The <canvas> element is used to draw graphics and animations on a web page using
JavaScript. It provides a drawing surface that can be used to create charts, graphs, games,
and interactive visualizations.

25: How can you make a responsive website in HTML?


To make a website responsive, you can use CSS media queries to apply different styles
based on the screen size or device. Additionally, you can use fluid layouts, relative units
(such as percentages and viewport units), and responsive frameworks like Bootstrap.

26: What is the purpose of the data-* attribute in HTML?

The data-* attribute allows you to store custom data on HTML elements. It is often used to
store additional information or metadata that can be accessed and manipulated using
JavaScript.

27: What are the different types of form input fields in HTML?

HTML provides various input field types, including text, password, email, number, date,
checkbox, radio buttons, select dropdowns, file uploads, and more. Each type has its own
purpose and behavior.

28: How can you embed an image in HTML?

To embed an image in HTML, use the <img> element with the src attribute specifying the
image URL. Additionally, you can provide alternative text using the alt attribute and control
the size with width and height attributes.

29: What is the purpose of the <nav> element in HTML5?

The <nav> element represents a section of a webpage that contains navigation links. It is
typically used for menus, site navigation, or other sets of links that guide users through a
website.

30: How can you create a tooltip in HTML?

To create a tooltip, you can use CSS and the title attribute. Set the title attribute on an HTML
element, and the browser will display the text as a tooltip when the user hovers over that
element.

31: What is the purpose of the <meta> tag in HTML?

The <meta> tag is used to provide metadata about an HTML document. It includes
information such as the character encoding, viewport settings, author, description, and
keywords.

32: What is the difference between the <span> and <div> elements in terms of default
styling?

The <span> element is an inline element and does not have any default styling. The <div>
element is a block-level element and has a default styling of a new line before and after the
element.

33: How can you disable a button in HTML?


You can disable a button by adding the "disabled" attribute to the <button> element. This
prevents users from interacting with the button and triggers a visual change to indicate its
disabled state.

34: What is the purpose of the target attribute in the <a> tag?

The target attribute specifies where to open the linked document when the user clicks on
the link. It can be set to "_blank" to open the link in a new browser tab or window.

35: What are the different types of heading tags in HTML?

HTML provides six levels of heading tags, from <h1> to <h6>, where <h1> is the highest level
and <h6> is the lowest. Headings are used to structure the content hierarchy on a webpage.

36: How can you create a line break in HTML?

You can create a line break by using the <br> tag. When the browser encounters this tag, it
inserts a line break and moves the content to the next line.

37: What is the purpose of the placeholder attribute in an input field?

The placeholder attribute is used to provide a hint or example text for the expected value of
an input field. It is displayed within the field until the user starts typing or selects it.

38: How can you add a background image to an HTML element?

You can add a background image to an HTML element using CSS. Use the background-image
property and specify the image URL. You can also control the positioning, repeat behavior,
and other background properties.

39: What is the purpose of the <figcaption> element in HTML5?

The <figcaption> element is used to provide a caption or description for a <figure> element,
which typically represents an illustration, diagram, photo, or code snippet within a
document.

40: How can you play audio or video automatically when a webpage loads?

To play audio or video automatically, use the autoplay attribute in the <audio> or <video>
element. This allows the media to start playing as soon as the webpage is loaded.

41: What is the purpose of the HTML5 semantic elements?

HTML5 semantic elements provide a way to structure the content of a webpage more
meaningfully. They improve accessibility, search engine optimization, and help developers
understand the purpose and structure of the page. Examples include <header>, <nav>,
<section>, <article>, <footer>, and <main>.

42: How can you embed a YouTube video in an HTML page?


To embed a YouTube video, you can use the YouTube embed code provided by YouTube. It is
an iframe element that you can copy and paste into your HTML document.

43: What is the difference between the <ol> and <ul> elements?

The <ol> (ordered list) element is used to create a numbered list, while the <ul> (unordered
list) element is used to create a bulleted list.

44: How can you make an HTML element disappear or hide it from the webpage?

You can hide an HTML element using CSS. Set the CSS display property to "none" for the
element you want to hide. This will remove the element from the page layout.

45: What is the purpose of the <aside> element in HTML5?

The <aside> element represents content that is tangentially related to the main content of a
page. It can be used for sidebars, pull quotes, advertisements, or any content that is not
directly part of the main flow.

46: How can you create a responsive image in HTML? Tap here : @curious_coder_aman

To create a responsive image, set the CSS max-width property to 100% for the <img>
element. This ensures that the image scales proportionally within its container and adapts
to different screen sizes.

47: What is the purpose of the <abbr> element in HTML?

The <abbr> element is used to mark up an abbreviation or acronym in the text. It can include
an optional title attribute that provides the full expanded form of the abbreviation.

48: How can you create a dropdown/select list in HTML?

To create a dropdown/select list, use the <select> element. Inside the <select> element, use
<option> elements to define the available options for selection.

49: What is the purpose of the <iframe> sandbox attribute?

The sandbox attribute of the <iframe> element is used to restrict the capabilities of the
embedded content within the iframe. It can be used to mitigate security risks by isolating
the content and limiting its access to the parent document.

50: How can you disable browser caching for an HTML page?

To disable browser caching, you can set appropriate HTTP headers on the server-side. For
example, you can set the "Cache-Control" header to "no-cache" or add a timestamp or
unique query parameter to the URL of static resources to make them appear different each
time they are requested.

51: What is the purpose of the <datalist> element in HTML?


The <datalist> element is used to provide a predefined list of options for an input field. It is
typically used with the <input> element's list attribute to create auto-complete or
suggestion functionality.

52: What is the difference between the id and class attributes in HTML?

The id attribute is used to uniquely identify an HTML element, and it should be unique
within the entire document. The class attribute is used to group elements together and can
be applied to multiple elements within the document.

53: How can you add a favicon to a webpage?

To add a favicon, save the favicon image as a .ico file and place it in the root directory of
your website. Then, include the following code within the <head> section of your HTML
document:

<link rel="icon" type="image/x-icon" href="favicon.ico">

54: What is the purpose of the <progress> element in HTML5?

The <progress> element is used to represent the progress of a task or the completion status
of a process. It can be used to visually display the progress of file uploads, form
submissions, or any other task that requires tracking progress.

55: How can you make a checkbox preselected by default?

To make a checkbox preselected, add the "checked" attribute to the <input> element. For
example:

<input type="checkbox" checked>

56: What is the purpose of the <meter> element in HTML5?

The <meter> element is used to represent a scalar measurement within a known range. It can
be used to display values such as disk usage, voting scores, or any other measurable
quantity.

57: What is the purpose of the <time> element in HTML5?

The <time> element is used to represent a specific date, time, or duration. It helps provide
semantic meaning to date and time information on a webpage.

58: How can you create a responsive table in HTML?

To create a responsive table, wrap the <table> element in a <div> element with the CSS class
"table-responsive" or use CSS media queries to control the table's behavior on different
screen sizes. Additionally, consider using the <caption> and <thead> elements to enhance
table semantics.

59: How can you embed custom fonts in an HTML page?


To embed custom fonts, you can use the @font-face rule in CSS. Define a font family using
the @font-face rule, specifying the font file URL, format, and font-family name. Then, apply
the font-family to the desired elements in your HTML or CSS.

60: What is the purpose of the placeholder attribute in an input field?

The placeholder attribute is used to provide a short hint or example text within an input
field, giving users a clue about the expected input format or value.

61: How can you create a hyperlink that opens an email client to send an email?

To create an email hyperlink, use the <a> element with the "mailto:" protocol followed by
the email address. For example:

<a href="mailto:[email protected]">Send Email</a>

62: How can you add a video that can be played without browser plugins?

To add a video that can be played without plugins, use the HTML5 <video> element. Provide
the video source using the <source> element and specify the video file formats (e.g., MP4,
WebM) to ensure compatibility across different browsers.

63: What is the purpose of the tabindex attribute in HTML?

The tabindex attribute specifies the tab order of elements on a webpage. It allows users to
navigate through form controls and interactive elements using the keyboard.

64: How can you create a responsive, mobile-friendly navigation menu in HTML?

You can create a responsive navigation menu using HTML and CSS. Use a combination of
HTML elements (e.g., <nav>, <ul>, <li>, <a>) to structure the menu, and utilize CSS media
queries, flexbox, or other responsive techniques to adjust the menu layout and appearance
based on different screen sizes.

65: What is the purpose of the <figcaption> element in HTML5?

The <figcaption> element is used to provide a caption or description for an HTML <figure>
element, which represents self-contained content, such as images, illustrations, diagrams,
or code snippets.

66: How can you create a tooltip in HTML? Tap here : @curious_coder_aman

To create a tooltip, you can use CSS and the ::before or ::after pseudo-elements. Apply CSS
positioning and display properties to position the tooltip and use the content property to
display the tooltip text or content when hovering or focusing on an element.

67: What is the purpose of the <b> and <strong> elements in HTML?
Both the <b> and <strong> elements are used to indicate text that should be rendered in a
bold font. However, the <strong> element also carries semantic weight, conveying that the
enclosed text has strong importance or emphasis.

68: How can you include special characters or symbols in HTML?

Special characters or symbols can be included in HTML using character entities. For
example, the © entity represents the copyright symbol (©), and & represents the ampersand
(&).

69: What is the purpose of the <ruby> and <rt> elements in HTML?

The <ruby> element is used to annotate base text with pronunciation or other annotations,
typically used in East Asian typography. The <rt> element is used to provide the
pronunciation, translation, or explanation of the text enclosed within the <ruby> element.

70: What is the purpose of the <fieldset> and <legend> elements in HTML?

The <fieldset> element is used to group related form controls together, and the <legend>
element is used to provide a caption or title for the <fieldset>. They improve the
accessibility and organization of form controls.

71: What is the purpose of the target="_blank" attribute in an anchor tag?

When target="_blank" is added to an anchor (<a>) tag, it specifies that the linked document
should open in a new browser tab or window, allowing users to keep the current page open.

72: How can you disable the resizing of a textarea in HTML?

You can disable the resizing of a textarea by applying the CSS property resize: none; to the
textarea element. This prevents users from manually adjusting the size of the textarea.

73: What is the purpose of the <nav> element in HTML5?

The <nav> element is used to define a section of a webpage that contains navigation links. It
is typically used to create menus or navigation bars.

74: How can you include a line break within a paragraph of text?

To include a line break within a paragraph, use the <br> tag. Place it at the desired position
within the paragraph to create a new line.

75: What is the purpose of the <area> element in HTML?

The <area> element is used in conjunction with an <img> element within an image map. It
defines a clickable area on the image, allowing different regions to act as separate links.

76: How can you make an HTML element content editable?


To make an HTML element editable by the user, add the attribute contenteditable="true" to
the element. This allows the user to modify the content of the element directly on the
webpage.

77: What is the purpose of the <bdo> element in HTML?

The <bdo> element is used to override the bidirectional text directionality of its parent
element. It is commonly used when the text direction needs to be explicitly set for specific
content.

78: How can you include a video from an external source, such as YouTube, in an HTML page?

To include a video from an external source like YouTube, you can use an embedded video
player. YouTube provides an embed code that you can copy and paste into your HTML
document to display the video.

79: What is the purpose of the <canvas> element in HTML5?

The <canvas> element is used to create graphics, animations, or other visual effects using
JavaScript. It provides a drawing surface that can be manipulated programmatically.

80: What is the difference between the <script> tags with "async" and "defer" attributes?

The "async" attribute tells the browser to download and execute the script asynchronously,
without blocking the rendering of the page. The "defer" attribute also downloads the script
asynchronously but ensures that the script is executed only after the HTML parsing is
complete.

81: How can you create a fixed header or footer that remains visible while scrolling?

To create a fixed header or footer, you can use CSS. Apply the position: fixed property to the
header or footer element, and optionally set the top or bottom and left or right properties
to position it on the page.

82: What is the purpose of the <datalist> element in HTML5?

The <datalist> element is used to provide a list of predefined options for an <input> element.
It allows users to select an option from a dropdown list or type their own value.

83: How can you create a responsive image gallery in HTML?

To create a responsive image gallery, you can use CSS grid or flexbox to arrange the images
in a grid layout. Use media queries to adjust the layout and image sizes based on different
screen sizes.

84: What is the purpose of the HTML5 Geolocation API?

The Geolocation API allows web applications to access the user's geographical location
information. It provides JavaScript methods to retrieve the latitude, longitude, and other
details about the user's location.

85: How can you disable the browser's default form validation in HTML?

To disable the browser's default form validation, add the "novalidate" attribute to the
<form> element. This allows you to implement custom form validation using JavaScript or
other methods.

86: What is the purpose of the <wbr> element in HTML?

The <wbr> element is used to specify a word break opportunity in a long or unbreakable
word. It allows the browser to break the word if necessary to prevent overflow or improve
readability.

87: How can you create a responsive, multi-column layout in HTML?

To create a responsive, multi-column layout, you can use CSS. Use properties like column-
count, column-width, and media queries to define the number of columns and their
behavior based on different screen sizes.

88: What is the purpose of the <progress> element in HTML5?

The <progress> element represents the progress of a task or the completion status of a
process. It can be used to display a progress bar, indicating how much of a task has been
completed.

89: How can you add a video background to a webpage in HTML?

To add a video background, use the <video> element with the autoplay and loop attributes.
Set the video as the background by applying CSS to the <video> element or using CSS to
position the video behind other content.

90: What is the purpose of the <details> and <summary> elements in HTML5?

The <details> element is used to create a disclosure widget, allowing users to show or hide
additional information. The <summary> element provides a visible heading or summary for
the details element.

91: How can you create a responsive, mobile-friendly image that scales with the screen size?

To create a responsive image, use CSS with the max-width property set to 100% to ensure
that the image scales proportionally with the screen size. This allows the image to fit within
its container.

92: What is the purpose of the <cite> element in HTML?

The <cite> element is used to mark up the title or name of a creative work, such as a book,
movie, or article. It indicates that the enclosed text is the title of the cited work.

93: How can you create a fixed sidebar navigation menu that remains visible while scrolling?
To create a fixed sidebar navigation menu, apply CSS positioning (position: fixed) and set the
desired width to the sidebar element. You may need to adjust the padding and margins of
other elements to ensure proper layout.

94: What is the purpose of the <time> element's datetime attribute in HTML5?

The datetime attribute of the <time> element is used to specify the date, time, or duration in
a machine-readable format. It provides semantic meaning and allows search engines and
other applications to understand the time-related content.

95: How can you embed an audio file in HTML? Tap here : @curious_coder_aman

To embed an audio file, use the <audio> element. Specify the audio file's source using the
<source> element within the <audio> tags. You can include multiple <source> elements with
different file formats for browser compatibility.

96: What is the purpose of the "defer" attribute in the <script> tag?

The "defer" attribute in the <script> tag is used to defer the execution of the script until the
HTML parsing is complete. It ensures that the script is executed after the HTML document
has been fully loaded.

97: How can you include a YouTube video that starts playing at a specific time?

To start a YouTube video at a specific time, append the URL with "?t=" followed by the time
in seconds. For example, to start at 1 minute and 30 seconds:

<iframe src="https://www.youtube.com/embed/videoID?start=90"></iframe>

98: What is the purpose of the "autocomplete" attribute in an <input> element?

The "autocomplete" attribute is used to control whether the browser should enable
autocomplete suggestions for an input field. It can be set to "on" or "off" to specify whether
the browser should remember and suggest previously entered values.

99: How can you add a border around an image in HTML?

To add a border around an image, use CSS and apply the border property to the <img>
element. Specify the border width, style, and color. For example:

<img src="image.jpg" style="border: 1px solid black;">

100: What is the purpose of the <track> element in HTML5?

The <track> element is used to specify timed text tracks for multimedia elements like
<video> or <audio>. It allows you to include subtitles, captions, descriptions, or other types
of text-based content synchronized with the multimedia playback.

Note : Take the time to understand these questions and their answers thoroughly, and
consider practicing them in your HTML projects to
Search Curious_House
On Telegram & Join Channel

Follow @curious_coder_aman For More :)

You might also like