Blog

Creating hyperlinks with a

Creating hyperlinks with a

In HTML5 web page blog post design, anchor <a> tag is used to create hyperlink text, images, audio, video, documents, and many other types of web page links. Which is helpful for web, internet user to move from single page to multiple web pages in the website through normal links, text links, and many other types of internal and external links and to navigate and surf the web content easily. All website content and information web pages available on the World-Wide Internet are linked from one page to another through hyperlinks.

Creating hyperlinks with a

Hyperlink tag basic syntax in HTML5.

<a href=”URL”>Hyperlink Text Info</a>

Hyperlink tag Attributes.

  • Anchor href attribute – In HTML5 web page, that link web page or website URL link is indicated or defined, to which the web text is hyperlinked.
  • Anchor link text – In HTML5 web page, clicking on the link or text information given with anchor <a> tag accesses or opens the defined link.

Usage of the anchor <a> tag in HTML5.

Basic hyperlink tag syntax.

<a href=”https://www.vcanhelpsu.com”>Open Vcanhelpsu</a>

In the above basic hyperlink tag, a hyperlink named vachanhelpsu.com has been created, on clicking which, on clicking the “Open Vcanhelpsu” text, the https://www.vcanhelpsu.com website will open.

Link to a specific section on the same page in HTML5 web page.

In HTML5 web page, first of all, you have to create a blog post article which is quite long or has more than one paragraph block section. After this, the link is moved immediately to the blog section using id attributes.

<h2 id=”section1″>Section Link</h2>

<h2 id=”html”>Html</h2>

<h2 id=”javascript”>Javascript</h2>

Now create individual section links in the hyperlink section above.

<a href=”#section1″>Move On Section1</a>

<a href=”#java”>Java</a>

<a href=”#php”>Php</a>

Clicking on the above section link will move you to the element with id=”section1″ in the same web page.

Open the hyperlink in a new tab or window in a web browser.

_blank Attributes – Open the desired web page link URL in HTML5 web page with blank page tab attributes.

<a href=”https://www.vcanhelpsu.com” target=”_blank”>Open Vcanhelpsu.com</a>

The above link will open in a new blank web browser tab or window.

Create an HTML5 email link.

If you want to create an email link in your HTML5 web page, then you can use mailto email attribute in your HTML5 web page. This attribute opens the link with the email account when the user clicks on it.

<a href=”mailto:vcanhelpsu@gmail.com”>Email Us</a>

By clicking on the above link, the internet user will open the existing vcanhelpsu@gmail.com with the email client configured in his web computer or online mail client and you can now write a new email on this mail.

Create an HTML5 telephone link.

If you want to create a telephone link in your HTML5 web page, then create a phone link by entering the telephone number with ahref tel attributes.

<a href=”tel: +111122223334444″>You Can Call Us </a>

Clicking on the above telephone link will open the related app or software in your computer device to make a phone call to +111122223334444.

Link to a file in an HTML5 web page.

Create a file download link in an HTML5 web page.

<a href=”/files/result.pdf” download>Download Result PDF</a>

Here if you click on Download Result PDF in the above link, the result PDF file will be downloaded to the client computer.

Link to image in HTML5 web page.

Insert image with hyperlink in HTML5 web page.

<img src=”car.png” alt=”car image”>

Attributes of the anchor <a> tag.

  • href attributes – Displays the link website URL information in the web page image.
  • target attributes – How and where to open the linked page website URL.

Image link attributes.

  • _blank – Open image object in new tab and window order.
  • _self – Open web page image object in new default, same frame/tab.
  • _parent – Open web page image in parent frame.
  • _top – Open web page image in complete window.
  • rel – Relative attributes provide you with link information between the current web page document and the linked web page document.
  • noopener – Restricts the current page from opening the new page to the parent page’s window object)
  • noreferrer – Restricts the web browser from sending referrer headers in the web page.
  • nofollow – This indicates that the current link is not meant for search engines to follow.
  • download – The download attributes guide the web browser that the targeted link should be downloaded to the client system, not navigated to by the user.
  • type – Defines the MIME type nature of Internet resources linked in the current web page.

HTML5 anchor link attributes example.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Html 5 Link Attributes </title>

</head>

<body>

    <h1 align=center>Lets Tray Some Anchor Link Attributes In Html Web Page </h1>

    <p>Tray Blank Anchor Link Attributes – <a href=”https://www.vcanhelpsu.com” target=”_blank” rel=”noopener”>Open Vcanhelpsu Website</a></p>

    <p>Move On Section 1 Text – <a href=”#hyperlink”>Hyperlink</a></p>

    <p>Move On Section 1 Text – <a href=”#html”>Html</a></p>

    <p>Create Email Link – <a href=”mailto:vcanhelpsu@gmail.com”>Opne Vcanhelpsu For Email</a>. </p>

    <p>Create Telephone Link – <a href=”tel:+111222333444″>+111222333444</a>.</p>

    <p>Download Result Pdf – <a href=”/files/Result.pdf”>Download PDF</a></p>

    <a href=”https://www.vcanhelpsu.com”>

        <img src=”image.png” alt=”simple image”>

    </a>

    <h2 id=”hyperlink”>Hyperlink</h2>

    <h2 id=”html”>Html</h2>

</body>

</html>

Related posts:

  1. Hyperlinks () html tag
  2. Linking to sections within the same page html
  3. Attributes: href, target, title html tag
  4. Lists: ul, ol, li