HTML

Last Updated: 9/18/2022

Links

  • Links allow users to navigate from page to page.
  • HTML links are hyperlinks. Also called as anchor
  • When you move the mouse over a link, the mouse arrow will turn into a little hand.
  • A link does not have to be text. A link can be an image or any other HTML element!
  • The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
  • The link text is the part that will be visible to the reader.
  • Clicking on the link text, will send the reader to the specified URL address.

Syntax

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

Target Attribute

  • By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
  • The target attribute specifies where to open the linked document.
  • The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked _blank - Opens the document in a new window or tab _parent - Opens the document in the parent frame _top - Opens the document in the full body of the window

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Absolute URLs vs. Relative URLs

Absolute - refers to full path Relative - refers relative to current page

<h2>Absolute URLs</h2>  
<p><a href="https://www.google.com/">Google</a></p>  
  
<h2>Relative URLs</h2>  
<p><a href="html_images.asp">Page in same folder</a></p> 
<p><a href="child-folder/page.asp">Page in sub folder</a></p> 
<p><a href="/root-folder/default.asp">Page in root folder</a></p>
<p><a href="../html_images.asp">Page in parent folder</a></p>

To use an image as a link, just put the <img> tag inside the <a> tag

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Use mailto: inside the href attribute to create a link that opens the user's email program to let them send a new email

<a href="mailto:someone@example.com">Send email</a>

  • The title attribute specifies extra information about an element.
  • The information is most often shown as a tooltip text when the mouse moves over the element.

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Bookmarks

  • HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
  • Bookmarks can be useful if a web page is very long.
  • When the link is clicked, the page will scroll down or up to the location with the bookmark.

Create bookmark/Fragment <h2 id="html">Html</h2>

Link to bookmark <a href="#html">Html Tutorials</a>

Jump to top of the Page <a href="#">Top of page</a>

Download file

<a href="html.pdf" download>Html Pdf</a>

Previous
Next