Top HTML Interview Questions and Answers

Q: How does HTML5 improve multimedia support?

HTML5 supports audio and video with the help of and tags. It is simple and does not require any third-party plugins for multimedia support other than tags.

Updated on October 22, 2024

Article Outline

HTML Interview Questions and Answers for Freshers HTML Interview Questions and Answers for Experienced Conclusion FAQs

One of the most commonly used and highly essential programming languages is HTML, which is primarily used for creating web pages. We can put different types of content such as images, text, hyperlinks, multimedia, etc. onto web pages with the help of HTML. Therefore, HTML creates a foundation for developers who are making a career in web development. Any interviewer will definitely ask you the basic questions regarding HTML, along with complex behavioural questions or real-life challenging queries for a web developer role.

In this blog, we will be discussing the top HTML interview questions and answers which would help anyone prepare for the interview. Here, we have categorised all the questions into two groups, i.e. one with the beginner-friendly questions for the freshers and the advanced questions for the experienced. Both the freshers and experienced developers can look into all these questions and get ideas about the types of questions asked.

HTML Interview Questions and Answers for Freshers

What does the acronym HTML stand for?

The full form of HTML is Hyper Text Markup Language. We can use this language to plot different elements, compartments, navbars, footers, headers, images, videos, links, etc. on our website, enabling a perfect web page ready for user experience.

What is HTML?

HTML (Hypertext Markup Language) is what we call the primary coding language, used to format and construct web pages. We can put elements like tags, and attributes in the final layout, headings and body areas.

What are HTML tags?

Tags in HTML are elements that help build and structure a web page. Tags are enclosed in angle brackets (e.g., <p> for a paragraph) and are usually used in pairs (opening and closing) to wrap around content.

<!-- Example of HTML tags -->

<h1>This text will appear in h1 heading.</h1>

<p>A new paragraph will be created here.</p>

What is an element in HTML?

The HTML element is used to add a particular section to the web page. We can put HTML elements between tags, such that it always encloses between a start tag and the end tag. For example, we can put content or sentences between a paragraph tag like this: <p> This is a paragraph </p>. Hence, the start tag must be ended by the same tag containing a slash.

<!-- Example of an HTML element -->

<h2>This is an h2 element</h2>

What are HTML attributes?

HTML attributes provide additional information about elements, such as id, class, style, and src. They are placed inside the opening tag and are used to define properties like the element’s appearance, behaviour, or identification.

<!-- Example of HTML attributes -->

<img src="image.jpg" alt="Description of Image">

What is the class attribute in HTML?

The class attribute is similar to other attributes. We can add it to the starting tag with a valid class name as a value. The class attribute is used to access a particular element in the stylesheet and add CSS to the element. It is also used in JavaScript to access particular class elements and add action to them.

<!-- Example of using the class attribute -->

<p class="highlight"> Use the highlight class name to access this element in the stylesheet.</p>

What are the differences between the <link> and <a> tags?

Feature	<link> Tag	<a> Tag (Anchor)
Purpose	Defines a relationship to external resources (e.g., stylesheets)	Creates hyperlinks to other pages
Placement	Used inside the <head> section	Used within the <body> section
Attributes	rel, href, type	href, target, title

Also Check: Full-Stack Developer with Hero Vired’s Certificate Program

What are the types of input fields in an HTML form?

Input Type	Description
text	Single-line text input
password	Text input that hides the entered characters
radio	Radio button for selecting one option from a group
checkbox	Checkbox for selecting multiple options
submit	Button to submit the form
email	Input field for email addresses
number	Input field for numbers
date	Input field for dates
file	Input field for file uploads

Can you mention the significance of the <head> and <body> tags in HTML?

Here, we can add meta information about any webpage that we are building in the <head> tag. This meta-information contains the title, stylesheets, other CSS attributes and paths.

The <body> tag contains the content of the webpage. The content can include text, images, and links that are visible to the user.

<!-- Example of head and body tags -->

<html>

<head>

<title>My Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page</h1>

</body>

</html>

What are void elements in HTML?

The void elements are also HTML elements but they have some differences. They don’t have closing tags or content. For example, <img>, <br>, <hr>, and <input>. These elements are self-contained and do not need an end tag.

