HTML Cheat Sheet for Beginners
Uploaded by
Dhruva WaraHTML Cheat Sheet for Beginners
Uploaded by
Dhruva Wara7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
Search...
HTML Cheat Sheet
Last Updated : 09 May, 2025
HTML (HyperText Markup Language) serves as the foundational framework for web pages, structuring content like text, images, and videos. HTML forms
the backbone of every web page, defining its structure, content, and interactions. Its enduring relevance lies in its universal adoption across web
development, ensuring that regardless of the framework or language used, content ultimately renders in HTML.
This HTML Cheat Sheet for Beginners contains helpful code examples and is designed as a quick reference for those familiar with these languages. From
semantic elements to mobile optimization, we covered all topics. Whether you’re building a personal blog, an e-commerce site, or a cutting-edge web app,
this cheat sheet has you covered.
What is an HTML Cheat Sheet?
An HTML Cheat Sheet is a reference document summarizing key HTML elements, attributes, and syntax. It serves as a quick guide for web developers,
offering easy access to commonly used tags and their respective functionalities.
Main root
The <html> element represents the root (top-level element) of an HTML document also called the document element. All other elements must be
descendants of this element.
<html> … </html>
Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Description of the document -->
<meta charset="UTF-8" />
<title>
<!-- title goes here -->
Geeks For Geeks
</title>
</head>
<body>
<!-- your content goes here -->
Welcome to Geeks for Geeks
</body>
</html>
Headings
HTML heading tags (<h1> to <h6>) are used to define headings and subheadings on your webpage.
The <h1> tag is typically reserved for the page’s main title, while the others denote subheadings in descending order of importance.
Heading Tags Description Syntax
<h1> Used for title generally once per page and has a font size of 2em. <h1>....</h1>
<h2> Used for medium sized titles and has a font size of 1.5em. <h2>....</h2>
<h3> Used for subsections and has a font size of 1.17em. <h3>....</h3>
<h4> Used for highlighting text with font size of 1em. <h4>....</h4>
<h5> Fifth level heading with font size of .83em. <h5>....</h5>
<h6> Displays least significant details and has a font size of .67em <h6>....</h6>
<!DOCTYPE html>
<html>
[Link] 1/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>GeeksforGeeks</h2>
<h3>GeeksforGeeks</h3>
<h4>GeeksforGeeks</h4>
<h5>GeeksforGeeks</h5>
<h6>GeeksforGeeks</h6>
</body>
</html>
Container
Container tags in HTML are used to group other elements together. They provide a way to structure your HTML and apply styles to multiple elements at
once. The several container tags in HTML are:
Tags Description Syntax
<div> Block element that defines a division in HTML document. <div>... </div>
<span> Inline element used to mark up a part of a text or document. <span>...</span>
<p> Used to represent a paragraph. <p>...</p>
<pre> Represents pre-formatted text to present exactly as written in the HTML file. <pre>...</pre>
<code> Used to represent source codes <code>...</code>
<!DOCTYPE html>
<html>
<head>
<title> GeeksforGeeks </title>
<meta name="keywords" content="Meta Tags, Metadata" />
<meta name="description" content="Geeksforgeeks is a computer science portal." />
<style type="text/css">
body {
background-color: powderblue;
}
h1 {
color: black;
font-family: arial;
}
</style>
</head>
<body>
<p>
GeeksforGeeks is a
<!-- span tag starts-->
<span style="color:red;font-weight:bolder">
computer science</span> portal for
<span style="background-color: lightgreen;">
geeks
</span>
<!-- span tag ends -->
<!-- pre tag starts here -->
<pre>
This
is a pre tag.
</pre>
</p>
<!-- html pre tag ends here -->
<!--code Tag starts here -->
code tag: Displays code snippets.
<code>
#include<stdio.h>
int main() {
printf("Hello Geeks");
}
<!--code Tag ends here -->
</code>
<p>
Click on the following link
<!-- anchor tag starts -->
<a href="[Link]
GeeksforGeeks
</a>
<!-- anchor tag ends -->
[Link] 2/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
</p>
</body>
</html>
Document Information
This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of
what the document contains, enhancing the understanding of its structure and content.
Tags Description Syntax
<head> Container for metadata which is data about data. <head>...</head>
<link> Used to link external style sheets or documents. <link>
<meta> Defines metadata about HTML document. <meta/>
<title> Defines the document's title <title>...</title>
<style> Used to define style information (CSS) for a document. <style>...</style>
<!DOCTYPE html>
<html>
<!-- head tag starts here -->
<head>
<!-- title tag -->
<title>Title goes here </title>
<!-- link tag -->
<link rel="stylesheet" type="text/css" href="[Link]">
<!-- meta tag starts -->
<meta name="keywords" content="Meta Tags, Metadata" />
<!-- meta tag ends -->
<!-- style tag starts here -->
<style>
#first {
font-family: Castellar;
background-color: green;
color: white;
}
.second {
text-align: center;
background-color: white;
font-size: 30px;
color: red;
}
</style>
<!-- style tag ends here -->
</head>
<!-- head tag ends here -->
<body>
<p id="first">Hello GeeksforGeeks.</p>
<p class="second">Welcome Geeks</p>
</body>
</html>
Semantic Element
Semantic Element in HTML are elements that clearly describe their meaning in terms of content and function, both to the browser and the developer.
Tags Description Syntax
<header> Used to give introductory content about the document. <header>... </header>
<main> Represents the main dominant content of a document. <main>... </main>
<section> Structural HTML element used to group together related elements. <section>... </section>
<nav> Represents a section of a page to provide navigation links <nav>...</nav>
<article> Represents a self-contained composition which is independently distributable or reusable. <article>... </article>
<aside> Defines some content aside from the content it is placed in. <aside>... </aside>
<footer> Represents a footer for its sectioning root element <footer>... </footer>
[Link] 3/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
<address> Provides contact information for a person, people, or an organization. <address>..</address>
<!DOCTYPE html>
<html>
<body>
<h3>HTML Header Tag</h3>
<hr>
<article>
<!-- header tag starts -->
<header>
<h3>GeeksforGeeks Learning</h3>
<h3> HTML nav Tag</h3>
<!-- nav tag starts -->
<nav>
<a href="#">Home</a> |
<a href="#">Interview</a> |
<a href="#">Languages</a> |
<a href="#">Data Structure</a> |
<a href="#">Algorithm</a>
</nav>
<!-- nav tag ends -->
</header>
<!-- header tag ends -->
</article>
<!-- main tag starts here -->
<main>
<!-- HTML section tag is used here -->
<section>
<h1>Geeksforgeek: Section 1</h1>
<p>Content of section </p>
</section>
<!-- HTML section tag ends here -->
<!-- aside tag starts here -->
<aside>
<h1>This is heading text in aside Tag</h1>
<p>This is paragraph text in aside Tag</p>
</aside>
<!-- aside tag ends here -->
</main>
<!-- main tag ends here -->
<!--HTML footer tag starts here-->
<footer>
<article>
<!-- address tag starts from here -->
<address>
Organization Name: GeeksforGeeks <br>
Web Site:
<a href="[Link]
GeeksforGeeks</a><br>
visit us:<br>
GeeksforGeeks<br>
A-118, Sector 136, Noida, <br>
Uttar Pradesh (201305)
</address>
<!-- address tag ends here -->
</article>
<br>
<a href="[Link]
About Us
</a>|
<a href="[Link]
Privacy Policy
</a>|
<a href="[Link]
Careers
</a>
<p>@geeksforgeeks, Some rights reserved</p>
</footer>
<!-- footer tag ends here -->
</body>
</html>
Text Formatting and Inline Text Semantics
Text formatting tags in HTML, are used to format text in different ways, like making text bold, italicized, or monospaced. The HTML inline text semantics is
used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
Tags Description Syntax
<em> Used to put stress on some text or show some degree of emphasis. <em>...</em>
<strong> Indicates that the content has strong importance. <strong>...</strong>
[Link] 4/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
<sub> Writes the text as subscript. <sub>...</sub>
<sup> Writes the text as superscript. <sup>...</sup>
<abbr> Represents an abbreviation or acronym. <abbr>... </abbr>
<mark> Highlights important text for reference or notation purposes. <mark>...</mark>
<cite> Describes the title of a creative work. <cite>...</cite>
<time> Used to represent a specific period of time. <time>...</time>
<!DOCTYPE html>
<html>
<head>
<title> Geeks for Geeks </title>
</head>
<body>
<!-- emphasis -->
<div><em>Emphasized text</em></div>
<!-- strong -->
<div><strong>Important text!</strong></div>
<!-- subscript -->
<div>GFG<sub>subscript text</sub></div>
<!-- superscript -->
<div>GFG<sup>Superscript text</sup></div>
<!-- abbreviation -->
<div><abbr>Abbreviation</abbr></div>
<!-- mark -->
<div><mark>Highlighted text</mark></div>
<!-- cite -->
<div><cite>Title of creative work</cite></div>
<!-- time -->
<div>Time<time>9:00 am</time>
to <time>7:00 pm</time>
</div>
</body>
</html>
Lists
List tags in HTML, including <ul>, <ol>, and <li>, are used to create different types of lists. It can be either numerical, alphabetic, bullet, or other symbols.
There are three list types in HTML:
Unordered list: Used to group a set of related items in no particular order.
Ordered list: Used to group a set of related items in a specific order.
Description list: Used to display name/value pairs such as terms and definitions.
Tags Description Syntax
<ul> Represents an unordered list of items list. <ul>...</ul>
<ol> The HTML <ol> element represents an ordered list of items. <ol>...</ol>
<li> Represents an item in a list. <li>...</li>
<dl> Represents a description list. <dl>...</dl>
<dd> Used to describe a term/name in a description list. <dd>...</dd>
<dt> Specifies a term in a description. <dt>...</dt>
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>Unordered List</h5>
<!-- Unordered List -->
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
</ul>
[Link] 5/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
<h5>Ordered List</h5>
<!-- Ordered List -->
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
</ol>
<h5>Description List</h5>
<!-- Description List -->
<dl>
<dt>Courses:</dt>
<dd>100 </dd>
<dt> Quizes:</dt>
<dd> 500 </dd>
<dt> Interview Experiences:</dt>
<dd>1000 </dd>
</dl>
</body>
</html>
Tables
Table tags in HTML, such as <table>, <tr>, <td>, and <th>, are used to create and structure tables in HTML. They allow you to present data in rows and
columns.
Tags Description Syntax
<caption> Specifies caption of a table. <caption>…</caption>
<table> Represents data in a two-dimensional table. <table>…</table>
<thead> Used to provide a header to the group of content in an HTML table <thead>…</thead>
<tbody> Used to group primary content of an HTML table. <tbody>…</tbody>
<th> Defines a cell as header of a group of cells of the table. <th>…</th>
<td> Defines a cell of a table. <td>…</td>
<tr> Defines a row in an HTML table. <tr>…</tr>
<tfoot> Defines a set of rows summarizing the columns of the table. <tfoot>…</tfoot>
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<!-- table starts here -->
<table>
<!-- Table Caption -->
<caption>Geeks For Geeks Learning</caption>
<!-- Table row starts -->
<tr>
<!--Headers -->
<th>Programming Languages</th>
<th>Development</th>
</tr>
<!-- Table row ends -->
<tr>
<!-- Table data -->
<td>C programming </td>
<td>Full stack development</td>
</tr>
<tr>
<td>Java programming</td>
<td>Backend development</td>
</tr>
<tr>
<td>Angular </td>
<td>Frontend Development</td>
</tr>
<!-- Table Footer starts here -->
<tfoot>
<tr>
<td>Footer content</td>
</tr>
</tfoot>
<!-- Table footer ends here -->
</table>
[Link] 6/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
</body>
</html>
Forms
An HTML form is a section of a document that acts as a container for different types of input elements, such as text fields, passwords, menus, checkboxes,
radio buttons, submit buttons, etc.
Generally, Form tags in HTML, like <form>, <input>, <textarea>, and <button>, are used to create forms for user input.
Tags Description Syntax
<form> Represents a section containing controls for submitting information. <form>...</form>
<input> Creates interactive controls for forms to accept data. <input>...</input>
<textarea> Create a multi-line plain-text editing control <textarea>...</textarea>
<select> Represents a control that provides a menu of options to select from. <select>...</select>
<option> Defines an option in a select list. <option>...</option>
<optgroup> Creates a grouping of options within a <select> element. <optgroup>.</optgroup>
<progress> Displays an indicator showing the degree of completion of a task. <progress>...</progress>
<datalist> Used to give predefined options for an <input> element and adds an autocomplete feature to it. <datalist>...</datalist>
<button> Represents a clickable button. <button>...</button>
<label> Specifies a label for an <input> element. <label>...</label>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GfG</title>
</head>
<body>
<form>
HTML Cheat Sheet <fieldset>
CSS Cheat Sheet JS Cheat Sheet Bootstrap Cheat Sheet jQuery Cheat Sheet Angular Cheat Sheet SDE Sheet Facebook SDE Sheet Amazon SDE Sheet Apple SDE Sheet Netflix SD
<legend>Personal Details</legend>
<p>
<p>select used here:</p>
<!-- label starts -->
<label>
Salutation
<br />
<!-- select starts -->
<select name="salutation">
<option>--None--</option>
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
<!-- select ends -->
</label>
<!-- label ends -->
</p>
<p>
<label>First name:
<input name="firstName" placeholder="input element used here" />
</label>
</p>
<p>
<label>Last name: <input name="lastName" /></label>
</p>
<p>
Gender :
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</p>
<label Language preferred: </label>
<input list="lang" placeholder="datalist used here">
<!--datalist Tag starts here -->
[Link] 7/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
<datalist id="lang">
<option value="java"></option>
<option value="reactjs"></option>
<option value="php"></option>
<option value="python"></option>
</datalist>
<!--datalist Tag ends here -->
<p>
<label>Email:
<input type="email" name="email" />
</label>
</p>
<p>
<label>Date of Birth:
<input type="date" name="birthDate"/>
</label>
</p>
<p>
<!-- HTML address tag -->
<label>
Address :
<br />
<!--Textarea -->
<textarea name="address"
placeholder="Textarea used here">
</textarea>
</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
<p>Progress tag used here:</p>
Downloading progress for your profile:
<!--HTML progress tag starts here-->
<progress value="57" max="100" placeholder="progress tag used here">
</progress>
<!--HTML progress tag ends here-->
</fieldset>
</form>
</body>
</html>
Multimedia
Multimedia tags in HTML, such as <img>, <audio>, and <video>, are used to embed multimedia content like images, audio files, and videos into your
webpage.
Tags Description Syntax
<img> Used to link images to web pages. <img />
<audio> Used to include sound content in documents. <audio>...</audio>
<video> Embeds a media player which supports video files in the document. <video>...</video>
<figure> Groups various diagrams, images, illustrations, and code snippets into the document. <figure>...</figure>
<figcaption> Used to provide the caption of the content. <figcaption>...</figcaption>
<embed> Embeds multimedia on a Web page <embed>...</embed>
<object> Includes objects, such as images, audio, videos, and Portable Document Format (PDF) on a Web page. <object>...</object>
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<p>image here</p>
<!-- image tag starts here-->
<img src=
"[Link]
width="420" height="100" alt="[Link]">
<!-- image tag ends here-->
<p> Audio Sample</p>
<!-- audio tag starts here -->
<audio controls>
<source src="test.mp3" type="audio/mp3">
<source src="[Link]" type="audio/ogg">
</audio>
<!-- audio tag ends here -->
<p> Video sample</p>
<!-- Video tag starts here -->
<video width="400" height="350" controls>
[Link] 8/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
<source src="myvid.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
</video>
<!-- Video tag ends here -->
<p> HTML Figure here</p>
<!--HTML figure tag starts here-->
<figure>
<img src=
"[Link]
width="304" height="228" alt="The Pulpit Rock">
<figcaption>Figure Caption goes here </figcaption>
</figure>
<!--HTML figure tag ends here-->
<p> HTML Object here</p>
<!--HTML object tag starts here-->
<object data=
"[Link]
width="550px" height="150px">
GeeksforGeeks
<!--HTML object tag ends here-->
</object>
</body>
</html>
Characters and Symbols
Special characters and symbols in HTML, like & for an ampersand or < for a less-than sign, are used to display characters that have special meaning in
HTML. Some of the most commonly used ones are:
Symbol Description Entity Name Number Code
© Copyright © ©
& Ampersand & &
> Greater than > >
< Less than < <
$ Dollar $ $
" Quotation mark " "
' Apostrophe ' '
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Characters and Symbols</title>
</head>
<body>
<!-- Characters and Symbols are use inside of p element -->
<p>This is the sign of copyright: © </p>
<p>This is the sign of trademark: ™ </p>
<p>This is the sign of ampersand: @ </p>
<p>This is the sign of dollar : $ </p>
<p>This is the sign of less than : < </p>
<p>This is the sign of greater than : > </p>
<p>This is the sign of quotation mark : " </p>
</body>
</html>
Attributes
Attributes in HTML are used to provide additional information about HTML elements. They are always specified in the start tag and usually come in
name/value pairs like name="value". The name is the property you want to set and the value is the desired value of the attribute.
Attributes Description Syntax
alt Used in the image tag to specify the alternative text of the image < tag_name alt ="..." >
href Used to define a hyperlink. < tag_name href ="..." >
src Specifies URL of the image to be used. < tag_name src ="..." >
width Specifies the width of the image in pixels. < tag_name width ="..." >
height Specifies the height of the image in pixels. < tag_name height ="..." >
[Link] 9/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
style Helps to change the look and feel of the document. < tag_name style ="..." >
id Unique identifier used to specify an area of a webpage. < tag_name id ="..." >
class Specifies one or more class names for an element. < tag_name class ="..." >
title Specifies extra information about an element. < tag_name title ="..." >
Placeholder Specifies a short hint that describes the expected value of an input field/text area <tag_name placeholder=" ">
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes</title>
<style>
#geeks {
background-color: green;
color: white;
}
.gfg {
background-color: white;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<!-- source attribute-->
<div>
<p>source attribute:</p>
<img src=
"[Link]
</div>
<!--Alternative text: alt attribute -->
<div><img src=
"[Link]
alt="Alternative text here">
</div>
<br>
<!-- Link: href attribute-->
<a href="[Link]
Click to open in the same tab
</a>
<br>
<a href="[Link] target="_blank">
Click to open in a different tab
</a>
<!-- title attribute-->
<h2 title="GeeksforGeeks: A computer science
portal for geeks">
Title attribute: hover to see the effect
</h2>
<!-- Width and Height attribute-->
<p>Using width and height attribute here:</p>
<img src=
"[Link]
width="300px" height="100px">
<!-- id attribute-->
<h2 id="geeks">
Styling using id attribute here
</h2>
<!-- class attribute -->
<h2 class="gfg">
Styling using class attribute here
</h2>
<!-- style -->
<h2 style="font-family:Chaparral Pro Light; ">
Styling using style attribute here
</h2>
</body>
</html>
Link Tags
Link tags are used to define hyperlinks, which allow users to navigate between pages or sections within a webpage.
[Link] 10/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
Tag Description Syntax
<a> Defines a hyperlink (used for linking to other pages or sections). <a href="URL">Link Text</a>
<link> Defines the relationship between the document and an external resource (usually for stylesheets) <link rel="stylesheet" href="[Link]">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Link Tags Example</title>
<!-- Link to an external stylesheet -->
<link rel="stylesheet" href="[Link]">
<!-- Link to a favicon -->
<link rel="icon" href="[Link]" type="image/x-icon">
<!-- Preload an image for faster loading -->
<link rel="preload" href="[Link]" as="image">
</head>
<body>
<!-- Hyperlink using <a> -->
<a href="[Link] target="_blank">Visit [Link]</a>
<!-- Base tag to specify base URL for relative links -->
<base href="[Link]
<a href="[Link]">Go to Page</a> <!-- This will link to [Link] -->
<!-- Download link using <a> tag -->
<a href="[Link]" download="SampleFile">Download File</a>
</body>
</html>
HTML Events Tags
HTML events are used to execute code when certain actions or user interactions occur. These can be applied to most HTML tags.
Event Description Syntax
onclick Occurs when an element is clicked. <button onclick="alert('Clicked!')">Click Me</button>
onmouseover Occurs when the mouse pointer is moved over an element. <div onmouseover="changeColor()">Hover Me</div>
onchange Occurs when the value of an element changes. <input type="text" onchange="alert('Changed!')">
onload Occurs when a page or image has loaded. <img src="[Link]" onload="alert('Loaded!')">
onkeydown Occurs when a key is pressed down. <input type="text" onkeydown="checkKey()">
onfocus Occurs when an element gains focus. <input type="text" onfocus="[Link]='yellow'">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Event Example</title>
<script>
// Function to handle the click event
function showClickAlert() {
alert("You clicked the button!");
}
// Function to handle mouseover event
function changeBackgroundColor() {
[Link]("hoverDiv").[Link] = "lightblue";
}
// Function to handle onchange event
function showChangeAlert() {
alert("You changed the input value!");
}
// Function to handle onload event
function showImageAlert() {
alert("Image loaded successfully!");
}
// Function to handle onkeydown event
function showKeyPressMessage(event) {
alert("You pressed the " + [Link] + " key.");
}
// Function to handle onfocus event
function changeInputFocusColor() {
[Link]("inputField").[Link] = "yellow";
}
</script>
</head>
<body>
<h1>HTML Event Example</h1>
<!-- Click event -->
[Link] 11/13
7/7/25, 6:10 PM HTML Cheat Sheet - GeeksforGeeks
<button onclick="showClickAlert()">Click Me!</button>
<!-- Mouseover event -->
<div id="hoverDiv" onmouseover="changeBackgroundColor()" style="width: 200px; height: 100px; margin-top: 20px; text-align: center; line-height:
100px; background-color: lightgray;">
Hover over me!
</div>
<!-- Change event -->
<input type="text" onchange="showChangeAlert()" placeholder="Type something and change the value" style="margin-top: 20px;">
<!-- Onload event -->
<img src="[Link] onload="showImageAlert()" alt="Example Image" style="margin-top: 20px;">
<!-- Onkeydown event -->
<input type="text" onkeydown="showKeyPressMessage(event)" placeholder="Press a key" style="margin-top: 20px;">
<!-- Onfocus event -->
<input type="text" id="inputField" onfocus="changeInputFocusColor()" placeholder="Click to focus" style="margin-top: 20px;">
</body>
</html>
Benefits of Using HTML Cheat Sheet
An HTML Cheat Sheet is a handy tool that makes creating websites faster and easier, helps your site show up in search results, and lets you build web pages
that everyone can use and enjoy.
Here are some key benefits of HTML Cheat Sheet:
Efficient Web Development: An HTML Cheat Sheet provides a quick reference guide for web developers, enabling faster and more efficient coding. It
helps in reducing the time spent on searching for syntax or tags, thereby increasing productivity.
Comprehensive Tag Reference: The cheat sheet includes an extensive collection of HTML tags and attributes, covering everything from basic structure
tags to complex interactive elements. This makes it a valuable resource for both beginners and experienced developers.
Semantic Understanding: With the inclusion of semantic tags in the cheat sheet, developers can create more meaningful and accessible web content. It
aids in understanding the structure and content of web pages better.
Interoperability: HTML is the foundational language of the web. An HTML Cheat Sheet can be beneficial when working with other web technologies like
CSS, JavaScript, and various web development frameworks.
Optimized for SEO: A well-structured HTML document using the correct tags and attributes can significantly improve SEO. The cheat sheet can guide
developers in creating SEO-friendly markup.
Multimedia Integration: The cheat sheet covers tags for embedding multimedia elements like images, audio, and video into web pages, enabling richer
and more interactive web content.
Remember, using an HTML Cheat Sheet can greatly enhance your web development process, making it a must-have tool for every web developer.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by
following this HTML Tutorial and HTML Examples.
We have a similar cheat sheet to help you with CSS concepts as well. Check it out here CSS Cheat Sheet
Comment More info Campus Training Program Next Article
CSS Cheat Sheet - A Basic Guide to CSS
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
Advertise with us
Company Explore
About Us Job-A-Thon
Legal Offline Classroom Program
Privacy Policy DSA in JAVA/C++
Careers Master System Design
In Media Master CP
Contact Us Videos
Corporate Solution
Campus Training Program
Tutorials DSA
Python Data Structures
Java Algorithms
C++ DSA for Beginners
PHP Basic DSA Problems
GoLang DSA Roadmap
SQL DSA Interview Questions
[Link] 12/13
7/7/25, 6:15 PM HTML Interview Questions and Answers - GeeksforGeeks
Search...
HTML Tutorial HTML Exercises HTML Tags HTML Attributes Global Attributes Event Attributes HTML Interview Questions HTML DOM DOM Audio/Video HTML 5 HTML Examples Color Picker A to Z G
HTML Interview Questions and Answers
Last Updated : 02 Apr, 2025
HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced
professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts.
Below is a curated list of 50+ HTML interview questions and answers, structured to guide you from fundamental topics to more complex ones, ensuring a
comprehensive preparation.
Table of Content
Basic HTML Interview Questions For Freshers
HTML Intermediate Interview Questions
HTML Interview Questions For Experienced
Note: Before proceeding to learn HTML interview questions and answers, if you are completely new to the language, we recommend building a solid
foundation first by exploring our free HTML Tutorial.
Basic HTML Interview Questions For Freshers
1. What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create and design documents on the World Wide Web. HTML structures
web content and allows the inclusion of text, images, links, and other elements.
2. What are HTML tags?
HTML tags are the building blocks of HTML. They are used to create elements and structure content on a web page. Tags are enclosed in angle brackets, For
example, <p> for a paragraph. Most tags come in pairs: an opening tag <p> and a closing tag </p>.
To Learn HTML Tags More, you can refer to this article.
3. What is the basic structure of an HTML document?
An HTML document has a defined structure that includes the following elements:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element of the document.
<head>: Contains meta-information about the document, such as the title and links to stylesheets.
<title>: Specifies the title of the document, displayed in the browser's title bar.
<body>: Contains the content of the document, such as text, images, and other elements.
4. What is the difference between an element and a tag in HTML?
Tag: A tag is a part of HTML syntax used to define elements. Tags are enclosed in angle brackets, e.g., <div>.
Element: An element consists of a start tag, content, and an end tag. For example, <p>This is a paragraph.</p> is a paragraph element.
5. What are attributes in HTML?
Attributes provide additional information about HTML elements. They are included within the opening tag and usually come in name-value pairs, like
name="value".
For example, in <a href="[Link] href is an attribute specifying the URL of the link.
6. How do you create a hyperlink in HTML?
To create a hyperlink, use the <a> (anchor) tag with the href attribute specifying the URL:
<a href="[Link] Example</a>
This creates a clickable link labeled "Visit Example" that directs to [Link]
To know more about the topic refer to creating hyperlink in html.
7. What is the purpose of the <img> tag in HTML?
The <img> tag is used to embed images in an HTML document. It is a self-closing tag and requires the src attribute to specify the image source:
[Link] 1/8
7/7/25, 6:15 PM HTML Interview Questions and Answers - GeeksforGeeks
<img src="[Link]" alt="Description of image">
src: Specifies the path to the image file.
alt: Provides alternative text for the image, which is displayed if the image cannot be loaded.
To know more about the topic refer to img tag in html.
8. What is the difference between block-level and inline elements in HTML?
Block-level elements: These elements start on a new line and take up the full width available. Examples include <div>, <p>, and <h1> to <h6>.
Inline elements: These elements do not start on a new line and only take up as much width as necessary. Examples include <span>, <a>, and <img>.
9. How do you create a list in HTML?
HTML supports two types of lists:
Ordered List: Creates a numbered list using the <ol> tag.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Unordered List: Creates a bulleted list using the <ul> tag.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
10. What is the <form> tag used for in HTML?
The <form> tag is used to create an HTML form for user input. It can contain various form elements like text fields, checkboxes, radio buttons, and submit
buttons.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
11. What is the purpose of the <br> tag?
The <br> tag inserts a line break in the text, moving the content after the tag to a new line. It's an empty tag and doesn't require a closing tag.
12. How do you create a hyperlink that opens in a new tab?
To open a link in a new tab, use the target attribute with the value _blank:
<a href="[Link] target="_blank">Visit Example</a>
13. What is the <title> tag used for?
The <title> tag defines the title of the HTML document, which appears in the browser's title bar or tab. It's placed within the <head> section.
14. How do you add a comment in HTML?
Comments in HTML are added using the following syntax:
<!-- This is a comment -->
Comments are not displayed in the browser and are used to leave notes or explanations within the code.
15. What is the purpose of the <meta> tag?
The <meta> tag provides metadata about the HTML document, such as character set, author, description, and keywords. It's placed within the <head>
section.
16. How do you create a table in HTML?
A table is created using the <table> tag, with rows defined by <tr> and cells by <td>. Headers can be defined using <th>.
<table>
<tr>
<th>Header 1</th>
[Link] 2/8
7/7/25, 6:15 PM HTML Interview Questions and Answers - GeeksforGeeks
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
17. What is the difference between <head> and <body> tags?
<head>: Contains meta-information about the document, such as the title, character set, and links to stylesheets and scripts.
<body>: Contains the actual content of the document that is displayed in the browser, such as text, images, and links.
18. How do you specify the character encoding for an HTML document?
The character encoding is specified using a <meta> tag within the <head> section:
<meta charset="UTF-8">
19. What is the <strong> tag used for?
The <strong> tag is used to indicate that the text is of strong importance, typically displayed in bold by browsers.
20. How do you create an email link in HTML?
To create a link that opens the user's default email client with a new message, use the mailto: scheme:
<a href="[Link] Email</a>
21. What is the <em> tag used for?
The <em> tag is used to emphasize text, typically displayed in italics by browsers.
22. How do you create a checkbox in HTML?
A checkbox is created using the <input> tag with the type attribute set to checkbox:
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
23. What is the purpose of the <label> tag?
The <label> tag defines a label for an <input> element, improving accessibility and usability. Associating a <label> with an <input> can be done using the for
attribute, which matches the id of the <input>.
24. How do you create a dropdown list in HTML?
A dropdown list is created using the <select> tag, with each option defined by an <option> tag:
<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
25. What is the <blockquote> tag used for?
The <blockquote> tag is used to define a section that is quoted from another source, typically displayed with indentation by browsers.
HTML Intermediate Interview Questions
26. What are semantic HTML elements?
Semantic HTML elements clearly describe their meaning in a human- and machine-readable way. Examples include <article>, <section>, <header>, <footer>,
and <nav>. They improve the accessibility and SEO of web pages.
To know more about the topic refer to HTML Semantic tag.
27. How do you embed a video in HTML5?
HTML5 provides the <video> tag to embed videos:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
[Link] 3/8
7/7/25, 6:15 PM HTML Interview Questions and Answers - GeeksforGeeks
controls: Adds video controls like play, pause, and volume.
source: Specifies the video file and its format.
28. What is the purpose of the alt attribute in the <img> tag?
The alt attribute provides alternative text for an image, which is displayed if the image cannot be loaded. It also improves accessibility by describing the
image to screen readers.
29. What is the <fieldset> tag used for in HTML forms?
The <fieldset> tag is used to group related elements within a form, and the <legend> tag can provide a caption for the group:
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</fieldset>
30. What is the purpose of the <noscript> tag in HTML?
The <noscript> tag defines alternative content to be displayed if the user's browser does not support JavaScript or if JavaScript is disabled.
<noscript>
<p>JavaScript is not enabled in your browser.</p>
</noscript>
31. How do you include a JavaScript file in an HTML document?
Use the <script> tag with the src attribute to link an external JavaScript file:
<script src="[Link]"></script>
32. What is the difference between the <b> and <strong> tags?
Both tags display text in bold, but <strong> indicates that the text is of strong importance, providing semantic meaning, while <b> does not convey any extra
importance.
33. How do you create a multi-line text input in an HTML form?
Use the <textarea> tag to create a multi-line text input:
<textarea name="message" rows="4" cols="50"></textarea>
34. What is the purpose of the action attribute in an HTML form?
The action attribute specifies the URL to which the form data will be submitted when the form is submitted.
<form action="/submit-form" method="post">
<!-- form elements -->
</form>
35. How do you create a numbered list in HTML?
Use the <ol> (ordered list) tag, with each list item defined by <li>:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
36. What is the purpose of the <base> tag in HTML?
The <base> tag specifies the base URL for all relative URLs in a document. It must be included inside the <head> section.
<base href="[Link]
37. How do you create a definition list in HTML?
Use the <dl> tag for the list, <dt> for each term, and <dd> for each definition:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
[Link] 4/8
7/7/25, 6:15 PM HTML Interview Questions and Answers - GeeksforGeeks
<dd>Cascading Style Sheets</dd>
</dl>
38. What is the purpose of the enctype attribute in an HTML form?
The enctype attribute specifies how form data should be encoded when submitting it to the server. It's used with the method="post" attribute.
<form action="/upload" method="post" enctype="multipart/form-data">
<!-- form elements -->
</form>
39. How do you create a hidden input field in an HTML form?
Use <input type="hidden"> to create a hidden input field that stores data without displaying it to the user:
<input type="hidden" name="userID" value="12345">
40. What is the purpose of the <address> tag in HTML?
The <address> tag is used to define contact information for the author or owner of a document or article.
<address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
HTML Interview Questions For Experienced
41. What is the purpose of the <canvas> element in HTML5?
The <canvas> element provides a drawable region in the document that can be used to render graphics, such as charts, games, or other visual images, on the
fly via scripting (usually JavaScript).
<canvas id="myCanvas" width="200" height="100"></canvas>
42. What is the difference between <b> and <strong>, and between <i> and <em> tags?
The <b> and <i> tags are used for styling text to be bold and italic respectively, without conveying any extra importance or emphasis. In contrast, <strong>
and <em> not only style the text (bold and italic respectively) but also semantically indicate that the text is of greater importance (<strong>) or should be
emphasized (<em>). This semantic meaning can be beneficial for accessibility and SEO.
43. How can you include SVG graphics directly in an HTML document?
Scalable Vector Graphics (SVG) can be embedded directly within HTML using the <svg> tag. This allows for defining vector-based graphics that can scale
without loss of quality.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
44. What are data attributes in HTML, and how are they used?
Data attributes in HTML are custom attributes that start with data- and allow you to store extra information on HTML elements. They are often used to
embed custom data that can be accessed via JavaScript.
<div data-user-id="12345" data-role="admin">User Info</div>
In JavaScript, you can access these attributes using the dataset property:
const div = [Link]('div');
[Link]([Link]); // Outputs: 12345
[Link]([Link]); // Outputs: admin
45. Explain the purpose of the <template> tag in HTML.
The <template> tag is used to declare a fragment of HTML that is not to be rendered immediately when the page loads. Instead, it can be instantiated later
using JavaScript. This is useful for client-side templating.
<template id="my-template">
<div class="card">
<h2></h2>
<p></p>
[Link] 5/8
7/7/25, 6:15 PM HTML Interview Questions and Answers - GeeksforGeeks
</div>
</template>
JavaScript can then be used to clone and insert the template content into the document.
46. What is the purpose of the rel attribute in a <link> tag?
The rel attribute specifies the relationship between the current document and the linked resource. For example, rel="stylesheet" indicates that the linked file
is a CSS stylesheet.
<link rel="stylesheet" href="[Link]">
47. How do you specify multiple language versions of a webpage?
To provide multiple language versions of a webpage, you can use the hreflang attribute in the <link> tag to specify the language of an alternate version. This
helps search engines understand and serve the correct language version to users.
<link rel="alternate" href="[Link]" hreflang="fr">
<link rel="alternate" href="[Link]" hreflang="es">
48. What is the purpose of the <output> tag in HTML?
The <output> tag represents the result of a calculation or user action. It's typically used in conjunction with forms to display the outcome of user interactions.
<form oninput="[Link]=parseInt([Link])+parseInt([Link])">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0">
= <output name="result" for="a b">0</output>
</form>
49. How can you make an HTML element editable in the browser?
To make an HTML element editable directly in the browser, you can set the contenteditable attribute to true. This allows users to edit the content of the
element in place.
<div contenteditable="true">
This is an editable div. Click here to edit the text.
</div>
50. What is the purpose of the <datalist> tag in HTML?
The <datalist> tag is used to provide a list of predefined options to an <input> element, typically used to offer autocomplete suggestions.
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
When the user starts typing in the input field, the browser will display the options defined in the <datalist> that match the current input.
To Know More about the topic refer to datalist tag in html.
Conclusion
In conclusion, if you are preparing for jobs like a Web Designer that primarily require knowledge of HTML, then you're well-equipped with the interview
questions provided here. These questions cover essential aspects of HTML that will help you perform well in such roles.
However, if you're aiming for positions like a web developer or other more technical profiles that involve a deeper understanding of web technologies, it's a
good idea to also explore additional interview questions on CSS, JavaScript, and other relevant areas. Preparing for a broader range of topics will ensure
you're ready for a wider variety of roles in the tech industry.
[Link] 6/8
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) - Intermediate Level - GeeksforGeeks
Search...
HTML Tutorial HTML Exercises HTML Tags HTML Attributes Global Attributes Event Attributes HTML Interview Questions HTML DOM DOM Audio/Video HTML 5 HTML Examples Color Picker A to Z Guide
HTML Interview Questions and Answers (2024) - Intermediate Level
Last Updated : 15 Apr, 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 Answers
Pre-requisite: HTML Interview Questions and Answers (2024) Beginner Level
Similar Article: HTML Interview Questions and Answers (2024) – Advanced Level
The below contains the list of the top most common & frequently asked HTML & HTML 5 interview questions with their explanations.
1. Are <div> and <span> tags similar?
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.
3. What is the difference between classes and id?
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.
[Link] 1/7
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) - Intermediate Level - GeeksforGeeks
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.
4. How can we create a nested webpage in HTML?
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.
5. What are the tags that can be used inside the <head> tag?
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.
6. What are meta tags? How are they important?
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.
7. What is HTML Layout?
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.
[Link] 2/7
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) - Intermediate Level - GeeksforGeeks
8. What are semantic elements?
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.
9. What are HTML entities?
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.
10. How can we add symbols in HTML?
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 ℅
11. What is HTML Encoding?
A Uniform Resource Locator (URL) is simply the address of a website to access the website content like [Link]. 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.
12. What is the difference between the POST method and the GET method?
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.
13. What is HTML Canvas?
[Link] 3/7
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) - Intermediate Level - GeeksforGeeks
The HTML “canvas” element is used to draw graphics via [Link] “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.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="400"
height="200"
style="border:2px solid #000000;">
</canvas>
</body>
</html>
Output:
14. What is SVG?
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
16. How can we allow the browser to tell our location using HTML Geolocation API?
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 = [Link]
Displaying Location using HTML Geolocation: The following code is displaying the current location with the help of latitude and longitude via HTML
Geolocation.
<!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>
[Link] 4/7
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) - Intermediate Level - GeeksforGeeks
<p id="demo1"></p>
<script>
var variable1 = [Link]("demo1");
function getlocation() {
[Link](showLoc);
}
function showLoc(pos) {
[Link] = "Latitude: "
+ [Link]
+ "<br>Longitude: "
+ [Link];
}
</script>
</body>
</html>
Output:
17. What is HTML Web Storage API?
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
18. What are forms in HTML?
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:
<!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:
Comment More info Campus Training Program Next Article
HTML Interview Questions and Answers (2024) – Advanced Level
[Link] 5/7
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) – Advanced Level - GeeksforGeeks
Search...
HTML Tutorial HTML Exercises HTML Tags HTML Attributes Global Attributes Event Attributes HTML Interview Questions HTML DOM DOM Audio/Video HTML 5 HTML Examples Color Picker A to Z G
HTML Interview Questions and Answers (2024) – Advanced Level
Last Updated : 25 Oct, 2024
In this advanced HTML Interview Questions, we cover the most frequently asked interview questions of HTML. Here, you'll find detailed questions related
to advanced HTML topics and in-depth explanations to help you succeed.
If you're just starting out or are at an intermediate level, we have dedicated pages for Beginner and Intermediate HTML Interview Questions and
Answers.
HTML Interview Questions and Answers (2024) Beginner Level
HTML Interview Questions and Answers (2024) Intermediate Level
Advanced HTML Interview Questions [2024]
The below contains the list of the top 20 most common & frequently asked HTML & HTML 5 interview questions with their explanations.
1. What is an anchor tag in HTML?
The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This hyperlink is used to link the webpage to other web pages. It’s either
used to provide an absolute reference or a relative reference as its “href” value. Click Here to know more in detail.
Syntax:
<a href = "link"> Link Name </a>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>
Welcome to
<a href="[Link]
GeeksforGeeks
</a>
</h1>
<h2>This is anchor Tag</h2>
</body>
</html>
Output:
2. What are void elements?
The elements that only have start tags and do not contain any content within it, these elements are called Void Elements. It can only have attributes but
does not contain any kind of content.
Example of such elements are <br>, <hr>, <img>, <input>, <link>, <base>, <meta>, <param>, <area>, <embed>, <col>, <track>, <source> etc.
3. How to change an inline element into a block-level element?
We can accomplish this task by using the display propertyhaving its value as “block”, to change the element from inline to block-level element.
4. How Container tag is different from the Empty tag in HTML?
The Container tags are generally divided into three parts, i.e., the opening tag, content(which will display on the browser), and closing tag. In the content
part, they can also contain some other tags. These opening and closing tags are used in pairs. For instance, <html>….</html>, <head>…</head>, <title>…
</title>, <body>….</body>, etc.
Syntax:
<tag_name> …</tag_name>
The Empty Tags that do not contain any closing tags are known as empty tags. Empty tags contain only the opening tag but they perform some action in the
webpage. For eg: <br>, <link>, <img>, <hr>, <meta>, <source> etc.
Syntax:
<tag_name>
Please refer to the Is container tag same as the empty tag in HTML? If not, why? article for further detail.
[Link] 1/6
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) – Advanced Level - GeeksforGeeks
5. What tags are used to separate a section of text?
<br> tag: Usually <br> tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line.
<p> tag: The <p> tag contains the text in the form of a new paragraph.
<blockquote> tag: It is used to define a large quoted section.
6. In how many ways you can apply CSS to your HTML file?
There are 3 ways in which we can add CSS to our HTML file, they are given below:Please refer to the Types of CSS (Cascading Style Sheet) article for more
details.
Inline CSS: Inline CSS contains the CSS property in the body section attached with the element known as inline CSS. This kind of style is specified within
an HTML tag using the style attribute.
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS ruleset should be within the HTML file in
the head section i.e the CSS is embedded within the HTML file.
External CSS: External CSS contains a separate CSS file that contains only style property with the help of tag attributes (For example class, id, heading, …
etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using the link tag. This means that for
each element, style can be set only once and that will be applied across web pages.
7. How to include one CSS file in another?
It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file.
It can be done by using the @import keyword. Click here to know more in detail.
8. How can you apply JS in your HTML?
Scripts can be placed inside the body, the head section of an HTML page, inside both head and body, or can be added externally. Please refer to the Where to
put JavaScript in an HTML Document? article for more detail.
JavaScript in head: A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.
JavaScript in the body: A JavaScript function is placed inside the body section of an HTML page and the function is invoked when a button is clicked.
External JavaScript: JavaScript can also be used as external files. JavaScript files have file extension .js . To use an external script put the name of the
script file in the src attribute of a script tag. External scripts cannot contain script tags.
9. What are logical and physical tags in HTML?
Physical and Logical tags are used in HTML for better visibility and understanding of the text by the user on the web page. However, both tags differ from
each other as suggested by their names.
a) Logical Tag: This tag is used in HTML to display the text according to the logical styles. Following are the Logical tags commonly used in HTML.
<abbr>: It defines an abbreviation that is used to define the abbreviation or short form of an element.
<acronym>: It is used to define an acronym.
<address>: It defines an address element.
<cite>: It defines citation ie., used to define the title of a work.
<code>: It defines computer code text.
<blockquote>: It defines a long quotation.
<del>: It stands for delete and is used to mark a portion of text which has been deleted from the document.
<dfn>: It represents a definition element and is used to represent a defining instance in HTML.
<ins>: It is used to specify a block of inserted text.
<kbd>: It defines keyboard text.
<pre>: It defines preformatted text.
<q>: It defines a short quotation.
<samp>: It defines sample computer code.
<strong>: It defines strong text.
<var>: It defines a variable ie., used to specify the variable in a mathematical equation or in a computer program.
b) Physical Tag: This tag is used in HTML to provide actual physical formatting to the text. Following are the Physical tags commonly used in HTML. Please
refer to the Physical and Logical Tags in HTML article for further details.
<b>: It defines bold text.
<big>: It defines the big text.
<i>: It defines italic text.
<small>: It defines small text.
<sup>: It defines superscripted text.
<sub>: It defines subscripted text.
<tt>: It defines teletype text.
<u>: It is an Unarticulated Annotation ie., underline element, which is used to underline the text enclosed within the <u> tag. It is deprecated, use styles
instead.
10. What is MathML in HTML 5?
The MathML comes in HTML5 the current MathML version is 3 it was introduced in the year 2015. The MathML stands for Mathematics Markup Language. It
is used to represent the mathematical equation or expression in web browsers like other HTML elements. The 1st version of MathML was released in the
year of 1998 and after that, the 2nd version was released.
[Link] 2/6
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) – Advanced Level - GeeksforGeeks
Basically, MathML is a complex mathematical formula or equation visual representation made easy. The MathML is supported in the HTML5, all the MathML
tag must be used inside the <math> and </math> [Link] MathML is used to describe mathematics as a basis for the machine to machine communication, it
is intended to be handled by specialized authoring tools such as equation editors and it is meaningful to other applications also.
11. What is the difference between <html lang=”en’> and <html lang=”en-US’>?
The lang attribute specifies which language is used to write the content of a web page. It is used to set the language for the whole text of the web [Link]
difference between <html lang=”en’> and <html lang=”en-US’> is described below:<html lang=”en’>: The <html lang=”en’> only specifies the language
code of the page meaning en or English is used for all the text on the page.<html lang=”en-US’>: The <html lang=”en-US’> specifies the language code of
the page followed by the country code which means the US style of English language is used for all the text on the page.
<html lang=”en-GB’> which means the United Kingdom style of English
<html lang=”en-IN’> which means the Indian style of English
Please refer to the What is the difference between <html lang=”en’> and <html lang=”en-US’>? article for a detailed description.
12. How to create scrolling text or images on a webpage?
This task can be achieved through <marquee> tag in HTML that helps to create scrolling text or image on a webpage. It scrolls either from horizontally left to
right or right to left, or vertically from top to bottom or bottom to top.
Syntax: The marquee element comes in pairs. It means that the tag has an opening and closing elements.
<marquee>
<--- contents --->
</marquee>
13. What do you mean by manifest file in HTML5?
A manifest file is a text file that tells the browser to cache certain files or webpages so that they can be used even in offline mode. HTML5 cache webpages
by specifying manifest attribute in <html> tag. All the web pages that contain manifest attributes or are specified in the manifest file will be cached whenever
a user visits that page. Manifest files are saved with the .appcache extension. It always starts with the CACHE MANIFEST keyword and contains three
sections:
CACHE: This section lists all the resources including webpages, CSS stylesheets, JavaScript files, and images that will be cached immediately after their
first download.
NETWORK: This section lists all the resources that will never be cached. These resources can’t be used in offline mode and always require a connection to
the server.
FALLBACK: This section lists the fallback resources that will be used in case a page is not accessible. It specifies the primary resource that will be
replaced with the fallback resource specified next to it in case of server connection failure.
14. How to open a hyperlink in another window or tab in HTML?
There are several different ways to open a hyperlink in another window or tab such as using JavaScript, jQuery, or HTML. In order to open a hyperlink in
another window or tab, use the target attribute and provide it value _blank in the anchor tab. Click Here to know more in detail.
Syntax:
<element target="_blank|_self|_parent|_top|framename"\>
Attribute Values:
_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame.
_parent: It opens the linked document in the parent frameset.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame.
15. Explain Web Worker in HTML
Web workers are multithreaded object which is used to execute Javascripts in the background without affecting the performance of the application or
webpage. Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allow long
tasks to be executed without affecting the responsiveness of the web page. Generally, it is used for big CPU-intensive tasks.
Types of Web Workers:
Shared Web Workers: It can be shared by multiple scripts.
Dedicated Web Workers: A dedicated worker is only accessible by the script which has been called it.
16. Define multipart form data.
Multipart Form Data: The ENCTYPE attribute of the <form> tag specifies the method of encoding for the form data. It is one of the two ways of encoding the
HTML form. It is specifically used when file uploading is required in HTML form. It sends the form data to the server in multiple parts because of the large
size of the file.
Syntax:
<form action="[Link]" method="post"
enctype="multipart/form-data">
[Link] 3/6
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) – Advanced Level - GeeksforGeeks
</form>
17. How to add Scalable Vector Graphics to your web page?
SVG is a type of image format which is written in XML for vector-based graphics. Every element and every attribute in SVG files can be animated. There are
several ways to use SVG images in HTML, which are described below: Please refer to the How to add Scalable Vector Graphics to your web page? article for
a more detailed description.
SVG in a <img> tag: This is the basic & simple way to insert the SVG image to a webpage. For this method, we can simply use the <img> tag and then
specify the file path or image link in the src attribute. To use this method, we should have downloaded the SVG image file or SVG image link.
SVG in a <object> tag: The <object> tag can be used to insert the SVG images by specifying the URL of the resource that will be used by the object using
the data attribute.
SVG in a <embed> tag: The <embed> tag can be used to insert the SVG image by specifying the link in the src attribute. This tag is now deprecated and
removed support for browser plug-ins in most of the modern browsers.
SVG in a <image> tag: The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files.
18. What are the media element tags introduced by HTML5?
HTML5 introduced 5 most popular media element tags that are supported by the browsers, which are described below: Please refer to the What are the
media element tags introduced by HTML5? article for a more detailed description.
<audio>: It is an inline element that is used to embed sound files into a web page.
<video>: It is used to embed video files into a web page.
<source>: It is used to attach multimedia files like audio, video, and pictures.
<embed>: It is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.
<track>: It specifies text tracks for media components audio and video.
19. How to handle JavaScript Events in HTML?
An Event is an action or occurrence recognized by the software. It can be triggered by the user or the system. Mostly Events are used on buttons, hyperlinks,
hovers, page loading, etc. All this stuff gets into action(processed) with the help of event handlers.
Syntax: Handle event in HTML :
<element onclick="myScript">
Various HTML event attributes:Form Event
onblur:This event occurs when an object loses focus.
<element onblur="myScript">
onchange:This event occurs when the value of an element has been changed.
<element onchange="myScript">
onfocus: This event occurs when elements get focused.
<element onfocus="myScript">
Event:
onclick:This event occurs when the user clicks on an element.
<element onclick="myScript">
<element onmouseover="myScript">
Please refer to the How to Handle JavaScript Events in HTML? article for a more detailed description.
onmouseover:This event occurs when the user hovers the mouse pointer over an element.
20. What is the difference between Cellpadding and Cellspacing in HTML Table?
Cellpadding: Cellpadding specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the
content of the cell.
Syntax:
<table cellpadding="value" >.....</table>
where, value determines the padding
(space between the border of a table and its content)
Cellspacing: Cellspacing specifies the space between cells (i.e) it defines the whitespace between the edges of the adjacent cells.
Syntax:
<table cellspacing="value" >.....</table>
where, value determines the padding
(space between adjacent cells)
[Link] 4/6
7/7/25, 6:13 PM HTML Interview Questions and Answers (2024) – Advanced Level - GeeksforGeeks
Difference between cell padding and cell spacing:
Cellpadding Cellspacing
It specifies the space between the border of a table cell and its contents. It specifies the space between adjacent cells.
It is created by using HTML <table> tag but the type attribute is set to cell It is also created by using HTML <table> tag but the type attribute is set to cell
padding. spacing.
It is mainly meant for a single cell. Cellspacing can get subjected to more than one cell.
The default cell padding value is 1 Whereas, the default cell spacing value is 2
Cellpadding is widely used and considered to be an effective mean Cellspacing is less effective than Cellpadding.
Cellpadding is an attribute Cellspacing is also an attribute.
Please refer to the Difference between Cellpadding and Cellspacing article in detail.
Comment More info Campus Training Program Next Article
CSS Interview Questions and Answers
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
Advertise with us
Company Explore
About Us Job-A-Thon
Legal Offline Classroom Program
Privacy Policy DSA in JAVA/C++
Careers Master System Design
In Media Master CP
Contact Us Videos
Corporate Solution
Campus Training Program
Tutorials DSA
Python Data Structures
Java Algorithms
C++ DSA for Beginners
PHP Basic DSA Problems
GoLang DSA Roadmap
SQL DSA Interview Questions
R Language Competitive Programming
Android
Data Science & ML Web Technologies
Data Science With Python HTML
Machine Learning CSS
ML Maths JavaScript
Data Visualisation TypeScript
Pandas ReactJS
NumPy NextJS
NLP NodeJs
Deep Learning Bootstrap
Tailwind CSS
Python Tutorial Computer Science
Python Examples GATE CS Notes
Django Tutorial Operating Systems
Python Projects Computer Network
Python Tkinter Database Management System
Web Scraping Software Engineering
OpenCV Tutorial Digital Logic Design
Python Interview Question Engineering Maths
[Link] 5/6
You might also like
- HTML Basics: Structure & Elements GuideNo ratings yetHTML Basics: Structure & Elements Guide44 pages
- HTML5 Basics for Full Stack DevelopmentNo ratings yetHTML5 Basics for Full Stack Development104 pages
- Understanding Hypertext Markup LanguageNo ratings yetUnderstanding Hypertext Markup Language17 pages
- HTML Basics: Tags, Elements, and StylesNo ratings yetHTML Basics: Tags, Elements, and Styles26 pages
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure62 pages
- Universal Informatics Internship OverviewNo ratings yetUniversal Informatics Internship Overview23 pages
- Topic 3 - Introduction To HTML - Ibp NotesNo ratings yetTopic 3 - Introduction To HTML - Ibp Notes30 pages
- HTML Basics: Structure, Tags, and ExamplesNo ratings yetHTML Basics: Structure, Tags, and Examples56 pages
- Software Engineering Principles OverviewNo ratings yetSoftware Engineering Principles Overview25 pages
- Python Programming Basics for BeginnersNo ratings yetPython Programming Basics for Beginners14 pages
- Java Programming: File Handling & EventsNo ratings yetJava Programming: File Handling & Events21 pages
- Comprehensive Guide to Software TestingNo ratings yetComprehensive Guide to Software Testing32 pages
- Software Development Life Cycle OverviewNo ratings yetSoftware Development Life Cycle Overview27 pages
- C Programming From Problem Analysis To Program Design 5th Edition TestbankNo ratings yetC Programming From Problem Analysis To Program Design 5th Edition Testbank16 pages
- An Introduction To Vectorization With Intel Fortran Compiler 021712No ratings yetAn Introduction To Vectorization With Intel Fortran Compiler 0217126 pages
- Understanding Asynchronous Module DefinitionNo ratings yetUnderstanding Asynchronous Module Definition671 pages
- FinLogix: Intelligent Personal Finance SystemNo ratings yetFinLogix: Intelligent Personal Finance System25 pages