Basics and uses of the <a> element

Hi. My name is Godspower😃. This is my first post and I am excited. Getting around how to publish on dev.to is something else🤣, phew!! For this first post, I'd love to play around with the anchor < a > tag. I find it interesting because it does so much. Like, why would a single tag have so much function?

Many web pages defines the anchor < a > tag as a hyperlink which is used to link one document or page to another. The < a > can also be used to link texts, pictures, email or web addresses. In other words, the HTML < a > tag (or anchor element), with its href attribute, creates a hyperlink to web pages, email addresses, locations on same or different page or anything else a URL can address. Hyperlinks allows users to navigate from one page to another.

Initially, the anchor tag < a > was used as a markup to reference footnotes and annotations. Currently, it is referred to as an < a > element.

The hyperlink created by an anchor element is applied to the text, image, or other HTML content nested between the opening and closing < a > tags. The < a > tag which is not self closing tag is written properly as < a href=" " > # < /a > and the < a > tag must have the URL of the document of interest inserted in the double quote (“ ”)of the opening < a href > tag.

The < a > tag must also have the href attribute, without which the tag could be considered useless or merely a placeholder. For example, if you want to link facebook.com to your local web page, the < a > tag enables you to do this. That is, < a href=" https://www.facebook.com" > facebook< /a > saves the day.

Content within each < a > tag should indicate the link's destination. Note that the URL could be the location of an image within same folder or a URL of an image hosted on the web, of your email address, or any of your favorite websites.

The < a > tag can also be used to link an HTML file with files within same or different folders or sub-folders. This is achieved with href attribute:

1. Within same folder: < a href="the-name-of-file-of-interest.html" >my link< /a >.
2. From different folders : < a href="../the-name-of-file-of-interest.html" >my link< /a >.
3. Linking to an absolute URL: < a href="https://www.google.com" > Google< /a >. This takes you directly to Google’s home page.

To create an image link, the < a > is wrapped around an image URL (if it’s hosted) or image title (if it’s local). The < Img > tag is used in consonance with the < a > tag: < a href="Site link" > < img src="Image URL" width="required-width" height="required-height" > < /a >

The < a > tag can also be used to navigate to the top and or bottom of a page easily: < a href="#top" >Go to Top< /a >. < a href="#bottom" >Go to Bottom < /a >. However, this function can be achieved using an ‘id’ too.

Apart from the href attribute, other attributes that works well with the < a > tag include:

1. target: Specifies the target frame to load the page into, and is used only when the href attribute is present. Basically, the target attribute determine whether the link will be opened in a new window or reload the current page.

2. download:Indicates that the link is to be used for downloading a resource (such as a file). 

3. rel:Describes the relationship between the current document and the destination URL. Only to be used when the href attribute is present.

4. hreflang: Language code of the destination URL. Only to be used when the href attribute is present.

5. type: Specifies the media type of the linked resource. Also, only to be used when the href attribute is present.

6. media: specifies what media/devices the linked document is optimized for.

7. ping; Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.

In HTML 4.01, the < a >tag could be either be a hyperlink or an anchor. In HTML5, the < a > is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.
The < a > tag supports both global and event attributes, while some attributes have gone obsolete since HTML5.

Okay, I've outlined the obvious functions and features of the < a > tag and I would really really love to read your comments, plus contribution to areas omitted.😊😊