<!-- Example of void elements -->

Tags before <br> tag

<br>

Tags after <br> tag

What are the differences between the <strong> and <b> tags in HTML?

Feature	<b> Tag (Bold)	<strong> Tag (Strong)
Purpose	Adds stylistic bold text	Adds semantic importance to text
Meaning	No inherent meaning, just style	Indicates that the text is important
Accessibility	Less accessible	More accessible for screen readers

What is a marquee in HTML?

We generally use marquee tags to create moving text or images on our web page. It is one of the methods to bring animated content to the screen. Mostly, we use CSS animation to create moving text or images instead of using marquee tags.

<!-- Example of a marquee (deprecated in HTML5) -->

<marquee>Scrolling Text Example</marquee>

What is the difference between the <script> and <noscript> tags in HTML?

Feature	<script> Tag	<noscript> Tag
Purpose	Embeds JavaScript code in HTML	Displays content if JavaScript is disabled
Usage	Contains JavaScript code or links	Provides fallback content or message
Browser Behaviour	Executed by browsers with JS support	Displayed by browsers without JS support

How do you separate a section of text in HTML?

Use the <p> tag to separate a section by paragraph, or you can use <br> tag to break long sentences. Moreover, you can also use the headings i.e. <h1> to <h6> or the <hr> tag for horizontal lines, dividing the content.

<!-- Example of separating text -->

<h2>Section Title</h2>

<p>This is a paragraph.</p>

<hr>

<p>Another paragraph after a horizontal line.</p>

What is the advantage of collapsing white space?

Collapsing white space in HTML offers several benefits:

It will improve readability by reducing unnecessary spaces, tabs, and line breaks.
Collapsing automatically reduces file size, which can enhance loading speed.
Ensures consistent appearance across different browsers and devices.

What are the list types in HTML?

HTML provides three types of lists:

Ordered List (<ol>): Displays items in a numbered format.
Unordered List (<ul>): Displays items with bullet points.
Description List (<dl>): Displays terms and their descriptions.

<!-- Example of different list types -->

<ol>

<li>First Item</li>

<li>Second Item</li>

</ol>

<ul>

<li>Bullet Item 1</li>

<li>Bullet Item 2</li>

</ul>

<dl>

<dt>Term</dt>

<dd>Description of the term</dd>

</dl>

How do you align list elements in an HTML file?

You can use CSS text-align property or list-style-position property in order to align list elements inside an HTML file. For example;

<!-- Center align list items using CSS -->

<ul style="text-align: center;">

<li>Centred Item 1</li>

<li>Centred Item 2</li>

</ul>

What are the differences between an ordered list and an unordered list?

Feature	Ordered List (<ol>)	Unordered List (<ul>)
Purpose	Displays items in a specific order	Displays items without a specific order
Markers	Numbered (1, 2, 3…)	Bulleted (●)
Type Attribute	Can be set to 1, A, a, I, i	Can be set to disc, circle, square
Usage	Use when order matters	Use when order doesn’t matter

How do you display a table on an HTML webpage?

To display a table, use the <table> tag along with <tr> (table row), <th> (table header), and <td> (table data) tags.

<!-- Example of an HTML table -->

<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>Alice</td>

<td>30</td>

</tr>

<tr>

<td>Bob</td>

<td>25</td>

</tr>

</table>

How do you create a hyperlink in HTML?

Use the <a> tag to create a hyperlink. The href attribute specifies the URL of the link.

<!-- Example of creating a hyperlink -->

<a href="https://www.example.com">Visit Example.com</a>

What is semantic HTML?

Semantic HTML uses elements that clearly describe their meaning in a human- and machine-readable way. Examples include <header>, <footer>, <article>, and <section>. These tags improve accessibility and SEO.

Non-Semantic Tags	Semantic Tags
<div>, <span>	<header>, <footer>, <article>, <section>

What is SVG in HTML?

SVG is an XML-based markup language, which is primarily used for creating vectors in HTML. SVG holds all the necessary points and positions of that particular element, including its size, scale factor, colours, transitions, design and animation (if any). Therefore it is not static and can be dynamically adjusted according to the size of the vector.

