HTML “link” tag to remember and how to use it?

When learning HTML, I think that
“creating links to move pages” is unavoidable . In this article, I will introduce the “link” function of HTML and how to use it.

Basic ‘a’ tag for links

Use the “a” tag to create links in HTML. The letter “a” means “anchor,” and it is used to tie ships to a fixed place.
On the web, it is used in the sense of a point or mark for linking.

First, let’s take a look at some of the most commonly used examples of linking to other pages .
This example creates a link to Google’s site with the title “Google”.

<p>
 
  <br>
  <a href="https://www.google.co.jp">Google</a>
</p>

When creating links to other sites, like in the sample

and describe. This is the basic setup method.
The “a” tag has several important attributes, including “href”, so I’ll introduce the most commonly used ones.

“href” attribute

Specifies what happens when the link is clicked. In many cases, it specifies the URL of the link destination, but it is also used for sending e-mail (mailto:) and executing Javascript (javascript:).

Rules for specifying links

The content specified in the “href” attribute must be expressed as either “relative path”, “absolute path” or “ID specification” .

relative path

A relative path is a method of specifying a location relative to the displayed HTML file.
Mainly used for links within the same website.

To specify HTML files in the same hierarchy, specify as follows.

<a href="./link.html"></a>

absolute path

An absolute path is a method that specifies the entire URL starting with “https://”.
When linking to other websites, you basically specify the absolute path.

 <a href="https://www.google.co.jp">Googleへ</a>

ID designation

This is a method to create a link that jumps to the location of the specified ID name (distinguished name) within the same page.
Specify with “#ID name”. If you specify “#” alone or “#top”, it will move to the top of the page even if the ID is not set.

<a href="#top"></a>

“target” attribute

Attribute that specifies how to open the link. Introduce the main value.

_self

Displays the link destination in its own window. If you omit the “target” attribute, it is automatically treated as “_self”, so you may not see it often, but remember that it is actually set like this.

<a href="https://www.google.co.jp" target="_self">Googleへの</a>

_blank

Open a new window to view the link destination. It is used when you want to keep the original page and open a new page.

<a href="https://www.google.co.jp" target="_blank">Googleへの</a>

What is the “link” tag? How is it different from the “a” tag?

By the way, the name that comes to mind when you say “create a link” is not the “a” tag, but the “link” tag.
It also has common attributes such as the “href” attribute and the “rel” attribute that is also used in the “a” tag. However, it does not perform the action of “creating a link” that is
commonly imagined .

I will briefly explain the difference between the “link” tag and the “a” tag.

In other words, using the “link” tag does not create a visible link in the browser.
However, it is used in important places when learning HTML.

Have you ever seen a description like this?

<link rel="stylesheet" href="site.css">

In fact, it is used when calling the CSS that defines the HTML design as an external file.
The ‘rel’ attribute specifies the relationship to the file (stylesheet in this case), and the ‘href’ attribute specifies the actual filename.
Whichever is missing, you can’t call external CSS files.

This is a very important tag, but please note that it is different from the image that comes to mind with “link”.

Customize the ‘a’ tag with CSS

Now, back to the links created by the ‘a’ tag.
It’s easy to create a link, but it doesn’t look very nice when created normally.
Here are some ways to customize it using CSS.

Don’t change color depending on link state

The links created in the first sample are displayed in blue for unvisited links and purple for visited links in that browser, as shown below.

Consistent link colors are easy.
If you write the following in CSS, both links will be displayed in blue.

a {
  color: blue;

Customize colors using “pseudo-classes”

The ‘a’ tag itself does not define context-sensitive behavior, such as visit state or mouseover state.
You can change it by using CSS “pseudo-classes”.
The main pseudo-classes used in the “a” tag are:

using this pseudo class

・Visit links remain blue
・Change to green on mouseover

Let’s specify
Note that pseudo-classes that specify the same color are lined up with “,”.

a:link,   //
a:visited,/*/
a:active  /*/ 
{
  color: blue;
} 

a:hover{
  color: green;
}

Remove the underline and make it look like a button

HTML was originally created with the design of “links are underlined”, but now that CSS design has become the basis, visual designs such as buttons are often required. I’m here.
I will introduce how to make a link look like a button in two steps.

1. Remove the underline

Let’s remove the underline first.
You can remove it by setting the “text-decoration” property to “none” in CSS.

CSS

a {
  text-decoration: none;
}

HTML

<p>
  <span></span>
  <br>
  <a href="https://www.google.co.jp">Google</a>
</p>

Now you can remove the underline.

2. Change the design of the link

By changing the background and border with CSS, you can make it look like a button.
The important thing is that you can visually see the “pressed” feeling because it is a button.
Let’s make it look like a button by changing the background color with the pseudo-classes “a:hover” and “a:active”.

CSS

a {
  display: inline-block;
  text-decoration: none;
  
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 2em;
  padding-right: 2em;
  
  color: white;
  font-weight: bold;
  background-color: #1d00c4;
  border-radius: 0.8em;
}

a:hover {
  background-color: #2400f0;
}


a:active {
  background-color: #0f0066;
}

By changing the color when the mouse is over and when clicked, you can make it look like a button.

summary

I introduced the “link” function in HTML.

Once you understand how links work and can customize their appearance, you’ll be able to expand your page presentation.