Scribd
Upload
7 views51 pages

HTML Unit 3

This document provides an overview of lists in HTML, detailing the three types: unordered lists, ordered lists, and description lists. It explains the use of the <li> tag for list items, along with various attributes and examples for ordered lists, including numbering styles and nested lists. Additionally, it introduces the deprecated <marquee> tag for creating scrolling effects in web pages.

Uploaded by

hemamalinibaskar1412
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views51 pages

HTML Unit 3

This document provides an overview of lists in HTML, detailing the three types: unordered lists, ordered lists, and description lists. It explains the use of the <li> tag for list items, along with various attributes and examples for ordered lists, including numbering styles and nested lists. Additionally, it introduces the deprecated <marquee> tag for creating scrolling effects in web pages.

Uploaded by

hemamalinibaskar1412
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

UNIT – 3

LISTS:
Lists are used to store data or information in web pages in ordered or
unordered form. HTML supports several types of list elements that can
be included in the <BODY>tag of the document. These elements may
also be nested, i.e., the onset of elements can be embedded within
another. There are three types of lists available in HTML:

• Unordered List
• Ordered List
• Description list

Now before moving to the list first of all, we understand what is a list
item tag.

List Item tag

List item tag is used to define each item of a list. Once we define list
items with the <li> tag, the list appears in Web browsers in the bulleted
form (by default). It is used inside both ordered and unordered lists.

Syntax:
<li> content </li>

Attribute of item tag:


value: The value attribute of the<li> tag is used to specify the value of
the first item. The value must be a number and this can be used in the
case of an ordered list only. The subsequent list items will increment
the value from the number.
Syntax:
<li value = number>

Example
<html >
<head>
<title>inline style attribute</title>
</head>
<body>
<li>sachin</li>
<li>sujay</li>
<li>Amraditya</li>
<li>shivam</li>
<li>Parth</li>
</body>
</html>

Output:

Ordered list

An ordered list defines a list of items in which the order of the items are
matters. An ordered list is also called a number list. The ordering is
given by a numbering scheme, using Arabic numbers, letters, Roman
numerals. Or in other words, ordered list tag is used to create an
ordered list.
Different ways to number the ordered lists using the type attribute:

• type=”1″- The list items will be numbered with numbers


(default)
• type=”A”- The list items will be numbered with uppercase
letters
• type=”a”- The list items will be numbered with lowercase
letters
• type=”I”- List items will be numbered with uppercase Roman
numbers
• type=”i”- The list items will be numbered with lowercase
Roman numbers
Syntax:
<ol> content </ol>

Attributes of an ordered list:


1. reversed: This attribute is used to specify that the order of the list
should be reversed.
Syntax:
<ol reversed>

2. start: This attribute is used to specify the start value of the list.
Syntax:
<ol start = “number”>

3. type: This attribute is used to specify the type of list item maker. The
value of this attribute is decimal(Default)/lower-roman/upper
roman/lower-alpha/upper alpha
Syntax:
<ol type = “1|b|A|i|I”>
HTML Ordered Lists
HTML Ordered List is created by the HTML <ol> tag, to display
elements in an ordered form, either numerical or alphabetical. Each
item within the list is placed within a <li> tag, which stands for “list
item”.
The list is automatically numbered by the browser, but the style of
numbering can be adjusted using attributes and CSS.
Syntax:
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Example – Creating a Basic Ordered List
<!DOCTYPE html>

<html>

<head>

<title>Simple Ordered List</title>

</head>

<body>

<h2>My To-Do List</h2>

<ol>

<li>Go grocery shopping</li>

<li>Pay utility bills</li>

<li>Prepare dinner</li>

</ol>
</body>

</html>

OUTPUT:

My To-Do List

1. Go grocery shopping
2. Pay utility bills
3. Prepare dinner

HTML Ordered Lists – Type Attribute


The type attribute of <ol> tag specifies the order we want to create.

Type Descriptions

This will list the items with numbers


type=”1″
(default)

This will list the items in uppercase


type=”A”
letters.

This will list the items in lowercase


type=”a”
letters.

This will list the items with uppercase


type=”I”
Roman numbers.
Type Descriptions

This will list the items with lowercase


type=”i”
Roman numbers.

1. Number – Ordered List


To create an ordered list in HTML with numerical markers, which is the
default behavior for ordered lists, you simply use the <ol> (ordered list)
tag without specifying a type attribute.
Example:
<!DOCTYPE html>

<html>

<head>

<title>Numbered List Example</title>

</head>

<body>

<h2>Ordered List with Numbers</h2>

<ol>

<li>JavaScript</li>

<li>Python</li>

<li>Java</li>

<li>C++</li>

<li>C#</li>

</ol>

</body>

