A link has two main parts - a destination and a label. The destination specifies where the link will take the user, such as to another page, section on the page, or a file download. The label is what the user sees, usually underlined text or an image. Links can be created to other pages using the <a> tag and href attribute pointing to the URL. Anchors can link to specific sections on the same page using the id attribute. Links can also target new windows, files, email addresses, and add keyboard shortcuts using the accesskey attribute.

1. LINKS
HTML5 & CSS Visual Quickstart Guide
Chapter 6

2. The Anatomy of a Link
• A link has 2 main parts
• Destination
• Specifies what will happen when visitor triggers/clicks the link
• Go to another page
• Jump within the page
• Show an image
• Download a file
• Label
• The part the visitor sees in browser or hears in screen reader
• Can be text
• Or image
• Or both
• Default: shown underlined and in blue

3. Creating a Link to Another Page
• <a href=“page.html”>Link</a>
• page.html is the URL of the destination web page
• Link is the label text, which will be highlighted (usually blue and
underlined)
• <a href=“http://www.google.com”>Google</a>

4. Creating Anchors
• These identify specific sections of the same page
• Useful for creating a clickable Table of Contents
• <h2 id=“anchorname”>Text</a>
• anchor name is the text you will use internally to identify that
section of the Web page
• Text is the words or images you wish to be referenced
• <h2 id=“descrip”>Description of the Main Characters</a>

5. Linking to a Specific Anchor
• Once you’ve created an anchor, you can link to it
• <a href=“#anchor name”>Link</a>
• anchor name is the value of the name attribute in the destination’s
a tag
• Link is the highlighted text
• The hash sign (#) is crucial here!
• <a href=“#descrip”>Description of the Main
Characters</a>
• If anchor is in a separate document, use <a
href=“page.html#anchorname”> to reference
• No space between the URL and the #
• This means you shouldn’t use spaces in your anchors!

6. Targeting Links to Specific Windows
• By default, link opens in same window
• Often useful to open link in a new window or tab
• Do this using target=“_blank”
• For example:
• <a href=“http://www.google.com” target=“_blank”>Google</a>

7. Creating Other Kinds of Links
• Can also link to files, FTP sites, newsgroups, and even
email addresses
• <a href=“http://www.site.com/path/file.ext”>File</a> would
link to a non-HTML file
• <a href=“ftp://ftp.site.com/path”>FTP Site</a> would link
to an FTP site
• <a href=“mailto:chokeonthis@sillyspambots.com”>Email address</a> would link
to an email address

8. Creating Keyboard Shortcuts for Links
• Do this using attribute of a tag called accesskey
• <a href=“gatetseng.html#woody”
accesskey=“w”>Woody</a> (Alt-W, Ctrl-W)
• Some gotchas:
• Keyboard shortcuts don’t work in Opera
• Unreliable in frames
• Don’t override keyboard shortcuts built into the browser—such as
Alt-F for accessing the File menu