HTML Anchors and Hyperlinks

Anchor and Hyperlinks

• Anchor tags commonly link separate webpages
• They also link different places within a single document
• Anchor tags can be used in tables of contents
• They also launch external applications

Hyperlink Parameters in HTML

• href specifies the destination address, either as an absolute or relative URL, or the name of an anchor
• An absolute URL represents the complete URL of a website such as http://example.com/
• A relative URL points to another directory or document within the same website, such as /about-us/ pointing to the "about-us" directory inside the root directory /
• Web servers typically return the index.html document if the document is not specified
• hreflang specifies the language of the linked resource
• The href attribute is required when using hreflang
• You should use language values from BCP 47 for HTML5 and RFC 1766 for HTML4 when using hreflang
• rel specifies the relationship between the current document and the linked one
• HTML5 values for rel must be defined in the specification or registered in the Microformats wiki.
• target specifies where to open the link, with values like _blank, _self, _parent, _top, and framename (deprecated)
• Forcing a specific target behavior can violate user control
• title specifies extra information about a link, often displayed as a tooltip on cursor hover and is usable with almost all HTML tags
• download specifies that the target will be downloaded when a user clicks the hyperlink, and the attribute's value will be the name of the downloaded file
• There are no restrictions on allowed values
• The browser automatically detects the correct file extension
• If the download value is omitted, the original filename is used

Linking to Another Site

• An anchor element <a> is used to create a basic link.
• <a href="http://example.com/">Link to example.com</a> will create a hyperlink to http://example.com/

Linking to an Anchor

• Anchors can be used to jump to specific tags on an HTML page.
• Tags can point to any element with an id attribute
• Anchors are useful for jumping to subsections of a page, often used with header tags.

Linking to an Anchor Example

• Example page page1.html structure

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

• To create quick-links to specific sections within a page, assign an id attribute to the topics

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

• Hyperlinks can be created in a table of contents.

<h1>Table of Contents</h1>
<a href='#Topic1'>Click to jump to the First Topic</a>
<a href='#Topic2'>Click to jump to the Second Topic</a>

• Anchors are attached to the webpage so you can link across sites by referencing the page and anchor name.
• <a href="page1.html#Topic1">look back in the First Topic</a> links to the anchor

Linking to a Page on the Same Site

• Relative paths can be used to link pages on the same website.
• <a href="/example">Text Here</a> links to the file example at the root directory / of the server.
• If the link is on http://example.com, <a href="/page">Text Here</a> and <a href="http://example.com/page">Text Here</a> both link to the page file at the root

Dailing a Number

• If the href attribute begins with tel:, the device will dial the number when clicked
• Works on mobile devices or computers/tablets running software like Skype or FaceTime
• <a href="tel:11234567890">Call us</a> will dial 11234567890
• Most devices and programs will prompt the user to confirm the number.

Opening Link in New Tab/Window

• The target attribute specifies where the link opens.
• <a href="example.com" target="_blank">Text Here</a> opens the link in a new tab or window, as per user preferences.
• Using target="_blank" grants the opening site partial access to the window.opener object via JavaScript
• The access allows changing the window.opener.location
• There is a risk of redirecting users to malware or phishing sites
• Use rel="noopener" to prevent sending the window.opener object with the request
• Firefox requires rel="noopener noreferrer" for maximum effect

Running Email Client

• If the href attribute starts with mailto:, clicking the link opens an email client.
• <a href="mailto:[email protected]">Send email</a> opens the email client and sets [email protected] as the recipient.

Email Client Usage

• Cc and Bcc recipients can be added to a mailto: link via <a href="mailto:[email protected][email protected]&[email protected]">Send email</a>
• Subject and body text can be populated with <a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>
• Clicking a mailto: link opens the default email client and may prompt the user to choose one.
• Not all options specified after the recipient's address are supported in all email clients.

HTML Lists

• HTML offers three types of lists including ordered, unordered, and description lists
• Ordered lists use ordinal sequences to indicate the order of list elements
• Unordered lists use symbols (like bullets) to list elements
• Description lists use indents to list elements with their children

Ordered Lists

• An ordered list is created with the <ol> tag.
• List items are created with the <li> tag.

<ol>
 <li>Item</li>
 <li>Another Item</li>
 <li>Yet Another Item</li>
</ol>

• The list is numbered by default

Changing Ordered List Numbers

• Ordered Lists can have their number style manually changed
• Use the start attribute to define the number with which a list begins
• Numbers increment by one as usual from the starting attribute

<ol start="3">
 <li>Item</li>
 <li>Some Other Item</li>
 <li>Yet Another Item</li>
</ol>

• Specific list items can have a defined number with the value attribute.
• Subsequent list items from a value will increment as normal, ignoring where the parent list was at.
• The numbering restarts at the value, even if the list was up to the value already.

<ol start="5">
 <li>Item</li>
 <li>Some Other Item</li>
 <li value="4">A Reset Item</li>
 <li>Another Item</li>
 <li>Yet Another Item</li>
</ol>

• The start and value attributes only work with numbers, even if the list style is set to letters or numerals

Reversing the Numerical Direction

• Numbering can be reversed by adding reversed in the <ol> tag

<ol reversed>
 <li>Item</li>
 <li>Some Other Item</li>
 <li value="4">A Reset Item</li>
 <li>Another Item</li>
 <li>Yet Another Item</li>
</ol>

• Reverse numbering is helpful for continually adding to a list with most recent items appearing first.

Numerical Styling of Ordered Lists

• The type of numeral used in ordered lists can be changed
• The available type values when using <ol> are

<ol type="1|a|A|i|I">

• 1: Decimal numbers (1, 2, 3, 4)
• a: Lowercase letters (a, b, c, d)
• A: Uppercase letters (A, B, C, D)
• i: Lowercase Roman numerals (i, ii, iii, iv)
• I: Uppercase Roman numerals (I, II, III, IV)

Unordered Lists

• An unordered list is created with the <ul> tag.
• List items are created with the <li> tag.

<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>

• The list is bulleted by default.
• You should use <ol> when the order of items is important, and <ul> when the order doesn't matter.

Nested Lists

• Lists can be nested to represent sub-items of a list item.

<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>sub-item 2.1</li>
<li>sub-item 2.2</li>
</ul>
</li>
<li>item 3</li>
</ul>

• Nested lists must be a child of a li element
• Combining different list types is possible

Description Lists

• Description lists, also known as definition lists prior to HTML5, use the <dl> element
• Uses name-value groups where the name is given in a dt element, while the value resides in a dd element.

<dl>
<dt>name 1</dt>
<dd>value for 1</dd>
<dt>name 2</dt>
<dd>value for 2</dd>
</dl>

• dt name-value groups include more than one name or value (alternatives)

<dl>
<dt>name 1</dt>
<dt>name 2</dt>
<dd>value for 1 and 2</dd>
<dt>name 3</dt>
<dd>value for 3</dd>
<dd>value for 3</dd>
</dl>