It has always seemed to me that one of the most appreciated things about HTML documents on the web, apart from being able to insert images or videos, is the possibility of creating hyperlinks or links between them .

In fact, I think this is one of the features that can most excite and motivate newbies who have never touched code with a stick and who decide to enter the world of web development.

Suddenly, you type four lines of HTML and, wham, you are able to add interactivity to simple text . Since you are seeing this post, I deduce that you are taking your first steps with HTML right now, so you surely understand what I mean.

How are the links placed?

Links in HTML are created primarily with the tag<a> , which has a corresponding closing tag </a>. But, but … neither “link”, nor “link”, nor “hyperlink begin with” a “Where does this come from?

Well, it comes from the English “anchor”, which literally means “anchor”. So, every time you put a link on your web page, imagine that you are throwing an anchor with a rope towards another web page, and thus both are hooked . Linked.

The href attribute of links

The most important most important attribute in links is hrefwhat does it mean? Well, it is the abbreviation of Hipertext Reference , or what is the same Hypertext Reference . This attribute is where we indicate the URL to which we will point with the link. That is, the page where the browser will go when clicking on the link .

So, if you want to link to the campusMVP resource blog, from your page you would put:

 <a href="" title="Add link add mime type add another enclosure link">Add link add mime type add another enclosure link</a>

Look at the attribute title, it serves to display a tooltip in the browser (leave the cursor over the link) that normally provides information about the landing page. Use it. You will improve the accessibility and user experience of your pages, apart from being very useful to optimize your page for search engines, since you help them better understand your content.

By the way. As you can see, the link text is what goes between <a> and </a>. If instead of text you want the link to be an image , you would have to put the corresponding <img> tag there:

<a href="" title="Add link add mime type add another enclosure link">
  <img src="" alt="Add link add mime type add another enclosure link" />

Links with absolute paths

But if you wanted to link to a specific page you would have to put a more detailed address:

<a href="">Add link add mime type add another enclosure link</a>

Note : in Internet jargon, the unique addresses of a resource, such as the one we just placed in our link, are called URL , Uniform Resource Locator or Uniform Resource Locator . A URL is a unique address that identifies a resource on the Internet, not just the Web. The most common is that you hear about URLs and not so much about addresses, but it is the same.

Look at the URL. Now, apart from the domain, several directories appear in the path separated by a forward slash “/”, also called  slash , plus the full file name with its extension. This type of URL that includes the domain (plus the folder and / or file structure, if applicable) is an “absolute path”.

Links with relative paths

But if I want to link this file from another page within the campusMVP domain, it would be enough to put this (and it would work the same):

<a href="/directorio1/directorio2/page.html">Add link add mime type add another enclosure link</a>

If I’m in another HTML document in the same directory I could also do it like this:

<a href="./page.html">Add link add mime type add another enclosure link</a>

Or this way:

<a href="../directorio2/page.html">Add link add mime type add another enclosure link</a>

All three cases are examples of relative paths , that is, relative to the page I’m on right now , and they have the advantage that they are domain independent. If you change the domain to your website tomorrow, they will continue to work just as well.

  1. In the first case, the address begins with a slash "/" . This means that it will start looking for the path from the root of the domain .
  2. In the second case it starts with "./". This means that it will start searching for the path from the current folder level .
  3. And in the third, it starts with "../". This means that it will start searching for the path from the level immediately above the current folder . You could nest several "../"to go up several levels, but I don’t recommend using more than two or three.

The name attribute and links within the same page

The attribute is nameused to create empty links that will indicate specific points on the page. These can be visited by clicking on other links within it. For example, the typical “Back to Top” link that is placed at the bottom of a page, and when clicked, the browser scrolls to the top. Another very common use is in indexes or tables of contents on very long pages.

For example. At the top of your page you put this:

<a name="principio"></a>

And at the end a link that points to there. It is done with the symbol “hash” followed by the value ofname

<a href="#principio">Add link add mime type add another enclosure link</a>

We could also do it using the one idof any element. You do not believe it?

It took you to the first paragraph of the post, right? That’s because the link points to the attribute idthat I purposely put in the first paragraph of the post so that you could see this example.

In fact, although this technique nameis widely used, in the HTML5 recommendation it is considered obsolete to use the attribute namein the elements<a> and its use is discouraged in favor of the technique of using the id:

<a id="principio"></a>

And the link to go there would be exactly the same:

<a href="#principio">Add link add mime type add another enclosure link</a>

Other interesting attributes

Apart from the two attributes mentioned, there are more attributes that you can use in links:

Content type: type

These are just some examples

  • text/html : HTML documents
  • image/jpg: JPG images
  • text/css: CSS style sheets
  • application/rss+xml: XML files for RSS feeds

Relationship: relandrev

