Links, which are represented by the <a> </a> element , play an important role – they provide navigation between individual documents. This element has the following attributes:
- href: defines the address of the link
- hreflang: indicates the language of the document to which this link leads
- media: defines the device for which the link is intended
- rel: defines the relationship between this document and the referenced resource
- target: defines how a referenced document should open
- type: indicates the mime-type of the resource by reference
The most important attribute is href:
<!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>Links In HTML5</title>
</head>
<body>
<a href="#"> Links In HTML5 </a>
</body>
</html>
Here the relative path content.html is used for the link . That is, the content.html file must be located in the same folder with this document, to which the transition will go by clicking on the link.
We can also use absolute paths with full address indication:
<a href="https://easywptutorials.com/links-in-html5/">Links In HTML5</a>
Navigation within a document
And we can also set internal links that will jump to specific blocks within elements:
<!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>Links In HTML5</title>
<style>
div {
width: 200px;
height: 80px;
margin-bottom: 20px;
}
#box1 {
background-color: blueviolet;
}
#box2 {
background-color: rgb(16, 8, 124);
}
#box3 {
background-color: rgb(7, 77, 33);
}
</style>
</head>
<body>
<a href="#box1"> Links In HTML5 </a> | <a href="#box2"> Links In HTML5 </a> | <a href="#box3"> Links In HTML5 </a>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
To define an internal link, a pound sign (#) is indicated, followed by the id of the element to which you want to navigate. In this case, the transition will go to the h2 headers.
Target attribute
By default, the resources that are linked to are opened in the same window. The target attribute can be used to override this action. The target attribute can take the following values:
- _blank: open html document in new browser window or tab
- _self: opening html document in the same frame (or window)
- _parent: open document in parent frame if link is in inner frame
- _top: open html-document to the whole browser window
- framename: opening an html document in a frame called framename (In this case, framename is just an example, the name of the frame can be arbitrary)
For example, opening a document from a link in a new window:
<a href="https://easywptutorials.com/links-in-html5/" target="_blank">Links In HTML5</a>
The value _blank just tells the browser that the resource should be opened in a new tab.
Styling links
By default, the link already has some color (one of the shades of blue), in addition, it has an underline. When you click on the link, it becomes active and turns red, and after clicking on the link, this link may turn a different color (usually purple). This styling is set by default in many browsers, but we can override it. For example:
<!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>Links In HTML5</title>
<style>
a:link {
color: rgb(2, 177, 75);
text-decoration: none
}
a:visited {
color: rgb(205, 207, 209);
text-decoration: none
}
a:hover {
color: rgb(255, 174, 0);
text-decoration: underline
}
a:active {
color: rgb(59, 16, 180);
text-decoration: underline
}
</style>
</head>
<body>
<a href="https://easywptutorials.com/links-in-html5/">Links In HTML5</a>
</body>
</html>
Styles for links in various states are defined here. a:linkapplies to links in their normal state, when they are not clicked or hovered over.
- a:visited indicates the state of a link that has already been navigated.
- a:hover indicates the state of the link that is being hovered over.
- a:active indicates a link in the clicked state.
Style color sets the color of the link. And the style text-decoration sets the underline: if the value underline, then the link is underlined, if none, then there is no underline.
Picture link
By placing an <a>element inside the element <img>, you can create an image link:
<a href="https://easywptutorials.com/links-in-html5/" target="_blank"> <img src="links-in-html5.jpg" alt="links in html5" /> </a>