Hyperlink

hyperlink = content + url

content = text, image...

<a href="url">content</a>

<a href="http://www.ifpb.edu.br/">ifpb</a>

Output:

ifpb

Server: Github ➡ IFPB

target blank

<a href="http://www.ifpb.edu.br/" target="_blank">ifpb</a>

Output:

ifpb

Absolute URL

Desktop

/
└── home
    └── username
        └── site
            └── pages
                ├── contact.html
                └── index.html

index.html

<a href="/home/username/site/pages/index.html">home</a>
<a href="file:///home/username/site/pages/index.html">home</a>

contact.html

<a href="/home/username/site/pages/contact.html">contact</a>
<a href="file:///home/username/site/pages/contact.html">contact</a>

Server

/
└── var
    └── www
        └── site
            └── pages
                ├── contact.html
                └── index.html

(/var/www/site/ = http://site.com/)

index.html

<a href="/var/www/site/pages/index.html">home</a> 👎
<a href="file:///var/www/site/pages/index.html">home</a> 👎
<a href="http://site.com/pages/index.html">home</a> (external)
<a href="http://site.com/pages/">home</a> (external)
<a href="/pages/index.html">home</a> (internal)
<a href="/pages/">home</a> (internal)

contact.html

<a href="/var/www/site/pages/contact.html">contact</a> 👎
<a href="file:///var/www/site/pages/contact.html">contact</a> 👎
<a href="http://site.com/pages/contact.html">contact</a> (external)
<a href="/pages/contact.html">contact</a> (internal)

index.html ➡︎ contact.html

(/var/www/site = http://site.com/)
/
└── var
    └── www
        └── site
            └── pages
                └── index.html

(/var/www/site = http://othersite.com/)
/
└── var
    └── www
        └── site
            └── pages
                └── contact.html

<a href="http://othersite.com/pages/contact.html">contact</a> (http)

Example

<a href="http://www.ifpb.edu.br">IFPB</a>
<a href="http://www.ifpb.edu.br/institucional/sobre-o-ifpb">Sobre o IFPB</a>
<a href="file://C:/WINDOWS/ifpb.png">Logo IFPB</a>
<a href="C:/WINDOWS/image.png">Logo IFPB</a>
<a href="ftp://ftp.gnu.org/pub/gnu/gimp.README">gimp.README</a>

Relative URL

index.html ➡︎ contact.html

/
└── var
    └── www
        └── site
            └── pages
                ├── contact.html
                └── index.html

<a href="contact.html">contact</a>
<a href="./contact.html">contact</a>

index.html ➡︎ contact.html

/
└── var
    └── www
        └── site
            ├── pages
            │   └── contact.html
            └── index.html

<a href="pages/contact.html">contact</a>
<a href="./pages/contact.html">contact</a>

index.html ➡︎ contact.html

/
└── var
    └── www
        └── site
            ├── pages
            │   └── html
            │       └── contact.html
            └── index.html

<a href="pages/html/contact.html">contact</a>
<a href="./pages/html/contact.html">contact</a>

index.html ➡︎ contact.html

/
└── var
    └── www
        └── site
            ├── pages
            │   └── contact.html
            └── public
                └── index.html

<a href="../pages/contact.html">contact</a>

index.html ➡︎ contact.html

/
└── var
    └── www
        └── site
            ├── pages
            │   └── contact.html
            └── public
                └── html
                    └── index.html

<a href="../../pages/contact.html">contact</a>

Example

<a href="home.html">home</a>
<a href="./home.html">home</a>
<a href="pages/home.html">home</a>
<a href="./pages/home.html">home</a>
<a href="../page/home.html">home</a>

URL#ID

Wikipedia Contents

<a href="https://en.wikipedia.org/wiki/HTML#History">HTML History</a>

Output:

HTML History

Example

<h1>Sumário</h1>

<ul>
  <li>Dolor ipsum</li>
  <li>Ipsum dolor</li>
</ul>

<h1>Dolor ipsum</h1>
<p>…</p>
<h1>Ipsum dolor</h1>
<p>…</p>

link-local/index.html:

<h1>Sumário</h1>

<ul>
  <li>
    <a href="#dolor_ipsum">Dolor ipsum</a>          
  </li>
  <li>
    <a href="#ipsum_dolor">Ipsum dolor</a>
  </li>
</ul>

<h1 id="dolor_ipsum">Dolor ipsum</h1>
<p>…</p>
<h1 id="ipsum_dolor">Ipsum dolor</h1>
<p>…</p>

<a target="_blank" href="mailto:cstsi@ifpb.edu.br">cstsi@ifpb.edu.br</a>
<a target="_blank" href="sms:83999999999">(83) 9.9999-9999</a>
<a target="_blank" href="tel:83999999999">(83) 9.9999-9999</a>
<a target="_blank" href="whatsapp://send?text=Solu%C3%A7%C3%A3o%20Tempor%C3%A1ria%20https%3A%2F%2Fvidadesuporte.com.br%2Fsuporte-a-serie%2Fsolucao-temporaria%2F">whatsapp</a>

References