HTML Links
Jakob Jenkov |
HTML's <a> element is used to create clickable links to locations either inside the same HTML page, or an external page. When the link is clicked, the browser jumps to the new location. The <a> elements name is short for "anchor".
Basic Links
The basic structure of a link element looks like this:
<a href="http://jenkov.com">Jakob Jenkov's tutorial website</a>
Here is how the link looks in the browser:
Jakob Jenkov's tutorial website
As you can see, the text inside the <a> element body is used as the clickable link text.
When the link is clicked the browser changes location to the URL listed inside the href
attribute value. In the example above, this URL is http://tutorials.jenkov.com .
Relative Link URL's
It is possible to use relative URL's in the href attribute. A relative URL is a URL
that is relative to the URL of the page that contains the link. For instance, the URL of this page
is:
http://jenkov.com/tutorials/html4/links.html
If you use the relative URL
lists.html
on this page, it will be interpreted as being located within the same directory as the page containing the link. In other words, the browser will interpret the URL as:
http://jenkov.com/tutorials/html4/lists.html
Similarly, the relative URL
elements/a-sub-element.html
will be interpreted as:
http://jenkov.com/tutorial/html4/elements/a-sub-element.html
You can use two dots (..) to mark that you need to go a directory up. From there, you
can also go a directory down again (or more) if you want to. Hence, the relative URL
../html5/index.html
listed on this page will be interpreted as:
http://jenkov.com/tutorials/html5/introduction.html
Notice how the link part html4 has been replaced with html5 because
of how the dots (..) in the relative URL is interpreted.
Parameters in links
You can add parameters to a link URL, by adding a question mark (?) at the end of the URL, and add a parameter name, an equal sign and a parameter value. Here is an example:
?myParam=myValue
If you need to add more than one parameter, add an ampersand character (&) after each parameter value, before the parameter name and value of the next parameter. Here is an example:
?myParam=myValue¶m2=value2
Here is a full URL including parameters:
http://jenkov.com/tutorials/html4/links.html?myParam=myValue¶m2=value2
Parameters can be used by the page that you link to, if the page is generated dynamically. A static HTML page usually does not use parameters.
Fragments in Links
A link URL can contain a fragment. A fragment references a point inside the HTML page it links to. To be able to reference a fragment, you must first insert an anchor in the HTML page to reference. The anchor looks like this:
<a name="fragmentName"></a>
The value inside the name attribute should be unique within the HTML page that contains
the anchor. Otherwise the browser cannot know which of the anchors to jump to.
The anchor is referenced via the URL of a link, by adding #fragmentName (called a fragment)
at the end. For instance, if the URL of the page containing the anchor is
http://jenkov.com/tutorials/htm4/links.html
then you add the fragment name to the URL at the end, like this:
http://jenkov.com/tutorials/htm4/links.html#fragmentName
If you click a link with the URL above, the browser will jump to the page with the given URL,
and down into the HTML document to the anchor with the name fragmentName.
Link Target
By default the browser opens the page the link points to in the same browser window as
the page containing the link. If you want to open the page in a new window instead, you
can set the attribute target to the value _blank. Here is
an example:
<a href="http://jenkov.com" target="_blank" >
Jakob Jenkov's tutorial website
</a>
Here is the link as it looks in the browser. If you click it, the page will open in a new browser window.
Jakob Jenkov's tutorial website| Tweet | |
Jakob Jenkov | |