How do you create nested web pages in HTML?

We can use the <iframe> tag to create nested web pages. The <iframe> tag allows us to embed one HTML document within another.

<iframe src="child_web_page.html" width="300" height="200"> </iframe>

What are inline and block elements in HTML5?

Here is the difference between inline and block elements.

Feature	Inline Elements	Block Elements
Display Behavior	Stays in line with other elements	Starts on a new line
Width	Takes only the required width	Takes up the full width available
Examples	<span>, <a>, <img>	<div>, <p>, <h1>

How do you add buttons in HTML?

We can use the <button> tag to create a button in HTML.

<button type = "button"> Click this button </button>

How do you redirect to a particular section of a page using HTML?

So, first, we can assign an ID to the particular HTML element. After that, we can use the value of the id attribute to create an anchor point and the href attribute in the <a> tag to link to that section.

What are the differences between the <div> and <span> tags in HTML?

Feature	<div> Tag	<span> Tag
Type	Block-level element	Inline element
Usage	Groups block-level content	Groups inline content
Styling	Affects an entire block of content	Affects only specific text or inline elements
New Line	Starts on a new line	Does not start on a new line

What is the difference between the <i> and <em> tags in HTML?

Feature	<i> Tag (Italic)	<em> Tag (Emphasis)
Purpose	Adds stylistic italic text	Adds semantic emphasis to text
Meaning	No inherent meaning, just style	Indicates important text
Accessibility	Less accessible	More accessible for screen readers

How do you specify metadata in HTML5?

Use the <meta> tag inside the <head> section to specify metadata like character set, keywords, author, etc.

<!-- Example of specifying metadata -->

<meta charset="UTF-8">

<meta name="description" content="HTML5 tutorial">

<meta name="author" content="John Doe">

How are comments added in HTML?

Comments in HTML are added using the <!– and –> syntax. Comments are not displayed in the browser and are used to add notes or explanations in the code.

<!-- This is an HTML comment -->

<p>This is visible text.</p>

What are the differences between absolute and relative paths in HTML?

Feature	Absolute Path	Relative Path
Definition	Full URL including protocol and domain	Relative to the current directory or root
Example	https://www.example.com/page.html	page.html or folder/page.html
Portability	Less portable across environments	More portable and flexible
Use Case	External links or resources	Internal links or resources

Can you explain the use of <iframe> tag in embedding another web page within an HTML page?

The <iframe> tag is used to embed another webpage within an HTML document. The src attribute specifies the URL of the page to embed.

<!-- Example of embedding another webpage using iframe -->

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Suppose you are told to use the <audio> tag. How will you embed audio files in an HTML page?

You can use the <audio> tag to embed audio files. Here, the src attribute clarifies the type of audio file, and overall controls playback of audio.

<!-- Example of embedding an audio file -->

<audio controls>

<source src="audio-file.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

What are the attributes of the <iframe> tag in HTML?

Attribute	Description
src	Specifies the URL of the web page to be embedded
width	Sets the width of the iframe
height	Sets the height of the iframe
title	Provides a description for the iframe content (for accessibility)
sandbox	Adds restrictions to the content displayed in the iframe
allow	Specifies permissions for the iframe content (e.g., fullscreen)
loading	Specifies whether the iframe should be loaded lazily or immediately

How do you create an image link in HTML?

To create an image link, wrap the <img> tag with an <a> tag. The href attribute of the <a> tag specifies the link destination.

<a href="https://www.example.com">

<img src="image.jpg" alt="Example Image">

</a>

What are the attributes of the <meta> tag in HTML?

Attribute	Description
charset	Specifies the character set used
name	Provides the name of the metadata (e.g., author, description)
content	Defines the value associated with the name attribute
http-equiv	Provides HTTP headers (e.g., refresh, content-type)
viewport	Controls the viewport settings for responsive design

Can you explain the difference between the <section>, <article>, and <aside> tags in HTML5?

Tag	Purpose	Usage
<section>	Groups related content together	Used for thematic grouping
<article>	This represents a self-contained piece of content	Used for blog posts, news articles, etc.
<aside>	Contains content related to the main content but not part of it	Used for sidebars, advertisements, etc.

