Top HTML Interview Questions and Answers

Are you an HTML developer looking to work with a top company, or a recruiter from a reputable company trying to find the right HTML expert? Either way, you’ve come to the right place. This set of HTML interview questions and answers will help developers prepare for real-world interviews and assist recruiters in spotting the best talent.

Basic HTML Interview Questions for Freshers

What is the difference between `<section>`, `<div>`, and `<article>` tags in HTML?

The <section> tag is used to group similar content. For example, a webpage section. The <article> tag can be used for blog posts, news, or articles. <section> arranges the content.<article> is independent and reusable. The <div> tag is a general container to create a layout.

What is the purpose of the alt attribute in `<img>` tags?

The alt attribute in the <img> tag gives a textual description of the image. It has three main purposes.

1. Accessibility: Assists screen readers for the visually impaired.
2. Fallback: Shows when the image fails to load.
3. SEO: Enhances search engine understanding of the image.

What are meta tags in HTML, and give an example of their usage?

<meta> tags give the webpage metadata like description, keywords and author. We can include them inside the <head> tag. These tags will not be visible on the website. These tags help with SEO and are useful for search engines and browsers to get information about a web page.

Example:

What is the difference between the `<strong>` and `<b>` tags in HTML?

A <strong> tag and a <b> tag display the content in bold font. The only difference is that the <strong> tag is semantic. It emphasises the importance of content to search engines or screen readers.

How do you create a hyperlink in HTML, and what are the types of links?

We can use the <a> tag to create a hyperlink. The link has to be mentioned in the href attribute.

<a href="https://www.test.com">Click this link</a>. This is an external link that links to a site outside the current domain
<a href="/help.html">Help</a>. This is an internal link on the same website.
<a href="#sectiona">Go to Section A</a>. This is an anchor link that points to a specific section on a webpage.
<a href="mailto:test@test.com">Test Email</a> This is a mailto link that opens a mail service to send an email to the specified email address
<a href="tel:+91 9823427820">Call Me</a> This is a telephone link that allows you to make a call to the mentioned number

What are void elements in HTML?

Void elements are the tags without a closing tag. They can't have any content inside. They close by self and do not strictly require a closing tag.

Examples: <br> <img> <input> <hr> <meta> <link> <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>

What is the difference between block-level and inline elements in HTML?

Block-level elements start on a new line and take the 100% width of the parent element. They can contain other block elements or inline elements.

Examples: <div>, <p>, <h1> to <h6>, <section>, <article>

Inline elements do not start on a new line (without any break) and take only the required width. They can contain text or other inline elements.

Examples: <span>, <a>, <strong>, <img>, <em>

What is the purpose of the `<!DOCTYPE html>` declaration?

The DOCTYPE declaration tells the browser that the webpage is in HTML5 (modern HTML). This is to ensure that the browser renders the page correctly based on standard HTML rules or standards mode. This helps avoid quirks mode in which the browser may behave differently to support old code.

How do you create a multi-line text input in an HTML form?

We can use the <textarea> tag to create a multi-line text input.

To create a multi-line text input in an HTML form, use the <textarea> element. The attribute rows sets the number of lines (height). The cols attribute sets the width.

Example:

10.

What is the difference between HTML and HTML5?

HTML5 is the latest version of HTML. It supports new tags like <video>, <audio>, and <article>. HTML5 has improved semantics, better multimedia support, and new APIs for modern web development.

Why waste time screening?

Hire expert developers, vetted and ready in 48 hours

Hire now

Intermediate HTML Interview Questions

What is the purpose of the `<figure>` and `<figcaption>` tags in HTML?

<figure> group media content like images, diagrams, or code snippets.

<figcaption> adds a caption or description for that content.

What are Semantic Elements?

Semantic element clearly explains their meaning and allow browsers and developers to understand the structure. Some examples are, <header>, <footer>, <article>, and <section>. Semantic elements improve SEO.

Explain the concept of web storage in HTML5.

Web storage in HTML5 is used to store data in the browser. It has both localStorage and sessionStorage. Local storage stores the data with no expiration time. The data remains until we clear it manually. Session storage stores data for one session only. The data stored in session storage gets cleared once you close the tab or the browser. Session storage is useful for saving user preferences or temporary information instead of cookies.

What is the usage of the novalidate attribute for the form tag introduced in HTML5?

The purpose of the novalidate attribute is to inform the browser not to validate the form inputs before submitting. So, developers can validate the form using JavaScript or on the server instead of allowing the browser’s default form validation.

What are data attributes in HTML, and how are they used?

