Perhaps the most important aspect of HTML is the ability to link from one document to another. This is the basic concept underlying the web and without this functionality the World Wide Web would not exist.
Creating links is relatively straightforward, and the syntax provides a lot of flexibility in where and how links are applied.
To create a link, you’ll use the anchor element (<a>) to wrap the content you wish to convert to a link.
Attributes inside the anchor tag tell the browser where the page is linking to, or point to an external resource that the browser should download.
Take the following link example:
<a href="syntax.htm" title="learn more about syntax">HTML syntax</a>
Here the text “HTML syntax” would now appear as a clickable link. The href attribute tells the browser how to resolve the link — that is, where the user should be directed when the link is clicked. The optional title attribute provides a description of the link and is helpful in making the link more accessible.
These links contain the entire URL necessary to resolve a link, including the protocol. This is usually done for external links, which are links to pages outside of the current site. Here’s an example:
<a href="http://www.google.com" title="You can find it at google.com!">google.com</a>
These links are commonly used to navigate internally within a site. For example, if you were on the home page of your site and wanted to navigate to the contact page, you simply provide the path from the home page to the contact page.
<a href="contact.htm" title="our contact page">Contact us</a>
This assumes the contact page and the current page are in the same directory. If the contact page were located in a directory below the current page:
<a href="resources/contact.htm" title="our contact page">Contact us</a>
To move out of a directory, use ../:
<a href="../contact.htm" title="our contact page">Contact us</a>
These are similar to document relative links, but start at the root folder for the site and then move down through directories to the desired page.
Unlike document relative links, site-root relative links are written the same no matter the current location within your site.
All links are preceded by a forward slash (/) that refers to the root directory. Example:
<a href="/contact.htm" title="our contact page">Contact us</a>
If the contact page were deeper within the site:
<a href="/resources/contact.htm" title="our contact page">Contact us</a>
Occasionally you’ll want a link to refer to a specific location within a page. This can be done using a special kind of link called a fragment identifier. These links point to elements