Get curriculum highlights, career paths, industry insights and accelerate your technology journey.

Download brochure

HTML Interview Questions and Answers for Experienced

What is the difference between HTML and CSS?

Feature	HTML (HyperText Markup Language)	CSS (Cascading Style Sheets)
Purpose	Structures content on a web page	Styles and formats the content
Type	Markup language	Style sheet language
Focus	Defines the structure and layout	Defines the appearance and layout
Usage	<p>, <div>, <a>, etc. tags	colour, font-size, margin, etc.

What are the various formatting tags in HTML?

HTML offers several tags for text formatting:

<b>: Makes text bold.
<i>: Makes text italicised.
<u>: Underlines text.
<strong>: Indicates important text (bold).
<em>: Emphasises text (italicised).
<mark>: Highlights text.
<small>: Displays smaller text.
<sub>: Creates subscript text.
<sup>: Creates superscript text.
<del>: Represents deleted text (strikethrough).

How do you create links to different sections within the same HTML web page?

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

Are the <datalist> and <select> tags the same?

Feature	<datalist> Tag	<select> Tag
Usage	Provides autocomplete suggestions	Creates a dropdown menu
Input type	Works with an <input> element	Works standalone
User Selection	Allows free text input and suggestions	Restricts input to predefined options
Browser Support	Newer and may have limited support	Well-supported across all browsers

What type of audio files can be played using HTML5?

HTML5 supports several audio file formats:

MP3 (.mp3): Supported by all major browsers.
WAV (.wav): Supported by all major browsers.
Ogg (.ogg): Supported by Firefox, Chrome, Opera.

<audio controls>

<source src="audio-file.mp3" type="audio/mpeg">

<source src="audio-file.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>

What is the difference between HTML and XHTML?

Feature	HTML	XHTML
Definition	HyperText Markup Language	Extensible HyperText Markup Language
Syntax	Flexible with errors	Strict rules, must be well-formed
Case Sensitivity	Not case-sensitive	Case-sensitive (tags must be lowercase)
Doctype	No need for XML declaration	Requires XML declaration
Compatibility	Less strict, compatible with most browsers	Must be valid XML

What is the difference between HTML and HTML5?

Feature	HTML	HTML5
Standard	Older version	Latest version
Multimedia Support	Requires plugins (like Flash)	Native support for audio, video, and graphics (e.g., <audio>, <video>, <canvas>)
New Elements	Fewer semantic elements	New semantic elements like <header>, <footer>, <article>, <section>
Doctype	Lengthy (<!DOCTYPE HTML PUBLIC …>)	Short (<!DOCTYPE html>)
Browser Compatibility	Supported by older browsers	Enhanced support and functionality in modern browsers

What is !DOCTYPE?

!DOCTYPE is a declaration that specifies the document type and version of HTML. It helps browsers render the page correctly. In HTML5, the declaration is simplified: <!DOCTYPE html>

What is the difference between an HTML tag and an HTML element?

Feature	HTML Tag	HTML Element
Definition	Code wrapped in angle brackets (<tag>)	A complete structure that includes a start tag, content, and an end tag (<p>This is a paragraph.</p>)
Types	Opening tag (<p>) and closing tag (</p>)	Combination of tags and content

Are <b> and <strong> tags the same? If not, why?

Feature	<b> Tag (Bold)	<strong> Tag (Strong)
Purpose	Adds stylistic bold text	Adds semantic importance to text
Meaning	No inherent meaning, just-style	Indicates that the text is important
Accessibility	Less accessible	More accessible for screen readers

Does a hyperlink only apply to text?

No, a hyperlink can be applied to various elements in HTML. This will include all the text, images, buttons, etc. With the help of <a> tag and the href attribute, you can add a hyperlink to that particular text.

<a href="https://www.example.com">Click here for more details</a>

<a href="https://www.example.com">

<img src="image.jpg" alt="Example Image">

</a>

Describe the use of alternative text in images which are embedded in HTML.