</html>
OUTPUT:

Ordered List with Numbers

1. JavaScript
2. Python
3. Java
4. C++
5. C#

2. Uppercase Letters – Ordered List


To create an ordered list in HTML that uses uppercase letters for the
list markers, you can use the type attribute on the <ol> tag and set it
to "A".
Example:
<!DOCTYPE html>

<html>

<head>

<title>

Uppercase Letters Ordered List

</title>

</head>

<body>

<h2>Uppercase Letters Ordered List</h2>

<ol type="A">

<li>Apple</li>

<li>Banana</li>

<li>Cherry</li>
<li>Date</li>

</ol>

</body>

</html>

OUTPUT:

Uppercase Letters Ordered List

A. Apple
B. Banana
C. Cherry
D. Date

3. Lowercase Letters – Ordered List


To create an ordered list in HTML that uses lowercase letters for the list
markers, you can use the type attribute on the <ol> tag and set it to "a".
Example:
<!DOCTYPE html>

<html>

<head>

<title>

Lowercase Letters Ordered List

</title>

</head>

<body>

<h2>Lowercase Letters Ordered List</h2>

<ol type="a">

<li>RCB</li>
<li>CSK</li>

<li>DC</li>

<li>MI</li>

</ol>

</body>

</html>

OUTPUT:

Lowercase Letters Ordered List

a. RCB
b. CSK
c. DC
d. MI

4. Uppercase Roman Numbers – Ordered List


To create an ordered list in HTML with uppercase Roman numerals as
the markers, you can use the type attribute on the <ol> tag and set it to
“I”.
Example:
<!DOCTYPE html>

<html>

<head>

<title>

Uppercase Roman Numbers Ordered List

</title>

</head>

<body>
<h2>

Uppercase Roman Numbers Ordered List

</h2>

<ol type="I">

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ol>

</body>

</html>

OUTPUT:

Uppercase Roman Numbers Ordered List

I. First item
II. Second item
III. Third item
IV. Fourth item

5. Lowercase Roman Numbers – Ordered List


To create an ordered list in HTML with lowercase Roman numerals as
the markers, you can use the type attribute on the <ol> tag and set it to
“i”.
Example:
<!DOCTYPE html>

<html>

<head>
<title>

Lowercase Roman Numbers Ordered List

</title>

</head>

<body>

<h2>

Lowercase Roman Numbers Ordered List

</h2>

<ol type="i">

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ol>

</body>

</html>

OUTPUT:

Lowercase Roman Numbers Ordered List

i. First item
ii. Second item
iii. Third item
iv. Fourth item
Reverse Ordered List in HTML
To create a reverse-ordered list in HTML, you can use the
‘reversed' attribute in the <ol> tag. This will make the list count down
from the highest number.
Example:
<!DOCTYPE html>

<html>

<head>

<title>Reverse Ordered List</title>

</head>

<body>

<h1>Top 5 Movies to Watch</h1>

<ol reversed>

<li>The Shawshank Redemption</li>

<li>The Godfather</li>

<li>Inception</li>

<li>Interstellar</li>

<li>Pulp Fiction</li>

</ol>

</body>

</html>

OUTPUT:

Top 5 Movies to Watch

1. The Shawshank Redemption


2. The Godfather
3. Inception
4. Interstellar
5. Pulp Fiction

Control List Counting


To control list counting, use the ‘start’ attribute in the <ol> tag to set the
starting number for the ordered list.
Example: In this example we showcase an ordered list starting from the
number 5, controlled by the “start” attribute within the <ol> tag,
customizing list counting

<!DOCTYPE html>

<html>

<head>

<title>Control List Counting</title>

</head>

<body>

<h2>Control List Counting</h2>

<ol start="5">

<li>Item 5</li>

<li>Item 6</li>

<li>Item 7</li>

<li>Item 8</li>

</ol>

</body>
</html>

OUTPUT:

Control List Counting

5. Item 5
6. Item 6
7. Item 7
8. Item 8

Nested Ordered Lists


Nested ordered lists use <ol> inside <li> tags to create sublists,
making content more organized.
Example: In this example we are creating nested ordered list, listing
programming languages with their respective frameworks as subitems
<!DOCTYPE html>

<html>

<head>

<title>Nested Ordered List</title>

</head>

<body>

<h2>Nested Ordered List</h2>

<ol>

<li>

JavaScript

<ol>

<li>React</li>

<li>Angular</li>
<li>Vue.js</li>

</ol>

</li>

<li>

Python

<ol>

<li>Django</li>

<li>Flask</li>

<li>Pyramid</li>

</ol>

</li>

</ol>

</body>

</html>

OUTPUT:

Nested Ordered List