Indicates relationships between documents, relindicates the relationship between the linked page and the linked page, and revindicates the inverse relationship.

  • alternate: indicates that it is an alternative version to the current document (in another language, a version for printing)
  • stylesheet: indicates that the linked file is a style sheet
  • start: reports that the linked document is the first in a set or sequence
  • next: the linked document is the continuation of the current one within a logical sequence (a blog post or a book)
  • prev: the linked document is the previous one of the current one within a logical sequence (a blog post or a book)
  • bookmark: indicates that the link is a “bookmark” or “favorite”, this means that it is important.
  • contents: the linked element contains a table of contents
  • nofollowtell the search engine spiders not to follow that link
  • noindex: tells search engine spiders not to show that link in search results
  • external: indicates that the linked page belongs to an external website

Where do we aim ?: target

The attribute targetis used to specify where we are going to open the linked URL. Part of the area in which we are (a window, a frame) and, based on this, it is designated where we open the resource. The value of targetcan be the name of a <iframe>or of a <frame>(although it is obsolete in HTML5 and its use is discouraged) or one of the following values:

  • _self: load the resource in the same context we are in, be it a window or an iframe.
  • _blank: the most used attribute. Used to open the resource in a new tab. When browsers did not have tabs, it would open in a new window, although modern browsers can be configured by the user to open in a new window instead of a tab.
  • _parent: opens on the “mother” page from which the current one was opened or that contains it (usually a frameset). If there is no “parent” element, it behaves like _self.
  • _top– Opens in the highest navigation context, which is usually an ancestor and has no parent. If there is no element that is the parent of the current context then it works like _self.

Landing page language: hreflang

Indicates, with its corresponding ISO code, the language of the linked page. It is especially useful for multi-language websites used in conjunction with rel="alternate"so that search engines ( that is, Google ) do not mess with the different versions and languages.

These are just a few attributes, but there are more. If you are curious, you can continue exploring the W3C page or the Mozilla Foundation developer resources page.

And if you are learning HTML, or just want to better consolidate your knowledge, take a look at our HTML and CSS course. You will learn in a much more structured and orderly way than if you go on your own, and in a short time you will see great progress in your domain of web layout.

What are attached links in Blogger and how to add them?

Do you have a Blogger blog and run it, or do you want to run a regular podcast? Well, you’re in luck, because Blogger makes it easy to distribute your podcast. You can use a blog post on your Google Blogger blog to publish your podcast through an RSS channel. This is done by using Enclosure links, a lesser-known feature that has been around for quite some time. In this post, we’ll talk about the attached links in Blogger and how to enable and use them.

What is a podcast?
A podcast is a digital medium consisting of an episodic series of audio, video, PDF or ePub files subscribed to and downloaded via web distribution or transmitted online to a computer or mobile device. You can think of a podcast as an episode on radio or TV that you can download or watch online on your computer or mobile device. Many popular blogs and websites run regular podcasts that can range from weekly product reviews, summaries of a week’s most important news, special Q & A sessions, etc.

Podcasts are usually available for download by subscription (or free) from a host web server. These media files (audio, video, etc.) can also be streamed in ‘podcatchers’, client applications that can read podcasts and help users manage their subscriptions.

This is no different than a website’S RSS feed, except that an RSS consists mostly of text and images. “RSS readers” can read RSS feeds in the same way podcasts can read podcastchers.

So where does a Blogger blog come from here?

Google Blogger has a hidden feature known as…

Hyperlinks (links, links) in HTML

In this video lesson you are going to learn to introduce hyperlinks ( links , links ) in your HTML code. But not only that, you will also learn:

  • Useful Sublime Text shortcuts : autocomplete feature.
  • What is the difference between an absolute (external) link  and a relative link .
  • How to use links to move around the different pages of a website.
  • How to make a link open in a new tab: attribute  target="_blank".
  • Making click a link on the mailer is opened to email:  mailto.

Here is the code made during the session so you can practice:


<! DOCTYPE html >
< html >
< head >
< meta charset = ” utf-8>
< title > Learning About Hyperlinks </ title >
</ head >
< body >
< h1 > Hyperlinks </ h1 >
< h2 > In this lesson I will learn how hyperlinks work </ h2 >
< P > < a href = ” https://whatisfind.comtarget = ” _ blank> This link </ a > is an absolute hyperlink (external). </ p >
< P > This is a < a href = ” enlace_relativo.html> relative hyperlink </ a > . That is, we send the user to another page on our website. </ p >
< P > Send me an email to < a href = ” mailto:> </ a > </ p >
</ body >
</ html >


<! DOCTYPE html >
< html >
< head >
< meta charset = ” utf-8>
< title > </ title >
</ head >
< body >
< P > < a href = ” index.html> Back </ a > to the previous page. </ p >
</ body >
</ html >
view rawrelative_link.html hosted with ❤ by GitHub

And that’s all for this article, remember that you can continue learning with the Whatisfind Club’s WordPress design and development  courses , from $ 29 / month without permanence, with support for your doubts included and access to the private community of members.

A hug and we continue!