0% found this document useful (0 votes)
36 views4 pages

HTML Links and Hyperlink Syntax

HTML links allow users to navigate between web pages. Links are defined using the <a> tag with an href attribute specifying the URL. Links can be text, images, or other HTML elements. By default, unvisited links are blue and underlined while visited links are purple, but these colors can be customized with CSS. The target attribute specifies where linked documents will open, such as in a new tab or the same window. Images can also act as links when placed within an <a> tag. Bookmarks allow internal links within long pages using the id attribute and href links.

Uploaded by

62. Login
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
36 views4 pages

HTML Links and Hyperlink Syntax

HTML links allow users to navigate between web pages. Links are defined using the <a> tag with an href attribute specifying the URL. Links can be text, images, or other HTML elements. By default, unvisited links are blue and underlined while visited links are purple, but these colors can be customized with CSS. The target attribute specifies where linked documents will open, such as in a new tab or the same window. Images can also act as links when placed within an <a> tag. Bookmarks allow internal links within long pages using the id attribute and href links.

Uploaded by

62. Login
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to
page.

HTML Links - Hyperlinks


HTML links are hyperlinks.

You can click on a link and jump to another document.

Note: A link does not have to be text. It can be an image or any other HTML element.

HTML Links - Syntax


In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

Example

<a href="[Link] our HTML tutorial</a>

The href attribute specifies the destination address ([Link] of the


link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Note: Without a forward slash on subfolder addresses, you might generate two requests to the
server. Many servers will automatically add a forward slash to the address, and then create a
new request.

Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without
[Link]

Example

<a href="html_images.asp">HTML Images</a>

HTML Links - Colors


When you move the mouse over a link, two things will normally happen:

 The mouse arrow will turn into a little hand


 The color of the link element will change

By default, a link will appear like this (in all browsers):

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

You can change the default colors, by using styles:

Example

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>

HTML Links - The target Attribute


The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _blank - Opens the linked document in a new window or tab


 _self - Opens the linked document in the same window/tab as it was clicked (this is
default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window
 framename - Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

Example
<a href="[Link] target="_blank">Visit W3Schools!</a>

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the
frame:

Example

<a href="[Link] target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link


It is common to use images as links:

Example

<a href="[Link]">
  <img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the
image (when the image is a link).

HTML Links - Create a Bookmark


HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example
First, create a bookmark with the id attribute:

<h2 id="tips">Useful Tips Section</h2>

Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:

<a href="#tips">Visit the Useful Tips Section</a>

Or, add a link to the bookmark ("Useful Tips Section"), from another page:

Example
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked document
 Use the <img> element (inside <a>) to use an image as a link
 Use the id attribute (id="value") to define bookmarks in a page
 Use the href attribute (href="#value") to link to the bookmark

Common questions

Powered by AI

The `<a>` tag uses several attributes to control link behavior: `href` specifies the destination URL; `target` determines where to open the linked document (e.g., '_blank' opens in a new window/tab, '_self' is the default opening in the same window/tab, '_parent' in the parent frame, and '_top' in the full window body). These attributes alter the hyperlink's functionality by defining both the destination and how or where it is accessed .

Styling HTML links using CSS allows for customizing link appearance, thereby enhancing user interaction by making links visually distinct and more appealing. CSS styles can change link colors, backgrounds, or decorations based on their state (link, visited, hover, active), as shown in the example rule `a:hover {color:red; background-color:transparent; text-decoration:underline}` . Such customizations help users distinguish between different link states easily. Furthermore, proper CSS styling can improve accessibility by adding visual feedback necessary for users with visual impairments who rely on clear contrasts and focus indicators to navigate web pages effectively .

Images as links in HTML are used to create more visually appealing navigational elements compared to traditional text links. They can guide users to a desired page through an intuitive interface using graphical icons or buttons, improving the aesthetic appeal of a webpage. For instance, embedding an image in a link `<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"></a>` helps to engage users and enhance their navigation experience by making it interactive and visually stimulating, especially in comparison to pure text links. Additionally, CSS can be used to further tailor styles .

The `target` attribute in HTML links enhances web navigation by specifying where the linked document should be opened, thus controlling the user's browsing context. For instance, `_blank` opens the document in a new window or tab, allowing users to access linked content without losing their place on the current page, which is beneficial for keeping multiple pages visible simultaneously. `_self`, `_parent`, and `_top` help manage how a link is displayed within frames or the entire page, aiding in navigation strategies across complex web structures. However, overuse of `_blank` can clutter browswers with tabs and windows, potentially confusing users if not applied judiciously .

Absolute URLs include the full web address, beginning with 'http://www...' and specify a specific location on the web, such as `<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>` . Relative URLs are used for links within the same website and do not include the domain, for example `<a href="html_images.asp">HTML Images</a>`. Relative URLs are shorter and often used when linking to resources in the same site .

By default, an unvisited link is underlined and blue, a visited link is underlined and purple, and an active link is underlined and red. When hovering over a link, the mouse arrow typically changes to a hand, and the color changes . Using CSS, these colors can be customized: `a:link` for unvisited links, `a:visited` for visited links, `a:hover` for when the mouse hovers over the link, and `a:active` for active links. Colors and styles (e.g., text-decoration) can be modified through CSS .

HTML bookmarks facilitate navigation on long web pages by allowing users to jump to specific sections instantly, which improves usability by reducing scrolling time. The `id` attribute is used to create bookmarks, for example `<h2 id="tips">Useful Tips Section</h2>`. Links pointing to these bookmarks use the `href` attribute with a hash followed by the `id`, such as `<a href="#tips">Visit the Useful Tips Section</a>`. This functionality helps users quickly access information without manually searching or scrolling through extensive content .

The default mouse pointer behavior when interacting with a hyperlink is to transform from the arrow pointer into a pointing hand, which intuitively signals to the user that the element is clickable. This behavior, along with color changes upon hovering, contributes to user interface design by enhancing interactivity and providing a visual cue on actionable elements, thus improving navigation and user experience .

Using an image as a link in HTML necessitates addressing legacy issues such as the automatic display of borders around linked images in Internet Explorer 9 and earlier versions. Adding `border:0;` to the image style (e.g., `<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">`) removes this border, maintaining uniform visual design across browsers. The `border` property is crucial as it allows developers to control the aesthetic and ensure a consistent look, thus improving compatibility and user experience across different versions of Internet Explorer .

The absence of a forward slash in subfolder addresses can result in additional server requests because some servers automatically append a forward slash to such addresses before processing them. This action creates a new request when the server detects a missing slash, leading to potential inefficiencies as it requires redirect handling. For instance, a relative link without a trailing slash can trigger two requests—one for the incorrect path and another for the server-amended correct path—thus impacting server performance and loading times .

You might also like