1. JavaScript
1. React
2. Angular
3. Vue.js
2. Python
1. Django
2. Flask
3. Pyramid
HTML Unordered Lists
An HTML Unordered List is defined with the <ul> tag, where “ul”
stands for “unordered list.” Each item within the list is marked by a <li>
tag, standing for “list item.”
The items in an unordered list are typically displayed with bullet points,
which can be styled or changed using CSS.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
HTML Unordered Lists Examples
Below are some examples showing the use of HTML Unordered lists.
Example
<!DOCTYPE html>
<html>
<head>
<title>
HTML Unordered Lists
</title>
</head>
<body>
<h2>HTML Unordered Lists</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>

OUTPUT:

Unordered Lists Style Types

Values Descriptions

This value sets the list marker to


disc
a bullet (default).

This value sets the list marker to


circle
a circle.

This value sets the list marker to


square
a square.

This value unmarks the list of


none
items.

Example: Implementation of list style type to square in unordered


lists.
<!DOCTYPE html>
<html>
<head>
<title>
Square type unordered list
</title>
</head>
<body>
<h2>Square type unordered list</h2>
<ul style="list-style-type: square">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>

Output:

Example: Implementation of list style type to a circle.

<!DOCTYPE html>
<html>
<head>
<title>
Circle type unordered list
</title>
</head>
<body>
<h2> Circle type unordered list</h2>
<ul style="list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>

Output:

Example: Implementation of list style type to none in unordered lists.

<!DOCTYPE html>
<html>
<head>
<title>
None type unordered list
</title>
</head>
<body>
<h2>None type unordered list</h2>
<ul style="list-style-type:none;">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>

Output:

Nested Unordered List


An Unordered List can be nested, i.e., the list can be defined inside of
another list.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Nested unordered list</title>
</head>
<body>
<h2>Nested unordered list</h2>
<ul>
<li>Geeks</li>
<li>
Web Development
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Javascript</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>

Output:
Horizontal Unordered List
An Unordered list can also be aligned in the Horizontal manner, which
acts similar to the Nav bar.
Example: Implementation of Unordered List horizontally.
<!DOCTYPE html>
<html>
<head>
<title>HTML Horizontal Unordered List</title>
<style>
body {
text-align: center;
}
ul {
overflow: hidden;
background-color: #1d6b0d;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
color: white;
padding: 0.5rem;
}
</style>
</head>
<body>
<h3>HTML Horizontal Unordered List</h3>
<ul>
<li><a href="#course">Course</a></li>
<li><a href="#Blog">Blogs</a></li>
<li>
<a href="#Content">Content</a>
</li>
</ul>
</body>
</html>

OUTPUT:

Use Cases of Unordered Lists


Unordered lists are incredibly versatile. Here are some common use
cases:
• Navigation Menus: Many web designers use unordered lists
to structure horizontal and vertical navigation menus.
• Product Features: Highlighting product features in bullet
points for easy scanning.
• Content Breakdown: Breaking down complex content into
bullet points to improve comprehension.

HTML <marquee> Tag


The <marquee> tag in HTML creates a scrolling text or image effect
within a webpage. It allows content to move horizontally or vertically
across the screen, providing a simple way to add dynamic movement to
elements. Although this tag is deprecated in HTML5, it is still useful to
understand its functionality for legacy projects.
Note: This tag is deprecated from HTML5
What is the HTML <marquee> Tag?
The <marquee> tag is used to create a scrolling effect for text or
images. This tag can make content move left, right, up, or down, adding
an interactive element to your web page.
Syntax and Attributes
Basic Syntax
<marquee>
<!-- contents -->
</marquee>
Attributes of <marquee>

Attributes Values Description

Define the background


bgcolor Color Name
color of the marquee.

Define the direction of


direction Top, Down, Left, Right
scrolling the content

Specifies how many


times content moves.
loop Number
The default value is
infinite.

Define the height of


height px or %
marquee
Attributes Values Description

Define the width of


width px or %
marquee

Specify horizontal space


hspace px
around marquee

Specify vertical space


vspace px
around marquee

Methods for <marquee>

Method Description

Starts the scrolling of the <marquee>


start()
tag.

Stops the scrolling of the <marquee>


stop()
tag.

Event Handlers

Event Handler Description

Triggered when a scrolling <marquee>


onbounce reaches the end (exclusive to
‘alternate’ behavior).
Event Handler Description

Activates when the <marquee>


onfinish completes the scrolling loops specified
by the ‘loop’ attribute.

Fired at the initiation of scrolling for the


onstart
HTML <marquee> tag.

Examples of HTML <marquee> Tag