With the help of alternative text or alt text, you can specify the content of an image. Suppose, you have to improve accessibility for visually impaired users, you have to add alt text to the image. This also helps in SEO strategies and when the image fails to load.

What are the different content models in HTML5, and how are they structured?

Content Model	Description	Examples
Metadata Content	Contains elements that set up the presentation or behaviour of the page (not visible to users).	<title>, <meta>, <style>, <base>
Flow Content	Represents the main content of the document that is directly displayed.	<p>, <div>, <h1>, <article>, <section>
Sectioning Content	Defines the structure and organisation of the document.	<header>, <footer>, <nav>, <article>
Heading Content	Defines the heading for a section of the document.	<h1>, <h2>, <h3>, etc.
Phrasing Content	Represents text and its related elements.	<span>, <a>, <strong>, <em>
Embedded Content	Represents content imported from another source.	<img>, <iframe>, <embed>, <object>
Interactive Content	Represents elements that enable user interaction.	<a>, <button>, <input>, <textarea>

Why is a URL encoded in HTML?

URL ensures only the valid characters in HTML. When using an encoded URL, unsafe characters like space or special symbols turn into a safe format that can be transmitted over the internet. For example, a space is encoded as %20.

What are entities in HTML?

Entities in HTML are special codes used to display reserved or special characters that can’t be included directly in the HTML code. For example, < represents the < symbol, and & represents &.

What are the various accessibility features in HTML5, and how do they improve usability?

Feature	Purpose	How It Improves Usability
alt attribute for <img>	Provides a text alternative for images.	Helps screen readers understand and describe images for visually impaired users.
<header>, <footer>, <nav> tags	Improve the semantic structure of content for assistive technologies.	Enables easier navigation and content comprehension for screen readers.
aria-* attributes	Adds ARIA (Accessible Rich Internet Applications) roles and properties.	Provides additional context to screen readers about interactive elements.
tabindex attribute	Controls the order of keyboard navigation through interactive elements.	Enhances keyboard accessibility, especially for users who cannot use a mouse.
<label> tag for form elements	Associates labels with form controls, improving form usability.	Allows screen readers to correctly identify form fields and provide instructions.

Can you create multi-coloured text on a web page?

Yes, you can create multi-coloured text on a web page using the <span> tag with CSS styles. Each <span> can have a different colour applied to its content.

<p>

This is <span style="color: red;">red</span> and this is <span style="color: blue;">blue</span>.

</p>

What is the use of the span tag? Explain with an example.

The <span> tag is an inline container used to apply styles or manipulate content within a specific part of text without affecting the entire line or block. It is useful for applying CSS or JavaScript to a small portion of the content.

<!-- Example of using the span tag -->

<p>This is a <span style="font-weight: bold;">bold</span> </span> </span> </span> word.</p>

How do you insert a picture into the background of a web page?

To insert a picture as a background, use the background-image property in CSS. You can apply this style to the entire page using the body selector.

<style>

body {

background-image: url('background.jpg');

background-size: cover;

}

</style>

What are the different tags to separate sections of text?

HTML provides several tags to separate sections of text, including:

<p> for paragraphs.
<br> for line breaks.
<hr> for horizontal lines.
<div> for block-level divisions.
<section>, <article>, and <aside> for semantically dividing content.

Describe the new structural elements which are introduced in HTML5 and their respective purposes.

HTML5 Element	Purpose	Usage Example
<header>	It defines a header for a document or section, often containing navigation links or introductory content.	<header><h1>Page Title</h1></header>
<footer>	Represents a footer for a document or section, typically including author information, copyright, or links.	<footer><p>© 2024 Company Name</p></footer>
<nav>	Used to define a block of navigation links.	<nav><a href=”#home”>Home</a></nav>
<article>	Represents self-contained content that can be independently distributed or reused.	<article><h2>Article Title</h2></article>
<section>	Groups related content together, usually with a heading.	<section><h2>Section Title</h2></section>

How do you include JavaScript code in HTML?

JavaScript can be included in HTML using the <script> tag. The script can be embedded within the <head> or <body> section or referenced as an external file using the src attribute.

<script>

alert('Hello, World!');

</script>

Suppose there is no text between the HTML tags. How will it look on the web page?

