HTML Comments
••
•
HTML comments are used to add notes or explanations in the HTML code
that are not displayed by the browser.
• They are useful for documenting the code, making it easier to
understand and maintain.
• To add a comment, use the syntax <!-- your comment here -->.
<!-- This is a comment and will not be displayed on the webpage -->
<p>This is visible text.</p>
In this example:
• The text within the <!-- and --> tags will not appear on the
webpage.
• These comments can include reminders, warnings, or explanations
about the code, which can be useful for anyone reading or editing
the HTML document.
Different Ways to Add Comments in HTML
There are two main ways to write comments in HTML: single-line and multi-
line comments. Both use the same basic syntax but differ in how they are
implemented
Comment Descriptions Syntax
Single- The single-line comment is given inside the ( <!- <!-
line - comment --> ) tag. - comment -->
<!-- Multi
It follows the syntax of a single-line comment by adding
Multi-line Line
multiple lines in the comment.
Comment -->
Note: The shortcut for adding the comment through the keyboard is by
typing Ctrl + / in Windows, and Command + / for Mac users.
More Examples of HTML Comments
Single-Line and Inline Comments
<html>
<body>
<!--This is heading Tag-->
<h1>can college</h1>
<!--This is single line comment-->
<h2>This is <!--given for--> single line comment</h2>
</body>
</html>
In this example:
• The code uses HTML comments (<!-- comment -->) to add notes for
developers, which are not displayed on the webpage.
• The <h1> and <h2> tags display headings, while inline comments in
<h2> do not affect the visible text.
Multi-Line Comments and Hidden Code Sections
<html>
<body>
<!-- This is
heading tag -->
<h1>can college</h1>
<!-- This is
multi-line
comment -->
<h2>This is multi-line comment</h2>
<!-- <button style="font-family: Sans-serif;">
Click Me
</button> -->
</body>
</html>
In this example:
• The code includes HTML comments (<!-- comment -->) that are
not displayed by browsers but serve as notes for developers.
• The <h1> and <h2> tags define headings, with comments
explaining their purpose; the commented-out <button> element is
not rendered on the page.
Uses of HTML Comments
• Code Organization: Comments can help break up sections of code,
making it easier to navigate, especially in larger projects.
• Collaboration: When working with others, comments are crucial for
explaining why certain HTML elements are used, or for leaving
instructions for team members.
• Debugging: Temporarily disabling parts of HTML code by
commenting them out is a common use, allowing developers to
isolate issues.
• Documentation: Providing details or documentation within the code
for future reference without the need for external documentation.
HTML Quotations
••
•
HTML quotation elements are used to display quoted text on a web page,
differentiating it from regular content. These elements help structure
citations and quotations effectively within the document.
Tag Description
Represents an abbreviation or acronym, typically with a title
<abbr>
attribute to explain its full form.
<address> Specifies contact information for the author or owner of the document,
such as an email or address.
Defines the text direction, either left-to-right (LTR) or right-to-left
<bdo>
(RTL), using the dir attribute.
<blockquote> Marks a block of text that is a quotation from another source, often
indented for emphasis.
<cite> Refers to the title of a work, such as a book, article, or published
document.
<q> Used to define a short inline quotation, usually enclosed in quotation
marks.
HTML Quotations Examples
Example 1: Using <bdo>, <abbr>, and <address> Tags
This example demonstrates how to use the <bdo> tag to change text
direction, the <abbr> tag to define an abbreviation, and the <address> tag to
display contact information.
↔
<body>
<!-- Inside <bdo> tag -->
<p>
<bdo dir="rtl">The quick brown fox jumps over the lazy dog</bdo>
</p>
<p>
Welcome to
<abbr title="GeeksforGeeks">GfG</abbr>
</p>
<address>
<p>
Address:<br />
710-B, Advant Navis Business
Park,<br />
Sector-142, Noida Uttar Pradesh – 201305
</p>
</address>
↔
In this code:
• The <bdo dir="rtl"> tag reverses the text direction to right-to-left.
• The <abbr title="GeeksforGeeks"> tag defines an abbreviation with
a full explanation on hover.
• The <address> tag displays contact details in a structured manner.
Example 2: Using <blockquote>, <q>, and <cite> Tags
This example showcases how to use the <blockquote> tag for block-level
quotes, the <q> tag for inline quotes, and the <cite> tag to reference the
source of a quote.
↔
<body>
<!-- Inside blockquotes -->
<blockquote>
<p>The quick brown fox jumps over the lazy dog</p>
</blockquote>
<!-- Inside quotes -->
<q>The quick brown fox jumps over the lazy dog</q>
<!-- Cite with title -->
<p>
The <cite>GeeksforGeeks</cite> is the best site to<br>
search for articles and practice problems.
</p>
</body>
↔
In this code:
• The <blockquote> tag wraps a long quoted passage, typically used
for block-level quotations.
• The <q> tag wraps a short, inline quote, automatically adding
quotation marks.
• The <cite> tag is used to reference the source or title of the work
being quoted
HTML Links Hyperlinks
••
•
HTML 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 href, title, and target,
among others.
Basic Syntax of an HTML Link:
<a href="https://www.example.com///">Visit Example</a>
Note: A hyperlink can be represented by an image or any other
HTML element, not just text.
A Simple HTML Link Example
In this example, we contains a paragraph instructing users to click
on the link labeled "GeeksforGeeks," which directs to the website
"https://www.geeksforgeeks.org//////".
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="https://www.geeksforgeeks.org//////">
GeeksforGeeks
</a>
</body>
</html>
Output:
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
HTML Links - Target Attribute
The target attribute in the <a> tag specifies where to open the
linked document. It controls whether the link opens in the same
window, a new window, or a specific frame.
Attribute Description
_blank Opens the linked document in a new window or tab.
Opens the linked document in the same frame or window as the link.
_self
(Default behavior)
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
Attribute Description
Opens the linked document in a specified frame. The frame’s name is
framename
specified in the attribute.
Example: In this example we demonstrates the use of target
attributes in links. Each link opens in a different context: _blank
opens in a new window or tab, _self in the same frame, _parent in
the parent frame, _top in the full window body, and framename in a
specified frame.
<!DOCTYPE html>
<html>
<head>
<title>Target Attribute Example</title>
</head>
<body>
<h3>
Various options available in the
Target Attribute
</h3>
<p>
If you set the target attribute to
"_blank", the link will open in a new
browser window or tab.
</p>
<a href="https://www.geeksforgeeks.org//////"
target="_blank">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_self", the link will open in the
same window or tab.
</p>
<a href="https://www.geeksforgeeks.org//////"
target="_self">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_top", the link will open in the full
body of the window.
</p>
<a href="https://www.geeksforgeeks.org//////"
target="_top">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_parent", the link will open in the
parent frame.
</p>
<a href="https://www.geeksforgeeks.org//////"
target="_parent">
GeeksforGeeks
</a>
</body>
</html>
Output
Linking Different HTML Elements
Below are examples of how to link different HTML elements with
their respective code snippets
Element to
Interlink Specific Code
Linking to an <a href="image.jpg"><img src="image.jpg"
image alt="Image"></a>
Element to
Interlink Specific Code
Link to an Email
<a href="mailto:[email protected]">Send Email</a>
Address
Phone Number <a href="tel:+1234567890">Call Now</a>
<a href="https://www.example.com///"> <button>Visit
Button Example</button> </a>
Link to
<a href="file.pdf" download>Download File</a>
Download File
<a href="https://www.example.com///" title="Visit
Link Title Example">Link Text</a>
HTML Images
••
•
The 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 address (URL) to access an
internet file.
• By providing the file path relative to the location of the
current web page file.
Basic Example of the <img> Tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-
300x300.png"
alt="GFG image" />
</body>
</html>
In this example:
• The <img> tag is used to embed an image into the
webpage.
• src attribute: Specifies the source URL of the image,
which in this example is
https://media.geeksforgeeks.org/wp-
content/uploads/20210915115837/gfg3-300x300.png.
The image is loaded from this URL when the webpage is
accessed.
• alt attribute: Provides alternative text for the image, "GFG
image," which describes the image content. If, for any
reason, the image cannot be displayed, the text "GFG
image" will be shown instead.
Various HTML <img> Tag Attributes
Attribute Description
src Specifies the path to the image file.
Attribute Description
Provides alternate text for the image, useful for accessibility and
alt
when the image cannot be displayed.
Allows importing images from third-party sites with cross-origin
crossorigin
access, typically used with canvas.
height Specifies the height of the image.
width Specifies the width of the image.
ismap Specifies an image as a server-side image map.
Specifies whether the browser should defer image loading or load it
loading
immediately.
longdesc Specifies a URL to a detailed description of the image.
referrerpolicy Specifies which referrer information to use when fetching the image.
sizes Specifies image sizes for different page layouts.
Specifies a list of image files to use in different situations, allowing
srcset
for responsive images.
usemap Specifies an image as a client-side image map.
Table of Content
• HTML Image tag - alt Attribute
• Set Image Size - Width and Height Attribute
• Adding Titles to an Image
• Setting Style of an Image
• Set Image Alignment
• Adding Image as a Link
• Adding Animated Image
HTML Image tag - alt Attribute
The alt attribute in <img> tag provides a text alternative if the
image fails to load. It aids accessibility for users unable to view
images due to slow internet, src errors, or screen reader usage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/201907101022/download3.png"
alt="This is GeeksforGeeks logo" />
</body>
</html>
Set Image Size - Width and Height Attribute
The width and height attributes are used to specify the width and
height of an image. The attribute values are specified in pixels by
default. The width and height attributes are always declared in
pixels. Please refer to the How to set the width and height of an
image using HTML? article for further details.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
width="300"
height="300" />
</body>
</html>
Adding Titles to an Image
The title attribute is displayed as a tooltip when a user hovers over
the image. To add a title to an image, include the title attribute in
the <img> tag, providing descriptive text for enhanced user
interaction.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
width="200"
height="200"
title="Logo of GeeksforGeeks" />
</body>
</html>
Please refer to the HTML title Attribute article for further details.
Setting Style of an Image
In this example, we are using the border property to decorate the
image.By default, every picture has a border around it. By using the
border attribute, the thickness of the border can be changed. A
thickness of "0" means that there will be no border around the
picture. Please refer to the HTML <img> border Attribute for
further details.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
width="200"
height="200"
border="5" />
</body>
</html>
Set Image Alignment
Aligning an image in HTML involves using the align attribute within
the <img> tag to position it horizontally. Options include left, right,
or center, enhancing page layout and visual appeal. Please refer to
the HTML <img> align Attribute for further details.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img
src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
align="right" />
</body>
</html>
Adding Image as a Link
To add an image as a link, enclose the <img> tag within an <a> tag,
setting the image's source with the href attribute. This creates a
clickable image linking to external content, such as images, videos,
or other web pages.
File paths are of two types:
• Absolute File Paths: It always contains the root element
along with the complete directory list required to locate
the file.
• Relative File Paths: It is the hierarchical path
representation that locates the file or folder on a file
system beginning from the current directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<a href="https://www.geeksforgeeks.org/">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo" />
</a>
</body>
</html>
Adding Animated Image
To add an animated image in HTML, use the <img> tag with the src
attribute pointing to a GIF file, providing engaging motion to
enhance webpage content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src="smiley.gif"
alt="smiley"
style="width: 200px; height: 200px" />
</body>
</html>
Common Image Format
Here is the commonly used image file format that is supported by
all the browsers.
S.No. Abbreviation File Type Extension
1. PNG Portable Network Graphics. .png
Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,
2. JPEG. image. .pjp
3. SVG Scalable Vector Graphics. .svg.
4. GIF Graphics Interchange Format. .gif
S.No. Abbreviation File Type Extension
5. ICO Microsoft Icon. .ico, .cur
Animated Portable Network
6. APNG .apng
Graphics.
Tips for Using HTML Images Effectively
• Optimize Image Sizes: Large images can slow down page
loading times. Always optimize images for the web by
compressing them and using appropriate file formats
(JPEG for photos, PNG for graphics with fewer than 16
colors, and SVG for vector images).
• Use Descriptive Alt Text: The alt attribute should clearly
describe the image's content and purpose. This improves
accessibility for screen reader users and acts as anchor
text for a text-only browser.
• Responsive Images: Use the srcset attribute to specify
different images for different screen sizes and resolutions,
helping ensure that your site is mobile-friendly.
• Aspect Ratios: Maintain the natural aspect ratio of images
unless specific design criteria require otherwise. Distorting
images can result in poor visual aesthetics.
• Legal Considerations: Only use images that you have
created, purchased, or have the right to use. Copyright
infringement can lead to legal issues and fines.