Example 1: Right to Left Scrolling
In this example, we will see the implementation of the <marquee> tag
with right-to-left scrolling.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align: center;
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<marquee class="marq" bgcolor="Green"
direction="left" loop="">
<div class="geek1">
GeeksforGeeks
</div>
<div class="geek2">
A computer science portal for geeks
</div>
</marquee>
</div>
</body>
</html>
OUTPUT:

Example 2: Bottom to Top Scrolling


This example demonstrates the <marquee> tag with bottom-to-top
scrolling.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align: center;
font-family: "Times New Roman";
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
text-align: center;
}
.geek2 {
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<marquee class="marq" bgcolor="Green"
direction="up" loop="">
<div class="geek1">
GeeksforGeeks
</div>
<div class="geek2">
A computer science portal for geeks
</div>
</marquee>
</div>
</body>
</html>
Output:
Example 3: Up to Bottom Scrolling
In this example, we will see implementation of above tag from up to
bottom.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align: center;
font-family: "Times New Roman";
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
text-align: center;
}
.geek2 {
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<marquee class="marq" bgcolor="Green"
direction="down" loop="">
<div class="geek1">
GeeksforGeeks
</div>
<div class="geek2">
A computer science portal for geeks
</div>
</marquee>
</div>
</body>
</html>
Output:

HTML hr Tag
The <hr> tag in HTML is used to create a horizontal rule or line that
visually separates content. It is a self-closing tag and does not require
an end tag. It also supports the Global Attributes and Event Attributes.
<!DOCTYPE html>
<html>
<body>
<p>
There is a horizontal rule
below this paragraph.
</p>
<hr>
<p>
This is a horizontal rule
above this paragraph.
</p>
</body>
</html>

OUTPUT:

There is a horizontal rule below this paragraph.

This is a horizontal rule above this paragraph.

Attributes
The table below shows a few attributes that allow customization:

Attribute Values Value Description

Used to specify the


align left center right alignment of the
horizontal rule.

Used to specify the bar


noshade noshade
without shading effect.

Used to specify the


size pixels height of the horizontal
rule.
Attribute Values Value Description

Used to specify the width


width pixels
of the horizontal rule.

<!DOCTYPE html>
<html>
<body>
<p>
Normal horizontal line.
</p>
<hr>
<p>
Horizontal line with height
of 30 pixels
</p>
<hr size="30">
<p>
Horizontal line with height
of 30 pixels and noshade.
</p>
<hr size="30" noshade>
</body>

</html>

OUTPUT:

Normal horizontal line.


Horizontal line with height of 30 pixels

Horizontal line with height of 30 pixels and noshade.

HTML br Tag
The <br> tag in HTML is used to create a line break in the text, causing
the content that follows it to appear on a new line. It is a self-closing tag,
meaning it does not need a separate closing tag.

<!DOCTYPE html>

<html

<body>

<p>Dear Reader, <br>This is printed after a line break.</p>

</body>

</html>

OUTPUT:

Dear Reader,
This is printed after a line break.

Adding Line Breaks in Structured Content

<!DOCTYPE html>

<html>

<body>
<p>

Hello, welcome to GeeksforGeeks<br>

We hope you enjoy browsing.<br>

Feel free to reach out with any questions.<br>

Have a great day!

</p>

</body>

</html>

OUTPUT:

Hello, welcome to GeeksforGeeks


We hope you enjoy browsing.
Feel free to reach out with any questions.
Have a great day!

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>
<body>

<img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-
300x300.png"

alt="GFG image" />

</body>

</html>

OUTPUT:

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-300×300.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.

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


loading
load it immediately.

longdesc Specifies a URL to a detailed description of the image.

Specifies which referrer information to use when fetching the


referrerpolicy
image.

sizes Specifies image sizes for different page layouts.

Specifies a list of image files to use in different situations,


srcset
allowing for responsive images.
Attribute Description

usemap Specifies an image as a client-side image map.

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.
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.
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>

<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>

OUTPUT:

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.

<!DOCTYPE html>

<html>

<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>

OUTPUT:

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.

<!DOCTYPE html>

<html>

<body>

<img

src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"

alt="GeeksforGeeks logo"

align="right" />

</body>

</html>
OUTPUT:

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>

<body>

<a href="https://ide.geeksforgeeks.org/tryit.php">

<img src=

"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo" />

</a>

</body>

</html>

OUTPUT:

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 .jpg, .jpeg, .jfif,


2. JPEG.
Group image. .pjpeg, .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.

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


_self
link. (Default behavior)

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

Opens the linked document in a specified frame. The frame’s


framename
name is specified in the attribute.

Example: In this example we demonstrate 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>

Link to an Email
<a href="mailto:[email protected]">Send Email</a>
Address

Phone Number <a href="tel:+1234567890">Call Now</a>


Element to
Interlink Specific Code

<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>

You might also like