An element can still render even if there is no text between HTML tags, however it will have no visible content. For example, you can form an empty <p></p>, that will ultimately create an empty paragraph, while an empty <div></div> will create an empty block.

Explain the use and process of creating forms in HTML.

We use forms to collect any type of user input on the web page. We create forms with the help of <form> tag, including several input elements. Tags like <input>, <textarea>, <select>, and buttons can be included in form content. Finally, the action attribute at the start of the form clarifies the server endpoint, which will help to process the data and the method attribute finalises how data will be sent.

<form action="/submit-form" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<input type="submit" value="Submit">

</form>

What if you had to make a hidden or collapsable section?

If you have to create a collapsible section, you can use <details> and <summary> tags. Let’s say a user clicks on <summary>, then all the content inside the <details> tag can be shown or remain hidden on the web page.

<details>

<summary>Click to expand</summary>

<p>This is a collapsible section with more information.</p>

</details>

What are the different methods to handle form validation in HTML5, and how do they differ?

Method	Description	Example	Advantages	Disadvantages
Built-in HTML5 Validation	Uses HTML5 attributes like required, pattern, min, max, etc., to enforce rules.	<input type=”text” required pattern=”[A-Za-z]+”>	Easy to implement, no JavaScript needed, browser support.	Limited customization, inconsistent messages across browsers.
JavaScript Validation	Uses JavaScript to validate forms on the client side before submission.	<script>if (!input.value) { alert(‘Field required’); }</script>	Highly customizable, dynamic error messages, better user experience.	Requires more coding and can be bypassed by disabling JavaScript.
Server-Side Validation	Performed on the server after form submission to ensure data integrity and security.	Validates in a backend language like PHP or Python.	Secure, essential for preventing malicious input.	Slower response time, requires server resources.

You have to make a responsive navigation bar. How would you approach it?

To make such a responsive navigation bar, you can start with the <nav> tag, and simultaneously use the CSS for styling. Also, the media queries can be adjusted according to navigation style to frame different screen sizes and devices.

<style>

.nav {

display: flex;

background-color: #333;

}

.nav a {

padding: 14px 20px;

color: white;

text-align: center;

text-decoration: none;

flex: 1;

}

@media (max-width: 600px) {

.nav a {

display: block;

text-align: left;

}

}

</style>

<nav class = "nav">

<a href = "#home"> Home </a>

<a href = "#about"> About </a>

<a href = "#contact"> Contact </a>

</nav>

How do you create a custom checkbox using HTML and CSS?

A custom checkbox can be created by hiding the default checkbox and using CSS to style a custom checkbox element.

<style>

.custom-checkbox {

position: relative;

display: inline-block;

width: 20px;

height: 20px;

}

.custom-checkbox input {

opacity: 0;

width: 0;

height: 0;

}

.checkmark {

position: absolute;

top: 0;

left: 0;

height: 20px;

width: 20px;

background-color: #eee;

}

.custom-checkbox input:checked + .checkmark {

background-color: #2196F3;

}

</style>

<label class = "custom-checkbox">

<input type = "checkbox">

<span class = "checkmark"> </span>

</label>

What are the different ways to apply CSS to an HTML document, and what are their advantages and disadvantages?

Method	Description	Advantages	Disadvantages
Inline CSS	CSS is applied directly within an HTML element using the style attribute.	Quick and easy for small changes	Difficult to maintain, lacks reusability, and increases HTML size.
Internal CSS	CSS is placed within the <style> tag in the <head> section of the HTML document.	Allows for CSS rules specific to a single page	Styles are not reusable across multiple pages and can clutter HTML.
External CSS	CSS is written in a separate file (.css) and linked to an HTML document using the <link> tag.	Keeps HTML clean, allows for reuse across multiple pages, and makes global updates easier.	Requires additional HTTP requests, which can affect page load speed.

How do you implement a tooltip using HTML and CSS?

A tooltip can be implemented using the title attribute for a simple solution or using CSS for more customization. Here’s an example using CSS:

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 5px;

padding: 5px;

position: absolute;

z-index: 1;

bottom: 125%; /* Position the tooltip above the text */

left: 50%;