You can store custom information in HTML elements with the prefix data-. With this, you can access the information using JavaScript later.

Access through Javascript

Explain the purpose of the `<template>` tag in HTML.

When you do not want something to get rendered on a page, you can insert such HTML code inside the template tag. It remains reusable code and can be used later with JavaScript.

The <template> tag is used to define HTML code that is not rendered when the page loads. It serves as a reusable chunk of code that can be displayed later with JavaScript. This is useful for creating reusable UI parts at run time.

How do you specify multiple language versions of a webpage?

You can use the hreflang attribute in the <link> tag inside the <head> tag. Therefore, search engines can display the correct language version to the users based on the region.

What is ARIA in HTML?

ARIA stands for Accessible Rich Internet Applications. These are some attributes used to improve the accessibility of the web content, particularly for disabled people. It helps screen readers explain the purpose of each element on the webpage to the visually impaired users.

Here, when a visually impaired user accesses the button element, the screen reader can explain it as a close to the user.

What is the difference between `<iframe>` and `<object>` tags in HTML?

The <iframe> tag is used to embed an external webpage within the current page. For example, videos, maps, and other webpages.

The <object> tag is used to embed various media or external resources such as PDFs, Flash files, or multimedia content.

10.

What is the purpose of the z-index property in CSS, and how does it work?

The z-index property determines the stack order of elements on a web page. The higher the z-index, the element appears on top and vice versa. It works only on the elements that have the positions relative, absolute, or fixed.

Here, the second div will appear in front of the first div.

Advanced HTML Interview Questions for Experienced Professionals

Why do you think the addition of drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?

Adding drag-and-drop functionality in HTML5 is important as it improves user interaction. For example, when an image is set as draggable, the user can drag it. You can use JavaScript to handle the drop actions as well. When the attribute draggable is set to true, the user will be able to drag the element.

What are server-sent events in HTML5?

The server-sent events (SSE) in HTML5 allow the server to send real-time updates (live notification, news feeds) to the browser. So, the client side doesn't need to request server updates every time.

How can you create a multi-level nested list using only HTML, and what are valid use cases for it?

You can use a combination of an unordered list <ul> or an ordered list <ol> along with nested <li> elements.

Use cases: Menus and submenus, Table of Contents, Categories and subcategories.

What was a manifest file in HTML5?

It's now outdated and replaced by Service Workers. A manifest file was used for making offline access to a web application through AppCache. It lists the HTML, CSS, JS, and image resources that the browser should cache and make available offline.

What is the Shadow DOM?

A shadow DOM is a feature that developers can use to build reusable, isolated ui components without thinking about CSS or JavaScript conflicts.

Explain the concept of HTML parsing and rendering.

HTML parsing is the process of reading the html to create the DOM. Rendering is the process of applying styles and displaying the visual on the page.

How does lazy loading of images work in HTML5?

Lazy loading loads the images when the user scrolls or is about to view an image on a webpage. This improves page load speed and performance. HTML5 uses the attribute loading=” lazy” to implement this.

What is an XSS attack? How can you prevent XSS attacks through HTML inputs?

XSS means Cross-Site Scripting (XSS) attacks through HTML inputs.

Always escape user input before rendering it on the HTML. Utilise content security policies, avoid inline JavaScript, and validate inputs always.

Sanitise User Input: Convert < to < > to > & to &
Use Proper Escaping

Content Security Policy (CSP): Block malicious scripts by adding a CSP header.

Avoid Inline JavaScript: Avoid inline scripts and add them to an external script file and handle using event handlers.

Validate and Limit Input: Allow only required data and set a limit for the input. Reject malicious content.
Use HTML5 Input Types: Use only HTML5 input types to avoid unnecessary inputs from the user.

What is the difference between the `<canvas>` element and the `<svg>` element in HTML5, and when would you use each?

<canvas> is used for dynamic, pixel-based, real-time graphics. Examples: Games, Image Editing

You can use <svg>for a scalable, vector-based graphic.SVG is interactive and accessible. Examples: Icons, logos, charts

10.

What is the purpose of the `<base>` tag in HTML, and how is it used?

You can define a relative URL for a webpage with the base tag. It becomes easy to manage the links.

Here, the image URL will be https://www.test.com/images/logo.png

This collection includes questions that cover everything from the basics to more advanced topics in HTML. Whether you’re preparing for an interview or trying to find a skilled developer, this guide can help. Tired of long hiring processes? WAC makes it easy to find skilled developers without waiting. And if you’re an experienced HTML developer aiming for a role with a leading company, these interview questions are worth checking out, and feel free to visit our careers page.