HTML Guide, HTML Links and Anchors
Previous: HTML basic structure
The nature of Internet is to link many resources each to other. This include the web pages within one web site and the links between different web sites as well.
To link the web pages each to other, HTML uses a hyperlinks. To define hyperlink HTML uses ANCHOR tag <a>. An anchor tag can link to web page from the same web site, to web page located on different web site, to section within the same or different web page as well as to any other resource (picture, document, PDF, MP3, ZIP or other file) located and accessible via Internet.
An anchor tag have the following attributes:
href="url" - Internet resource to link to
example: <a href="http://www.topwebsite.info/">Link to Top Web Site Info</a>
where the text element will be displayed in the web page instead the url address
it will be shown like this Link to Top Web Site Info
title="Link Title" - the title will be shown when mouse cursor moves over the link (on hover)
example: <a title="Visit our web site" href="http://www.topwebsite.info/">Link to Top Web Site Info</a>
where the link will be displayed the same way as in the previous example, but will also show the title text when the mouse pointer stay over the link element text
move the cursor over the text link and wait a second Link to Top Web Site Info
target="destination" - defines where the link will be opened. It can be used with frames and to open the link in new browser window
example:
<a href="http://www.topwebsite.info/" target="_blank">Link to Top Web Site Info</a>
where the link will be displayed the same way as in the first example, but will open in new window Link to Top Web Site Info
name="anchor name" - define position located in the web page
can be accessed using hyperlink with #anchor_name added at the end of the URL
example:
(1) an anchor defined as <a name="end_of_page_anchor"></a> is placed at the end of the web page
(2) a second anchor is placed here<a name="anchor_is_here"></a>
(3) this hyperlink - Go to end of page - links to the end_of_page_anchor
its source code is <a href="#end_of_page_anchor">Go to end of page</a>
When no URL is specified, the hyperlink, links to an anchor located on the same page. This method is often used to create a table of contents at the beginning of long web pages.
Next: Meta tags in web page head
here is end_of_page_anchor location
(3.1) this hyperlink - Go back to the first anchor - links back to the anchor placed in point (2) above and its source code is:
<a title="Go back at point (2)" href="#anchor_is_here">Go back to the first anchor</a>
Top