HTML Interview Questions and Answers (2024) - Intermediate Level
Last Updated :
23 Jul, 2025
In this article, you will learn HTML interview questions and answers intermediate level that are most frequently asked in interviews. Before proceeding to learn HTML interview questions and answers - intermediate level, first we learn the complete HTML Tutorial, and HTML Interview Questions and Answers - Basic Level.
HTML Interview Questions and AnswersThe below contains the list of the top most common & frequently asked HTML & HTML 5 interview questions with their explanations.
Both the tags (<div> and <span>) are used to represent the part of the web page. The <div> tag is used as the block component, and the <span> tag is used as an inline component.
<div>
A Computer Science Portal for Geeks
<span>
GeeksforGeeks
<span>
</div>
<div> tag: The div tag is known as the Division tag. It is a block-level tag & is used in HTML to make divisions of content on the web page (text, images, header, footer, navigation bar, etc). Div tag has both openings (<div>) and closing (</div>) tags, and it is mandatory to close the tag.
<span> tag: The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes). A better way to use it is when no other semantic element is available.
2. Differences between <div> & <span> tag:
<div> tag | <span> tag |
|---|
The <div> tag is a block level element.
| The <span> tag is an inline element.
|
It is best to attach it to a section of a web page.
| It is best to attach CSS to a small section of a line on a web page.
|
It accepts align attribute.
| It does not accept aligned attributes.
|
This tag should be used to wrap a section, for highlighting that section.
| This tag should be used to wrap any specific word that you want to highlight on your webpage.
|
id Attribute: The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.
Syntax:
<element id="id_name">
In CSS Stylesheet:
#id_name {
// CSS Property
}
class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name can be represented by using the “.” symbol.
Syntax:
<element class="class_name>
In CSS Stylesheet:
.class {
// CSS Property
}
Difference between id and class attribute: The only difference between them is that “id” is unique on a page and can only apply to at most one element, while the “class” selector can apply to multiple elements.
When the content of one completely different webpage is embedded into another webpage, it is called a nested webpage. The nested webpage can be created using the following 2 methods:
- <iframe> tag: The iframe in HTML stands for Inline Frame. The “iframe” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
- <embed> tag: The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.
The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta information.
The HTML <head> element is a container for the following elements:
- <title>: It defines the title of the webpage.
- <link>: It is most often used to link an external CSS file.
- <meta>: It is used to specify the Character set, Page description, Keywords, Author of the document, and Viewport settings. It will not be displayed but is used by browsers on how to display content or reload pages and by search engines, and other web services.
- <base>: It is used to specify the base URL or target for relative URLs.
- <style>: It is used to make internal CSS within our HTML webpage.
- <script>: It is used to define within the HTML webpage.
The metadata means information about data. The <meta> tag in HTML provides information about HTML Document or in simple words, it provides important information about a document. These tags are basically used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc. This tag is an empty element because it only has an opening tag and no closing tag, but it carries information within its attributes. A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical appearance of the document.
Syntax:
<meta attribute-name="value">
Key Points:
- The <meta> tag contents are not visible on your browser & is added inside the <head> tag.
- They are just used to give additional information about the HTML document.
- The <meta> tags are added to our HTML document for the purpose of Search Engine Optimisation.
Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
Page Layout Information:
- Header: The part of the front end which is used at the top of the page. <header> tag is used to add header section in web pages.
- Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks.
- Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added to the page.
- Content Section: The content section is the main part where content is displayed.
- Footer: The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag is used to set the footer on web pages.
Semantic Elements have meaningful names which tell about the type of content. For instance header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instruct the browser on how to treat them.
- article: It contains independent content which doesn't require any other context.
- aside: It is used to place content in a sidebar i.e. aside from the existing content.
- details: It defines additional details that the user can hide or view.
- figure & figcaption: It is used to add an image to a web page with a small description.
- footer: It is located at the bottom of any article or document, they can contain contact details, copyright information, etc.
- header: It is used for the header of a section introductory of a page.
- main: It defines the main content of the document.
- mark: It is used to highlight the text.
- nav: It is used to define a set of navigation links in the form of a navigation bar or nav menu.
- section: A page can be split into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different section tag.
HTML provides some method to display reserved characters. Reserved characters are those characters that are either reserved for HTML or those which are not present in the basic keyboard.
For Example: '<' is already reserved in HTML language. Sometimes this character needs to display on the web page which creates ambiguity in the code. Along with these are the characteristics which are normally not present in basic keyboard ( £, ¥, €, © ), etc. HTML provides some Entity names and Entity numbers to use these symbols. Entity number is easy to learn.
There are some characters in HTML that are reserved, & have special meaning when they are used in an HTML document. Like if you used less than or greater than sign in your HTML document then the browser will treat them differently. So we will use HTML entities to insert symbols in a webpage.
Special Symbols
| Syntax
|
|---|
©:copyright
| ©
|
®:registered trademark
| ®
|
™:trade mark
| ™
|
@: at
| @
|
¶: paragraph
| ¶
|
§: section
| §
|
ℂ: double-struck capital c
| 𝕔
|
℅: care of
| ℅
|
A Uniform Resource Locator (URL) is simply the address of a website to access the website content like www.geeksforgeeks.org. But there are certain characters allowed to use in the URL like alphabets A-Z and a-z, numbers 0-9, and a few special characters. They can be used as it is but the rest of the characters that are not in this list are used after encoding them to a suitable form.
URL Encoding is the process of converting the URL into a valid format that is accepted by web browsers. URL Encoding takes place by replacing all the characters that are not allowed with a % sign followed by two hexadecimal digits. These two hexadecimal values represent the numerical values of the character in the ASCII character set. For example, a space is not acceptable in a URL and is replaced by ‘%20’ or a ‘+’ sign while encoding. Similarly, a $ sign is replaced by ‘%24’.
Reserved Characters: There are certain characters that sometimes have special meanings in the URL and they can be used in both ways. For example, the ‘/’ character is a reserved character and it has a special meaning when being used as a delimiter to separate the paths of a URL. Here it is used by encoding it to ‘%2F’. Elsewhen it has no special purpose it can be used normally.
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. There are 2 HTTP request methods ie., GET & POST
- GET: It requests data from a specified resource.
- POST: This method is used to submit data to be processed to a specified resource.
- The bold parts in the URL are the GET parameters and the italic parts are the value of those parameters.
- More than one parameter=value can be embedded in the URL by concatenating with ampersands (&).
- One can only send simple text data via GET method.
The HTML “canvas” element is used to draw graphics via JavaScript.The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Example: The canvas would be a rectangular area on an HTML page. By default, a canvas has no border and no content. An id attribute has been specified to refer to it in a script, and a width and height attribute to define the size of the canvas. The style attribute is used to add a border.
HTML
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="400"
height="200"
style="border:2px solid #000000;">
</canvas>
</body>
</html>
Output:
SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated.
Advantages of SVG: Advantages of using SVG over other image formats (like JPEG and GIF) are:
- SVG images can be created and edited with any text editor.
- SVG images can be searched, indexed, scripted, and compressed.
- SVG images are scalable.
- SVG images can be printed with high quality at any resolution.
15. What are the different multimedia formats supported by HTML?
Multimedia files have formats and different extensions like .wav, .mp3, .mp4, .mpg, .wmv, and .avi
Geo-location in HTML5 is used to share the location with some web site and aware of the exact location. It is mainly used for local businesses, restaurants, or to show locations on the map. It uses JavaScript to give the latitude and longitude to the backend server. Most of the browsers support Geolocation API. Geo-location API uses a global navigator object which can be created as follows:
var loc = navigator.geolocation
Displaying Location using HTML Geolocation: The following code is displaying the current location with the help of latitude and longitude via HTML Geolocation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Latitude and longitude</title>
<style>
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
margin-left: 50px;
}
.geeks {
margin-left: 150px;
}
p {
font-size: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Displaying location using Latitude and Longitude</p>
<button class="geeks"
onclick="getlocation()">
Click
</button>
<p id="demo1"></p>
<script>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerHTML = "Latitude: "
+ pos.coords.latitude
+ "<br>Longitude: "
+ pos.coords.longitude;
}
</script>
</body>
</html>
Output:
SessionStorage and LocalStorage are known as the web storage API. Data can be stored on the client-side by using these APIs.
SessionStorage:
- SessionStorage is used for storing data on the client-side.
- The maximum limit of data saving in SessionStorage is about 5 MB.
- Data in the SessionStorage exist till the current tab is open if we close the current tab then our data will also erase automatically from the SessionStorage.
- Like SessionStorage, LocalStorage is also used for storing the data on the client-side.
- The maximum limit of data saving is about 5 MB in LocalStorage also.
- LocalStorage has no expiration time, Data in the LocalStorage persist till the user manually deletes it. This is the only difference between LocalStorage and SessionStorage
HTML Form is a document that stores information of a user on a web server using interactive controls. An HTML form contains different kinds of information such as username, password, contact number, email id, etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons, etc. Using these elements the information of a user is submitted on a web server. The form tag is used to create an HTML form.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<form>
Username:
<br>
<input type="text"
name="username">
<br>
Email id:
<input type="text"
name="email_id">
<br>
<input type="submit"
value="Submit">
</form>
</body>
</html>
Output:
Similar Reads
HTML Tutorial HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
11 min read
Basics
HTML IntroductionHTML stands for Hyper Text Markup Language, which is the core language used to structure content on the web. It organizes text, images, links, and media using tags and elements that browsers can interpret. As of 2025, over 95% of websites rely on HTML alongside CSS and JavaScript, making it a fundam
6 min read
HTML EditorsAn HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi
5 min read
HTML BasicsHTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over
7 min read
HTML Structure & Elements
HTML ElementsAn HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.For example, the <p> ele
5 min read
HTML AttributesHTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value
8 min read
HTML HeadingsHTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate.Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page
4 min read
HTML ParagraphsA paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.Syntax:<p> Some Content...
5 min read
HTML Text FormattingHTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of ContentCategories of HTML Text FormattingLogic
4 min read
HTML Block and Inline ElementsHTML elements are either block-level, which structure the layout and span full width (like <div> or <p>), or inline, which styles content within blocks without breaking the flow (like <span> or <a>). This distinction covers 80–90% of common HTML usage.Inline and Block Level E
3 min read
HTML CharsetsHTML charsets define how characters are represented in a web document. The character encoding ensures that text appears correctly across different devices and platforms.The <meta> tag's charset attribute is used to specify which character encoding the HTML document uses. By setting the charset
4 min read
HTML List
HTML Visuals & Media
HTML ColorsHTML Colors can be applied to text, backgrounds, borders, links, forms, tables, etc. This article provides an in-depth look at how colors can be applied to various elements such as text, backgrounds, borders, links, forms, and tables in HTML. We will explore different color formats including hexadec
11 min read
HTML Links HyperlinksHTML Links, also known as hyperlinks, are defined by the <a> tag in HTML, which stands for "anchor." These links are essential for navigating between web pages and directing users to different sites, documents, or sections within the same page. The basic attributes of the <a> tag include
3 min read
HTML ImagesThe HTML <img> tag is used to embed an image in web pages by linking them. It creates a placeholder for the image, defined by attributes like src, width, height, and alt, and does not require a closing tag.There are two ways to insert the images into a webpage:By providing a full path or addre
7 min read
HTML FaviconA favicon (short for "favorite icon") is a small yet important image that appears next to your website’s title in the browser tab. Also known as a tab icon or bookmark icon, it helps users quickly identify and return to your site. Studies show that over 85% of users rely on visual cues like favicons
4 min read
HTML VideoThe <video> element in HTML is used to show video content on web pages. It supports various video formats, including MP4, WebM, and Ogg. It is introduced in HTML5.Scroll down to the End, there is a Tutorial Video which is a live example of the Video Element displaying on this webpage.Syntax:
4 min read
HTML Layout & Design
HTML TablesHTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over
10 min read
HTML IframesAn iframe, or Inline Frame, is an HTML element represented by the <iframe> tag. It functions as a 'window' on your webpage through which visitors can view and interact with another webpage from a different source.Iframes are used for various purposes like:Embedding Multimedia: Easily integrate
4 min read
HTML LayoutHTML layouts are a technique used to divide a web page into multiple sections, making it easier to apply styles, organize content, and manage operations efficiently. This division improves readability, accessibility, and overall user experience.HTML layout is achieved through elements like <heade
4 min read
HTML File PathsHTML file paths specify the location of files or resources that a webpage needs to access, such as images, videos, scripts, or other HTML documents. These paths tell the web browser where to find the files required to display the content correctly or to execute scripts as intended. To insert a file
3 min read
HTML Projects& Advanced Topics
HTML FormsHTML forms, defined using the <form> Tags are essential for collecting user input on web pages. They incorporate a variety of interactive controls such as text fields, numeric inputs, email fields, password fields, checkboxes, radio buttons, and submit buttons. Over 85% of websites rely on for
5 min read
HTML5 SemanticsHTML5 introduced a range of semantic elements that clearly describe their purpose in human and machine-readable language. Unlike non-semantic elements, which provide no information about their content, semantic elements clearly define their content. For instance, <form>, <table>, and
6 min read
HTML URL EncodingA Uniform Resource Locator (URL) is simply the address of a website to access the website content. Web browsers retrieve pages from web servers using a URL (Uniform Resource Locator).What is URL Encoding?URL Encoding is the process of converting the URL into a valid format that is accepted by web br
4 min read
HTML Responsive Web DesignHTML Responsive Web Design is a modern approach to web development that ensures web pages look great on any device, from phones and tablets to desktop computers. It focuses on making HTML elements automatically adjust—resizing, hiding, or repositioning based on the screen size. This approach guarant
11 min read
Top 10 Projects For Beginners To Practice HTML and CSS SkillsLearning to code is an exciting journey, especially when stepping into the world of programming with HTML and CSS—the foundation of every website you see today. For most beginners, these two building blocks are the perfect starting point to explore the creative side of web development, designing vis
8 min read
HTML Tutorial References
HTML Tags - A to Z ListHTML Tags are fundamental elements used to structure and format content on web pages. They provide instructions to web browsers on how to render text, images, links, and other media.HTML tags are enclosed in angle brackets < > and usually come in pairs: an opening tag and a closing tag. The cl
15+ min read
HTML Attributes Complete ReferenceHTML attributes are special words placed inside the opening tag of an HTML element to define its characteristics. Each attribute has two parts:Attribute nameAttribute value (separated by an equal sign = and enclosed in double quotes " ").Syntax:<tag_name attribute_name="value"> Contents...
8 min read
HTML Global AttributesHTML attributes provide additional information about an element and define its properties. Global attributes are special types of attributes that can be used with any HTML element, offering common functionality to enhance behavior and presentation.Global attributes can be applied to any HTML element
5 min read
HTML5 Complete ReferenceHTML (HyperText Markup Language) is the standard language used to create and design web pages. It defines the structure and layout of a webpage using a series of elements and tags.HTML5 is the latest version of HTML, bringing significant improvements for building modern web applications.It introduce
8 min read
HTML5 MathML Complete ReferenceThe MathML comes in HTML5. The current MathML version is 3. It was introduced in the year 2015. MathML stands for Mathematics Markup Language. It is used to represent mathematical equations or expressions in web browsers, like other HTML elements. MathML is used to describe mathematics as a basis fo
3 min read
HTML DOM Complete ReferenceHTML DOM (Document Object Model) is a programming interface that represents the elements of an HTML document in a tree-like structure.Allows developers to change content and layout using JavaScript.Enables dynamic updates and user interaction on websites.Facilitates the addition, removal, or modific
15+ min read
HTML DOM Audio/Video Complete ReferenceHTML DOM Audio/Video properties and methods allow developers to control audio and video elements programmatically.These controls include playing, pausing, stopping, and adjusting volume.DOM methods enable dynamic interaction and customization of media elements.They enhance the user experience by off
2 min read
SVG Element Complete ReferenceSVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. Elements are the core things that is required to work with SVGs.List of SVG Elements:SVG ElementsDescription<a>The <a>
5 min read
SVG Attribute Complete ReferenceSVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. Attributes are the things that give the SVG shape, color, etc it will make the SVGs as attractive as you need.List of SVG Attribut
8 min read
SVG Property Complete ReferenceSVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. Properties are used for passing the value to the element, there are lots of properties that can be used in SVG elements. table{ di
7 min read
HTML Canvas Complete ReferenceThe HTML “canvas†element is used to draw graphics via JavaScript. The “canvas†element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.Example: This example shows the basic
4 min read