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