margin-left: -60px;

opacity: 0;

transition: opacity 0.3s;

}

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

}

</style>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

What are the differences between the <header>, <footer>, and <nav> tags in HTML5?

Tag	Purpose	Usage Example
<header>	Represents introductory content or a group of navigation links	Used for the top section of a page or article
<footer>	Represents the footer content, usually contains author info, copyright, and related links	Used for the bottom section of a page or article
<nav>	Represents a section with navigation links, typically used for main navigation	Used to wrap a navigation menu

Find the difference between server-side and client-side scripting in the context of HTML.

Feature	Server-Side Scripting	Client-Side Scripting
Location of Execution	Executed on the server	Executed on the user’s browser
Languages Used	PHP, Python, Ruby, Node.js, etc.	JavaScript, HTML, CSS
Purpose	Generates dynamic content before sending it to the browser	Enhances interactivity, validates forms, and updates content without reloading
Security	More secure since the code runs on the server	Less secure as the code is visible to users

Point out different HTML global attributes, and how they are being used.

HTML global attributes are attributes that can be applied to any HTML element. Some common global attributes include:

id: Defines a unique identifier for the element.
class: Assigns one or more class names for styling or scripting.
style: Adds inline CSS styles to the element.
title: Provides extra information about the element.
lang: Specifies the language of the element’s content.

These attributes can be used with almost all HTML elements, such as <div>, <p>, <span>, <a>, etc.

What are the differences between the <picture> and <img> tags in HTML5?

Feature	<picture> Tag	<img> Tag
Purpose	Allows multiple source images for different screen sizes	Displays a single image
Flexibility	Provides a way to load different images based on conditions (e.g., viewport size)	Less flexible, loads a single image
Elements Used	Contains one or more <source> elements and a <img> fallback	Uses only the <img> tag
Example	<picture><source srcset=”small.jpg” media=”(max-width: 600px)”><img src=”default.jpg” alt=”Image”></picture>	<img src=”image.jpg” alt=”Image”>

There are two HTML5 tags: <figure> and <figcaption>. Point out the difference between these both.

When we look at both of these tags, <figure> allows us to group the self-contained content, which can include images, diagrams and code snippets and <figcaption> helps us provide a caption for that content.

<figure>

<img src="image.jpg" alt="Example Image">

<figcaption>This is a caption for the image.</figcaption>

</figure>

You have to explain different HTML5 elements used for graphics and multimedia, along with its functioning.

Element	Purpose	Functionality Example
<canvas>	Provides an area to draw graphics using JavaScript.	Drawing shapes, graphs, and images dynamically.
<svg>	Defines Scalable Vector Graphics (SVG) for creating vector images.	Drawing scalable images without loss of quality.
<audio>	Embeds audio files and provides controls for playback.	<audio controls><source src=”file.mp3″></audio>
<video>	Embeds video files and provides controls for playback.	<video controls><source src=”file.mp4″></video>
<embed>	Embeds external content, such as a plugin or media player.	Embedding a PDF viewer or Flash content.

How do the <details> and <summary> tags work in HTML5?

The <details> tag creates a collapsible section that can be opened or closed by the users. While <summary> helps us in providing a summary of the collapsible items, i.e. <details> is shown when the user clicks the <summary> tag.

<details>

<summary>More Information</summary>

<p>This section contains additional details that can be toggled.</p>

</details>

What is the difference between synchronous and asynchronous scripts in HTML?

Feature	Synchronous Scripts (<script>)	Asynchronous Scripts (async, <script>)
Execution Order	Executed in the order they appear in HTML	Executed as soon as they are downloaded
Effect on Page Load	Blocks page rendering until loaded	Does not block page rendering
Attribute	No special attribute required	async or defer attribute used

What are the HTML event attributes, and how are they used?

HTML event attributes allow you to define JavaScript actions that should be executed in response to certain events, like clicks, key presses, or mouse movements. Examples include:

onclick: This attribute executes JavaScript content, whenever that element is clicked on the web page by the user.
onmouseover: It helps JavaScript execution when the mouse pointer goes over the element or hovers continuously.
onkeyup: It executes JavaScript when a user releases a key.

