How to Create Page Links (HTML) Tutorial
Links are a fundamental part of the web. They are in fact what makes the web a web. Links allow the reader to :
- Move from one section of a web page to another section of the page.
- Move to a new web page altogether.
- Go to another website.
Figure linking in a page and between pages
In order to make a link you require two things:
- The starting point of of the link.
- The destination of the link.
The start of the link is called the hotspot and it shows up in the browser as underlined and in normally in blue until it has been clicked, but the link colour can be determined by the designer.
HTML Anchor Tags
The link is designated in HTML by use of the anchor tags <A></A>.
The text that appears highlighted/underlined or otherwise designated as the link is called the anchor text and is very important from an SEO perspective.
Here is a the HTML code for a link, the anchor text is shown highlighted in Yellow.
The destination of the link can be either:
A web page within the same site (internal link) or another site (external link) and/or a particular location in a web page (called a named anchor or bookmark).
The ability to link to a specific location within a web page is particularly useful when dealing with large web pages.
Named Anchor or Bookmark
To link to a particular area on a page you need a way of identifying that area. This is done using the name tag or the css( cascading style sheet) id attribute
name attribute
<a name="anchor">this is the bit of destination text </a>
or the id attribute
<h1 id="anchor">this is the bit of destination text </a>
Here is a page (opens new window) that illustrates the use and should make them clearer.
Absolute, Relative, Internal and External Website Links
There are several different link types. Internal links are links to other web pages on your website.
Internal Links can be either relative or absolute. External links are links to pages on the other websites and can only be absolute links.
Example links and associated HTML code
Relative:
Relative links are relative to the current position on the webpage within a website, and are only possible within the same site
Link to home page this is a relative link
link to top of this page this is a relative link to a bookmark called links.
HTML for the above links:
<a href="index.htm">Link to home page</a> this is a relative link <a href="#Links">link to top of this page</a> this is a relative link to a bookmark called links |
You should notice that the domain name of the site is missing on relative links!
Absolute links:
Link to home page absolute link
link to top of this page absolute link to a bookmark
External link to another web site this is an absolute external link to a page on another web site
HTML for the above links:
| <a href="http://www.build-your-website.co.uk/index.htm">Link to home page</a> absolute link <a href="http://www.build-your-website.co.uk/links.htm#Links">link to top of this page</a> absolute link to a bookmark <a href="http://www.oeupdates.com/index.htm">link to another web site</a> this is an absolute link to a page on another web site |
You should notice that the domain name of the site is present on absolute links!
Links and URLs
When viewing the HTML for the link in the above examples you probably recognised the website name and the page name as part of the link. But that was only part of the link and not all links look like that.The link is in fact a URL (Uniform resource locator) and can be used not just for reading web pages but for email, newsgroup access etc.
URLs allow access to all kind of resources on the web. So what is a URL? .
Links and Search Engines
Search engines find new content/website on the web by following links on sites that they already know about.
Getting links from other sites is an important aspect of getting into the search engine index and getting a good ranking. Who links to you and how they link is important.
Related Articles: