Web Development: HTML Element: a

Thursday, March 16, 2023

HTML Element: a

The <a> element (or “anchor”) creates a hyperlink to webpages, files, and other resources, by passing a URL to its href attribute. It’s one of the most important elements of HTML, and one of the first you’ll get to know when starting out as a developer.

Example

Syntax

1	<a href="https://tutsplus.com">Envato Tuts+</a>

Result

Linking to Sections

Anchors can also link to sections on the same page by using fragment identifiers. This takes the form of a # symbol which points to the id of an element elsewhere on the page:

<a href="#somewhere">Jump somewhere else</a>



<h2 id="somewhere">This is somewhere else!</h2>

You can use #top or simply # to link directly to the top of the current page.

Browser Support

The <a> tag is supported in all modern browsers. Read more on caniuse.com.

Attributes

The <a> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

If the <a> element has an href attribute, then it represents a hyperlink labeled by its contents.
If the <a> element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed.

The href Attribute

The <a> element supports the following attributes which can only be present if the href attribute is present:

href: Address of the hyperlink.
target: A navigable target name or keyword (_blank, _self, _parent, _top)
download: Used for downloading a resource rather than navigating.
ping: Gives the URLs of the resources that are interested in being notified if the user follows the hyperlink.
rel: controls what kinds of links the elements create.
hreflang: Gives the language of the linked resource.
type: Gives the MIME type of the linked resource
referrerpolicy: Used to set the referrer policy used when following hyperlinks.

Content

An <a> element allows for transparent content, but there must be no interactive content descendant, <a> element descendant, or descendant with the tabindex attribute specified.

Accessibility

Wherever possible, make link text descriptive, rather than simply saying “click here”. For more information check out Emma Patricios’ article on creating valid and accessible links (see what I did there?).

The <link> element is also a type of hyperlink, but instead of being used to navigate HTML documents and files, it’s used to define a relationship between them.