💻
HTML/CSS
  • Overview
  • How the Web Works
    • DNS, TCP/IP, HTTP, HTML
    • Anatomy of a Web Page
    • How a Web Page Gets Loaded
  • HTML/CSS intro
    • HTML
      • Boilerplate HTML
      • HTML Hierarchy
      • Meta Section
      • Text-formatting Elements
      • Image
      • Video
      • Anchor
      • Tables
      • Semantic Elements
    • CSS
      • Properties
      • Selectors
      • Box-Model
      • Block vs Inline
      • The Cascade
    • Layout
      • Container Elements
      • Grid vs Flexbox
      • Flexbox
      • Grid
  • Miscellaneous Topics
    • Background Image
    • Border-radius
    • Box-shadow
    • Centering Elements
    • Colors
    • Custom Properties
    • Forms
    • Typography
    • Units
  • Appendix
    • Google Fonts
    • Lorem Ipsum
    • HTML Cheatsheet
    • CSS Cheatsheet
    • Browser Support for HTML/CSS
    • unsplash.com (free images)
    • pexels.com (free images)
    • Chrome Default Stylesheet
  • Further Learning Resources
    • FE Mentor Challenges
    • Free Scrimba Courses
    • Kevin Powell Youtube
Powered by GitBook
On this page

Was this helpful?

  1. HTML/CSS intro
  2. HTML

Anchor

The anchor element is primarily used for hyper-links, usually referred to as links, to other HTML documents. There are different types of document hyper-links.

Attribute

Description

A link within or between documents

href

The value of the href attribute can be the URL of another page within the site, or a remote site. Or it can be the id of an element within the current page.

target

The value of "_blank" opens the linked to page in a new window.

title

The browser may show this as a tooltip when the user hovers over the link.

External Pages (Absolute URL): The URL assigned to the href attribute is an absolute URL, or the entire path to the remote resource. These are used to navigate to an external site.

Set the attribute target="_blank" to have the target web page launch in a new browser tab instead of replacing the contents of the current tab.

<a href="http://www.google.com" target="_blank">Google</a>

Internal Site Pages (Relative URL): The URL assigned to the href attribute is a relative URL, meaning that is is a path relative to the current web page that contains the hyper-link. It is used to link to another page within your site.

<!-- .. indicates one level up -->
<a href="../page1.html">Page 1</a>

<!-- same folder -->
<a href="page2.html">Page 2</a>

<!-- down into subDir folder -->
<a href="subDir/page3.html">Page 3</a>

Internal Page Reference (within the same page): The anchor element can specify a special href syntax to indicate that the hyper-link is to a different location in the current document. The target location must be an element with an attribute named id that uniquely identifies the element. The anchor's href attribute value must be of the form "#[id-of-target-element]".

<a href="#section1">Section 1</a>

<!-- Lots of other stuff here -->
<section id="section1">
    <p>This is section 1</p>
</section>
PreviousVideoNextTables

Last updated 3 years ago

Was this helpful?