Html Tutorial For Beginners Part 3

Html Tutorial For Beginners Part 3

In this post you'll learn how connect your page to External or Internal content or pages via anchor element

ยท

1 min read

You can use a(anchor) elements to link to content outside of your web page. aelements need a destination web address called an hrefattribute. They also need anchor text. Here's an example:

<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>

Then your browser will display the text this links to freecodecamp.org as a link you can click and that link will take you to the web address freecodecamp.org

Task

Create an a element that links freecatphotoapp.com and has cat photos as its anchor text.

Solution

<a href="https://www.freecatphotoapp.com">cat photos</a>

Note we can also send email and call someone via anchor element.

Examples

<!--sending email via anchor element-->
<a href="mailto:ahmad@gmail.com">Email us</a>
<!--call someone via anchor element-->
<a href="tel:009078654325">contact us</a>

Tips

Anchor element has some attributes that I wanna mention them here:

  • target
  • download

target attribute takes two or three parameters I am not sure ๐Ÿ’ฏ

Examples

<!-- _blank parameter opens a new tab in browser window-->
<a href="https://www.unsplash.com" target="_blank">Go to unsplash</a>
<!-- doesn't open a new tab -->
<a href="https://www.unsplash.com" target="parent">Go to unsplash</a>

If you want to download a file include download attribute like target. Please like and share