HTML Links
HTML Links (Hyperlinks) are words or buttons having a link to another page that take the user to
that linked page when clicked.
HTML Hyperlinks
A hyperlink is a specific type of link that allows users to navigate from one web page or resource to
another by clicking on it. You can create hyperlinks using text or images available on a webpage. A
hyperlink is created using the HTML Anchor Tag (</a>).
The Anchor (<a>) Tag
An anchor tag, or <a> tag, is a basic element that creates hyperlinks between two pages. Anything
which is written between the opening <a> and the closing </a> tags become clickable and when
someone clicks on it, the linked page will be opened.
Syntax
Here is the syntax to create a hyperlinks in HTML:
<a href="URL" target="_target_type">Link Text</a>
Creating Hyperlinks (Linking Webpages/Documents): It can link other webpages or documents by
creating the hyperlinking to specific words, images, or any HTML element.
As discussed above, it can create hyperlinks by using the HTML <a> tag with the href attribute. The
href attribute specifies the page/document to be linked.
Syntax
<a href="URL" ... attributes-list>Link Text</a>
Example
In this example, we are creating a simple HTML document that demonstrates how to use a hyperlink:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="https://www.kwasu.com.ng/portal/" target="_self">Kwasu Portal</a>
</body>
</html>
On executing the above example, a link will be displayed. You can click on the link generated to
reach to the home page of Kwasu Portal.
The "target" Attribute: The target attribute specifies the location where linked document is opened.
Following are the possible values of target attribute:
Example
Try following example to understand basic difference in few options given for target attribute.
This will produce the following result, where you can click on different links to understand the
difference between various options given for target attribute.
Use of Base Path in Hyperlinks
When you link HTML documents related to the same website, it is not required to give a complete
URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This
tag is used to give a base path for all the links. So your browser will concatenate given relative path
to this base path and will make a complete URL.
Example
Following example makes use of <base> tag to specify base URL and later we can use relative path
to all the links instead of giving complete URL for every link:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>
This will produce the following result, where you can click on the link generated HTML Tutorial to
reach to the HTML tutorial.
Linking to a Page Section: Linking to a section on the same page allows users to navigate directly
to that section. It can create a link in the same to a specific section by using the href attribute with a
#id value, where the #id targets an element on the page with a corresponding id attribute.
Example
The following code example demonstrates the application of the href attribute for intra-page
navigation. By specifying the identifier of a section (using #id) within the href attribute, users can
efficiently navigate to the targeted sections within the same webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
height: 900px;
}
</style>
</head>
<body>
<h2>Ed-Tech</h2>
<div>
<p>
Tutorialspoint: Simply Easy Learning
</p>
<a href="#about">Know More</a>
</div>
<h2 id="about">Section 2</h2>
<div>
<p>
Tutorials Point is an online learning platform
providing free tutorials, paid premium courses,
and eBooks. Learn the latest technologies and
programming languages SQL, MySQL, Python, C,
C++, Java, Python, PHP, Machine Learning, data
science, AI, Prompt Engineering and more.
</p>
</div>
</body>
</html>
Styling Hyperlinks (Setting Link Color)
You can set colors of your links, active links and visited links using link, alink and vlink attributes of
<body> tag.
Example
Save the following in test.htm and open it in any web browser to see how link, alink and vlink
attributes work.
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>
This will produce the following result. Just check color of the link before clicking on it, next check
its color when you activate it and when the link has been visited.
Downloadable Links
HTML allows you to create downloadable links where you can create links to make your PDF, DOC,
or ZIP files downloadable. To create any link downloadable, you can use the download attribute with
the <a> tag and specify the downloadable file path in the href attribute.
Example
The following example demonstrates creating a downloadable link in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Downloadable Link Example</title>
</head>
<body>
<a href="/html/src/sample.txt" download>Download File</a>
</body>
</html>
HTML - Image Links: Images can also be used as links in HTML, which means by clicking the
images we can navigate to other web pages or resources. HTML image links are very useful in
creating websites like photo galleries, portfolios, online stores, and so on. In this article, we will learn
how to use images to create hyperlinks. It is similar to the HTML - Text Link.
Creating Image Links
To create an HTML image link, we need an <img> tag and an anchor element. The image element is
used to display the image on the web page, and the anchor element is used to specify the destination
URL of the link.
Here, the href attribute of <a> element contains the destination link and src attribute of <img> tag
contains the path of image.
Syntax
Here, the href attribute of the <a> element contains the destination link, and the src attribute of the
<img> tag contains the path of the image.
<a href=" destination URL"> <img src="image URL" alt="alternative text"> </a>
Examples of HTML Image Links
Here are some example codes that explain the usage of image links in HTML
• Create Hyperlink for an Image
• Image Link with Tooltip
• Mouse-Sensitive Images
o Server-Side Image Maps
o Client-Side Image Maps
Create Hyperlink for an Image
The following example uses an image as a hyperlink. The image will be rendered when the supplied
code is run, and clicking on it will take the user to Tutorials Point's homepage.
Example
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<a href="https://www.tutorialspoint.com">
<img src="/html/images/logo.png"
alt="Tutorials Point"
border="0" />
</a>
</body>
</html>
Image Link with Tooltip: You can also define a tooltip for an image link; when someone moves the
mouse over the linked image, it will display a tooltip. To set the tooltip, you can set the title attribute
of the <a> tag.
Example
The following example demonstrates a tooltip to an image link:
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<a href="https://www.tutorialspoint.com" title="Go to TutorialsPoint">
<img src="/html/images/logo.png"
alt="Tutorials Point"
border="0" />
</a>
</body>
</html>
In the above example, hovering over the logo will display the tooltip " Go to TutorialsPoint".
Email Links (mailto): HTML email links allow users to click on a link and automatically open their
default email client with a new message composed to the specified email address.
This is done using the mailto: protocol in the href attribute of an <a> (anchor) tag. You can also
predefine the subject and body of the email using the mailto: protocol.
This is done by appending ?subject= and &body= to the email address. Spaces and special characters
in the subject and body should be URL-encoded. For example, spaces are encoded as %20.
Syntax
The following HTML code creates a clickable email link that opens the user's default email client to
send an email to the specified address:
<a href= "mailto:[email protected]">[email protected]</a>
Examples HTML Email Links
Following are some examples that illustrate usage of HTML Email link:
Create Email link using href
The following HTML code illustrates how to create an email link using the href attribute of the <a>
tag.
<!DOCTYPE html>
<html>
<body>
<p>
Creating an HTML Email Link
</p>
<a href= "mailto: [email protected]">
Click to Send Mail
</a>
</body>
</html>
HTML tables represent data, such as text, images, etc. in a structured format with rows and
columns. HTML tables offer a visual structure that aids in clarity and comprehension, making them
a fundamental element in web development.
Why HTML Tables are Used?
HTML tables are used for various reasons, primarily centered around organizing and presenting
data effectively. Some key purposes include −
Structuring Data − Tables provide a coherent structure for organizing and displaying data,
making it easier for users to interpret information.
Comparative Presentation − When there is a need to compare different sets of data side by
side like difference between two concepts, tables offer a clear and visually accessible format.
Tabular Data Representation − Information that naturally fits into rows and columns, such
as schedules, statistics, or pricing tables, can be well-represented using HTML tables.
Creating an HTML Table: You can create a table in HTML by using the <table> tag along with
several tags that define the structure and content inside the table. The primary tags that are used
with the <table> tag are <tr>, <td>, and <th>.
Creating tables in HTML involves several elements that define the structure and content. The
primary tags used are <table>, <tr>, <td>, and <th>.
HTML <table> Tag: This tag is used to create the table that wrap the rows and columns
within it.
HTML <tr> Tag: Stands for "table row" and is used to create a row within the table.
HTML <td> Tag: Represents "table data" and is used to create standard cells within a row.
HTML <th> Tag: Represents "table header" and is used to create header cells within a row.
HTML Table Structure - Rows and Columns
Rows: Each row in an HTML table is defined using the `<tr>` tag. It contains a set of table cells
(`<td>` or `<th>`), representing the individual elements within that row.
Columns: The actual data or header information is contained within the table cells. Cells in the same
position in different rows form a column.
A table row is defined by the <tr> tag. To set table header, we use <th> tag. To insert data in table
cell, use the <td> tag.
A table in HTML consists of table cells inside rows and columns of the table.
Table heading is defined by the <th>...</th>. Data inside the <th> are the headings of the column of
a table.
Each table cell is defined by a <td>...</td> tag. Data inside the <td> tag are the content of the table
rows and columns.
Each table row starts with a <tr> ....</tr> tag.
We use style sheet to create border for the table.
Example
Consider a table representing a simple list of products with their respective categories and prices.
This basic table structure organizes data in a clear, tabular format, making it easy to read and
understand. Here, the border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border, then you can use border="0".
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$800</td>
</tr>
<tr>
<td>Bookshelf</td>
<td>Furniture</td>
<td>$150</td>
</tr>
<tr>
<td>Coffee Maker</td>
<td>Appliances</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Table Background Color and Image
You can set the background color and background image of an HTML table by using the CSS and
attributes of the <table> tag.
Using Attributes
The following are the attributes that can be used with <table> tag to set the background color and/or
image:
bgcolor: The bgcolor attribute sets the table's background color.
<table bgcolor="#f0f0f0">
background: The background attribute sets a background image.
<table background="image.jpg">
Table-related Tags Reference
The following are the table-related tags. You can click on the link to read about the specific tag and
click on "Try It" to practice its example:
Table Headers and Captions
Headers and captions are used inside tables to organize and present data in a structured format.
The table heading is an essential part of a table, providing labels for columns. The <th> (table
header) element is used to define table headings.
Captions are used in the tables to provide a title or explanation for the table. The <caption> element
is placed immediately after the opening table tag.
Syntax to Create Table's Header and Caption
The following is the syntax to create a header and caption for an HTML table:
<table>
<caption>Description of table</caption>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</table>
Define a Header Row for a Table
The <th> tag is used to represent table headings, and it is typically used within the <tr> (table row)
element. Unlike the <td> (table data) tag used for regular cells, <th> is reserved for headers. In
most cases, the first row of a table is designated as the header row.
Example
Consider a simple HTML table with headings for "Name" and "Salary":
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Styling Table Headings
Styling table headings can enhance the visual appeal of a table. CSS can be applied
to <th> elements to customize their appearance. In the following example, a simple CSS style is
added to the <style> tag within the <head> section to modify the background color and text
alignment of the table headings.
Example
This example demonstrates how you can style table headings with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled HTML Table Header</title>
<style>
th {
background-color: #4CAF50;
color: white;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Using Header Cells in Any Row
While it's common to use <th> in the first row of a table, you can utilize it in any row based on your
requirements. This flexibility allows for the creation of complex tables with multiple header rows or
headers interspersed within the table.
Example
In this example, we are creating table headers in the first row:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled HTML Table Header</title>
<style>
th {
background-color: #4CAF50;
color: white;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<th>Additional Details</th>
<th>Specialization</th>
</tr>
<tr>
<td>Technical Lead</td>
<td>Web Development</td>
</tr>
</table>
</body>
</html>
Table Header Using <thead> Element
The <thead> tag is used to group table header cells so that a combined CSS style can be applied to
header cells.
The <thead> tag is typically placed within the <table> element and contains one or
more <tr> elements, each of which, in turn, contains <th> elements representing column headers.
Example
In this example, we are creating a table header using the thead tag:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border=1>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<!-- Table body goes here -->
</table>
</body>
</html>
Defining Multiple Header Rows
You can include multiple <tr> elements within <thead> to create multiple header rows. This is
useful when your table structure requires a more complex hierarchy of headers.
Example
In this example, we are defining two rows as the table header:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border=1>
<thead>
<tr>
<th colspan=2>Tutorialspoint</th>
</tr>
<tr>
<th>Role</th>
<th>Experience</th>
</tr>
</thead>
<tr>
<td>Technical Lead</td>
<td>5 Years</td>
</tr>
<tr>
<td>Web Developer</td>
<td>2 Years</td>
</tr>
</table>
</body>
</html>
Using '<colgroup>' Inside '<thead>'
The <colgroup> tag can be used within <thead> to group together a set of column and apply CSS
styling or attributes to entire columns.
Example
In this example we apply style to first two columns of table by grouping those columns in colgroup
tag.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.col1 {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Table with colgroup</h1>
<table border="1">
<colgroup class="col1">
<col style="width: 150px;">
<col style="width: 200px;">
</colgroup>
<col style="width: 150px;">
<col style="width: 100px;">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smartphone</td>
<td>Electronics</td>
<td>$299.00</td>
</tr>
<tr>
<td>2</td>
<td>Office Chair</td>
<td>Furniture</td>
<td>$89.00</td>
</tr>
<tr>
<td>3</td>
<td>Laptop</td>
<td>Electronics</td>
<td>$999.00</td>
</tr>
</tbody>
</table>
</body>
</html>
Combining with '<tfoot>' and '<tbody>'
The <thead> tag is often combined with <tfoot> (table footer) and <tbody> (table body) to create a
comprehensive table structure.
Example
In the following code the structure of table separates header, body, and footer content for better
organization.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table</title>
</head>
<body>
<table border>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<p>
Footers are generally used to enter
sum of values of each column.
</p>
</body>
</html>
Difference between <thead> and <th>
Following are the points that highlight the differences between <thead> and <th> −
The <thead> tag is a structural element used to group header content, while <th> is a cell-level
element defining a header cell.
It's common to use <th> within <thead>, but <th> can also be used outside <thead> to define
headers in regular rows.
Including <thead> is optional; however, using it improves the semantic structure of the table.
Adding Caption to a HTML Table
The caption tag will serve as a title or explanation for the table, and it shows up at the top of the
table.
Example
In the following code we will display a caption on top of a HTML table:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>
</body>
</html>
Table Header, Body, and Footer
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather
similar to headers and footers in a word-processed document that remain the same for every page,
while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
The <thead> tag to create a separate table header.
The <tbody> tag to indicate the main body of the table.
The <tfoot> tag to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should appear before <tbody>
Example
In this example, we are creating an HTML table with the table header, body, and footer:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<th colspan="4">
This is the head of the table
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
This is the foot of the table
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML Table Colgroup
In HTML, the <colgroup> element is used to define a group of columns in a table. It allows you to
apply properties to multiple columns simultaneously, providing a more efficient way to style or
format columns.
The <colgroup> Tag
The <colgroup> is often used in conjunction with the <col> element, where
each <col> tag represents an individual column within the group. This grouping enhances
readability and simplifies the application of styles or attributes to specific columns in a table.
Syntax
Following is the syntax to use <colgroup> with <table> tag:
<table>
<colgroup>
<col span="value" style="width: ...;">
<col style="...">
<!-- More <col> elements... -->
</colgroup>
<!-- Other table elements such as <thead>, <tbody>, ... -->
</table>
