Review of Hyperlinks

When styling a link we need to begin by creating a link in the html document.  This is a basic Hyperlink.

<a href="url">link text</a>

Hyperlink Target

A link is a basic event for a webpage.  When the user clicks on the link, the web page sends a notification for an action to take place.  The action is sending the user to another web URL.  During the process of the action, web designers can specify different actions to perform.  These actions are considered the target attribute of a link.

As a default, when the link is clicked the default event is for the user to leave the current web page and be taken to a new web page.  The web designer does not have to specify code for this action to take place.

A popular variation of this target action is the action of having the link open a new web page (or your browser may open a new tab instead) in a new window.  To specify this event you would add the __blank target attribute which looks like the following:

See the Pen target-blank by jhoffmanbcc (@jhoffmanbcc) on CodePen.

There are two ways to reference a URL address when writing a link.

  • You can reference a with the absolute URL address or full URL address as referenced in the previous example above.
  • You can reference with the local URL or relative URL path, directing to the web page or web element that is on the server.  The example of a relative url link looks as follows below.
  • <a href="page2.html">Page 2</a>

How Do You Add Elements to a Hyperlink?

Links can also be incorporated with other html elements.  The link has an opening <a href> and a closing </a>.  Whatever is placed within the opening and closing of the tags will become a link.

Hyperlink + H1

Below is an example of placing an html element like an <h1> tag within a link:

See the Pen h1-in-a-link by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Hyperlink + Image

Here is an example of placing an image within a link:

See the Pen image-link by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Hyperlink + Span

Here is an example of placing a span tag with style within a link:

See the Pen LbPJrz by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Hyperlink + Div

Here is an example of placing a div tag with style as a link.

See the Pen Div Link by Stuart (@bystuart) on CodePen.

Hyperlink Bookmarks

You can also utilize links as bookmarks to jump to different portions of the page.  To create an html bookmark you will need to create a reference id tag within the link.  Then you will need to add the id to the html element that you would like to bookmark.

<a href="#bottom">Go to bottom of the page</a>
(page content here)
<h1 id="bottom">Bottom of the page</h1>

See the Pen Bottom-of-Page by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Questions