Join Our 4-Week Free Gen AI Course with select Programs.

Request a callback

or Chat with us on

Top HTML Interview Questions and Answers

Basics of Python
Basics of Python
icon
5 Hrs. duration
icon
9 Modules
icon
1800+ Learners
logo
Start Learning

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> Also Read: <a href="https://herovired.com/learning-hub/topics/html-and-css-projects/">Top 13 HTML and CSS Projects</a>

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.
Gaming and Esports
Internship Assurance
Gaming and Esports

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, &lt; represents the < symbol, and &amp; 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:

 

  1. Local Storage: Stores data with no expiration date. Data persists even after the browser is closed and reopened. It is accessed using localStorage.
  2. 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
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.
Semantic elements clearly describe their meaning in a human-readable way, like
,
, and
HTML5 supports audio and video with the help of
HTML5 uses built-in validation attributes like required, pattern, and type for validating user input.
brochureimg

The DevOps Playbook

Simplify deployment with Docker containers.

Streamline development with modern practices.

Enhance efficiency with automated workflows.

left dot patternright dot pattern

Programs tailored for your success

Popular

Management

Data Science

Finance

Technology

Future Tech

Upskill with expert articles

View all
Hero Vired logo
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

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

Integrated Program in Finance and Financial Technologies

Certificate Program in Financial Analysis, Valuation and Risk Management

Management

Certificate Program in Strategic Management and Business Essentials

Executive Program in Product Management

Certificate Program in Product Management

Certificate Program in Technology-enabled Sales

Future Tech

Certificate Program in Gaming & Esports

Certificate Program in Extended Reality (VR+AR)

Professional Diploma in UX Design

Blogs
Reviews
Events
In the News
About Us
Contact us
Learning Hub
18003093939     ·     hello@herovired.com     ·    Whatsapp
Privacy policy and Terms of use

© 2024 Hero Vired. All rights reserved