<button onclick="alert('Button clicked!')">Click Me!</button>

What are the various attributes used with the <iframe> tag, and what do they control?

Attribute	Description	Example
src	Specifies the URL of the embedded page.	<iframe src=”https://example.com”></iframe>
width	Sets the width of the iframe.	<iframe width=”600″></iframe>
height	Sets the height of the iframe.	<iframe height=”400″></iframe>
title	Provides a description for accessibility purposes.	<iframe title=”Embedded Content”></iframe>
sandbox	Enables restrictions on the content inside the iframe (e.g., scripts, forms).	<iframe sandbox=”allow-scripts”></iframe>
loading	Determines whether the iframe should load immediately or lazily.	<iframe loading=”lazy”></iframe>
allow	Specifies features allowed for the iframe content, like fullscreen or autoplay.	<iframe allow=”fullscreen”></iframe>

What are the different types of HTML5 storage options, and how do they work?

HTML5 provides two main storage options:

Local Storage: Stores data with no expiration date. Data persists even after the browser is closed and reopened. It is accessed using localStorage.
Session Storage: Stores data for the duration of a page session. Data is cleared when the page session ends, typically when the browser is closed. It is accessed using sessionStorage.

// Example of using local storage

localStorage.setItem('key', 'value');

console.log(localStorage.getItem('key'));

 

// Example of using session storage

sessionStorage.setItem('sessionKey', 'sessionValue');

console.log(sessionStorage.getItem('sessionKey'));

What are the differences between <audio> and <video> tags in HTML5, and their respective attributes?

Feature	<audio> Tag	<video> Tag
Purpose	Embeds audio content	Embeds video content
Attributes	controls, autoplay, loop, muted	controls, autoplay, loop, poster, muted
Media Type	Audio files (e.g., MP3, WAV)	Video files (e.g., MP4, WebM)
Example	<audio controls src=”file.mp3″></audio>	<video controls src=”file.mp4″></video>

Also Read: Web Development Interview Questions and Answers

Conclusion

Today, HTML5 has revolutionised all web development procedures and approaches new heights. We can see a more semantic approach to the content organisation, which offers native support for graphics, audio and video. Ultimately all these advancements have made HTML5 a very essential and useful tool for developers, setting better SEO practices and growth opportunities. Therefore, understanding HTML5 is highly crucial for both beginners and experienced developers who seek good job opportunities. All the new features can help to make a better future for the website developers and fellow users.

FAQs

What is HTML5?

HTML5 is the latest version of the HyperText Markup Language with many new features, ready to use by the developers and assist them in making structured content on the web better than before.

What are semantic elements in HTML5?

Semantic elements clearly describe their meaning in a human-readable way, like

, and

How does HTML5 improve multimedia support?

HTML5 supports audio and video with the help of

How does HTML5 handle form validation?

HTML5 uses built-in validation attributes like required, pattern, and type for validating user input.

Updated on October 22, 2024

Link

Upskill with expert articles

View all

Free courses curated for you

Basics of Python

5 Hrs. duration

Beginner level

9 Modules

Certification included

1800+ Learners

View

Essentials of Excel

4 Hrs. duration

Beginner level

12 Modules

Certification included

2200+ Learners

View

Basics of SQL

12 Hrs. duration

Beginner level

12 Modules

Certification included

2600+ Learners

View

Hero Vired is a leading LearnTech company dedicated to offering cutting-edge programs in collaboration with top-tier global institutions. As part of the esteemed Hero Group, we are committed to revolutionizing the skill development landscape in India. Our programs, delivered by industry experts, are designed to empower professionals and students with the skills they need to thrive in today’s competitive job market.

Data Science

Accelerator Program in Business Analytics & Data Science

Integrated Program in Data Science, AI and ML

Accelerator Program in AI and Machine Learning

Advanced Certification Program in Data Science & Analytics

Certification Program in Data Analytics

Technology

Certificate Program in Full Stack Development with Specialization for Web and Mobile

Certificate Program in DevOps and Cloud Engineering

Certificate Program in Application Development

Certificate Program in Cybersecurity Essentials & Risk Assessment

Finance