The <a> Element
The <a> element (“anchor”) is used to create a clickable link to another location.
There are four varieties of links:
- External link – to a web page outside our own website.
- Internal link – to another web page on our own website.
- Bookmark link – to a specific position within the current web page.
- Email link – to automatically start a new email message.
Attributes add information to an element and often control how an element is displayed on the page. Here is the <a> element with two attributes defined:Each element has its own set of attributes available. Usually these attributes are optional, but in some cases they are mandatory. As in this example, an element can have multiple attributes applied to it at the same time.
Attribute names must be in lowercase and attribute values must be enclosed in quotes.
Using the <a> Element
Whatever text is placed between the <a> and </a> tags will display on the web page and become a clickable link. This is often referred to as anchor text:The target attribute is optional and controls how the linked page will be displayed in the browser. If omitted, the new page will load in the existing browser window. If target=”_blank” is specified, the linked page will open up and display in a new browser tab or window.
The code we just used is an example of an external link. If clicked, it will take the visitor to a website external from our own site. In this case, the user will go to Google’s home page:Remember, attribute names must be in lowercase and attribute values must be enclosed in quotes.
To create an internal link to another page on our site, we use the same format but just type the file name directly into the href attribute:Internal links like these are how we build a navigation menu to allow our visitors to move from page to page on our site.
A bookmark link is a link to another location within the existing web page.The destination anchor does not have to come after the link anchor and can be located anywhere on the page. Bookmark links like these are most commonly used to build a clickable table of contents within a page.
To create a link that automatically starts a new email message, we use mailto: in the href attribute instead of a web page address:When the link is clicked, the visitor’s default email application is launched and a new message created. The destination email address is required.
We can add personal comments throughout our web pages. These will not appear on our live web pages. Some typical reasons to add comments are:
- To make notes to ourselves explaining the purpose of certain lines of code.
- To indicate to fellow team members where future changes or improvements will go.
- To inform future programmers about how the page works and of any known pitfalls with modifying content.
Memory fades over time and it can be a time-consuming chore to “get back up to speed” on a page written months or years ago. Comments can make things much easier.
Comment SyntaxThe browser will consider everything between the <!– and the –> as part of the comment and will therefore disregard it. Comments can span multiple lines, as line breaks and spaces make no difference.
WARNING: Be careful what you write! Although comments are not displayed on the live web page, they are still in the web document and can be seen by any user who knows how to view the original source code of a website.