Anchors and Hyperlinks in HTML 5

Anchors and Hyperlinks in HTML 5

Anchor elements are used to create hyperlinks between source and target anchors. A source is a text, image, or button that points to another resource, and a target is a resource that the source anchor points to.

Hyperlinks are fundamental technologies that make the Web an information superhighway, and understanding how anchor elements are used must be learned first when learning HTML.

An HTML element (also known as an anchor element) that contains the href attribute creates a hyperlink to another web page, a location within the same page, a specific title on another web page, or an email web page. To do. The tag defines a hyperlink used to link from one page to another. The main attribute of the element is the href attribute, which indicates the link's target. As you probably know, the link is displayed in all browsers by default.

• Underlined and blue-unvisited links
• Underlined and Purple Links Visited
• Underlined and red – active link You can specify one of the following values for the URL:

Absolute URL-points to another website (eg href = "http://www.yoursite.com/homepage.htm")

Relative URL-points to a file in your website (for example, href = "contact.htm")

Links to elements with a specific ID in the page (href = "# top", href = "# middle", href = "# bottom", etc.)

Other protocols (https: //, ftp: //, mailto :, file :, etc.)A script (like href=”javascript:alert(‘Hello’);”)

Link to anchor

You can also use the link to jump to the same page, the top of the page, the bottom, or somewhere else with a particular title. To create a new anchor, you need to add a tag that refers to the id attribute. You can use this id attribute to name the anchor and then use this attribute to create a link to this anchor.

Anchor element

The anchor element tag is the letter "a" enclosed in brackets, such as:

Both start and end attributes are required, and all content between the tags forms the anchor source.

The most important anchor attribute is the three anchor attributes you need to know to create a functional hyperlink. These attributes are href, target, and download.

• Specify hyperlink target: href the hypertext reference or href attribute is used to indicate the target or destination of the anchor element.
• Href does more than just link to another website.
• It can link directly to any element on the web page to which the ID is assigned.
• It can connect to a resource using a protocol other than http.
• It can be used to execute scripts.

Specify the resource to download: Download

The link also instructs the browser to start downloading the file. The download attribute is used to identify the link to start the download, and the value assigned to the download attribute is the name of the file to download. The href attribute also works when setting the anchor element to initiate the download. The download attribute names the file, while the href attribute points to the location where the file is hosted.

Internal and external links

There are two types of resources that can be linked using elements: internal and external. Internal links are links that point to other pages on our website, and external links refer to pages that are not part of our website. Building internal links is important for several reasons.

• Internal links create navigation menus that help site visitors navigate your site.
• Internal links are used in website content text to help website visitors find relevant content.
• Search engine web crawlers also use internal links to search pages on your site and share permissions (also known as link juice) with other pages.

Be careful not to overdo it when creating internal links. Link juice for a particular web page is shared between the links on the page. Therefore, the more links you place on a page, the more the juice passed to each link will be diluted. We recommend keeping links per page to 100 or less, except for vast and complex sites, as a rule of thumb.

• External links are also crucial for a variety of reasons. External links can be recommended, mandatory, or just best practices to correctly identify the source of an idea or resource.
• External links can direct website visitors to proper, relevant content.
• If other websites post external links that point to our website, these links, called backlinks, will cause the link juice to flow to our website and our Web on the Search Engine Results Page (SERP). The location of the site will improve.

Absolute and relative URLs

In the last example, there were two links: http: //www.google.com and / seo /. The first is an example of an absolute URL. An absolute URL is a URL that contains a complete (absolute) description of the link target. The absolute URL contains the protocol (http) required to reach the target anchor and the full domain name and file path. The second is an example of a relative URL. Relative URLs link to a web page by describing the page's position relative to the current page's position. When writing internal links that point to other pages of the same website, we can write relative URLs rather than absolute URLs.

Why are relative URLs used?

Relative URLs are very popular with web developers. Websites are typically developed on a staging server with a different domain name than the last domain name. If relative URLs are used, and the site is pushed from the staging server and published on the Web, all relative URLs will continue to work correctly. However, if you use absolute URLs, your development team will have to inspect your site and fix all URLs. The benefits of using relative URLs when developing a website on a staging server are essential but costly. You need to understand how relative URLs work, but many experienced developers and SEO experts recommend sticking to absolute URLs as much as possible.

Other useful anchor attributes

With just the three attributes described so far, you can perform hyperlinking tasks that occur on the Web. However, there are additional attributes that you can use to notify the visitor's web browser and search engine that index your site about the meaning of hyperlinks.

Specifies the language of the anchor target: hreflang

You can use this optional tag to tell your web browser the document's language to which the anchor is linked. For example, if you want to link to a URL and tell the browser that the target anchor is Spanish, use the appropriate language code in ISO-6391 format as the value for the hreflang attribute.

Link web

The World Wide Web is best described as a vast library of hyperlinked documents with anchor elements to create bridges between related documents. By this definition, the anchor element occupies a good position as a glue that holds the Web together and as a bridge that allows web users to move from one document to related documents. A common way to use links is to create a navigation menu that represents your website's logical and hierarchical structure.