You've been designing your site and have figured out that a page can be as long as necessary. This is great, but it can be a pain when you're dealing with longer pages. Help out your visitors by providing links that quickly take them to specific locations on the page. To do this, you're going to create a target and a link. Show
TargetThe first step is to set a target. The target is the place on the page where you want the user to jump to. Position your cursor on the page where you want the target to go, and then go to Insert > Target. In the window that appears, type the name of your target. For the sake of clarity, you should name it something intuitive. For instance, if your page contains a list of employee profiles, and you want the anchor to jump to John Smith's profile, you should name the anchor something like jsmith. You can also manually enter the code for a target in the Code Editor: Targetname is the name of your target. LinkThe next step is to create a link to the target you just set. To do this, position your cursor on the page where you would like the link to appear, and then go to Insert > Link. In the window that appears, enter the text you would like to appear as a link, and in the URL Field, enter #targetname, where targetname is the name of your target. In our example, we would enter #jsmith. You can also opt to type this code into the Code Editor: Targetname should match the name you gave the target, and you should replace Your Link Text with whatever text you want your visitors to click. To continue the example we gave above, our code would look something like this: The Content within each This element's attributes include the global attributes. Causes the browser to treat the linked URL as a
download. Can be used with or without a value: Note: href The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:
hreflang Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as
the global ping A space-separated list of URLs. When the link is followed, the browser will send referrerpolicy How much of the referrer to send when following the link.
rel The relationship of the linked URL as space-separated link types. target Where to display the linked URL, as
the name for a browsing context (a tab, window, or
Note: Setting type Hints at the linked URL's format with a MIME type. No built-in functionality. Deprecated attributes
Hinted at the character encoding of the linked URL. Note: This attribute is deprecated and should not be used by authors. Use the HTTP coords DeprecatedUsed with the name DeprecatedWas required to define a possible target location in a page. In HTML 4.01, Note: Use the global attribute
rev DeprecatedSpecified a reverse link; the opposite of
the shape DeprecatedThe shape of the hyperlink's region in an image map. Note: Use the
Properties
ExamplesLinking to an absolute URLHTML
ResultLinking to relative URLsHTML
ResultLinking to an element on the same page
Linking to an email addressTo
create links that open in the user's email program to let them send a new message, use the
For details about Linking to telephone numbers
See RFC 3966 for syntax, additional features, and other details about the Using the download attribute to save a <canvas> as a PNGTo save a Example painting app with save linkHTML
CSS
JavaScript
ResultSecurity and privacy
Using
AccessibilityStrong link textThe content inside a link should indicate where the link goes, even out of context. Inaccessible, weak link textA sadly common mistake is to only link the words "click here" or "here":
Strong link textLuckily, this is an easy fix, and it's actually shorter than the inaccessible version!
Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages. onclick eventsAnchor elements are often abused as fake buttons by setting their These bogus Use a External links and linking to non-HTML resourcesLinks that open in a new tab/window via People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior. Link that opens a new tab/window
Link to a non-HTML resource
If an icon is used to signify link behavior, make sure it has alt text:
Skip linksA skip link is a link placed as early as possible in
Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation. Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.
Size and proximitySizeInteractive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended. Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.
ProximityInteractive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content. Spacing may be created using CSS properties like
Specifications
Browser compatibilityBCD tables only load in the browser See also
Which tag of HTML is used to link from one page to another?The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
Which link allows you to go from one part of the same page to another?An anchor link is a link, which allows the users to flow through a website page. It helps to scroll and skim-read easily. A named anchor can be used to link to a different part of the same page (like quickly navigating) or to a specific section of another page.
What is href in HTML example?Definition and Usage
The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag will not be a hyperlink. Tip: You can use href="#top" or href="#" to link to the top of the current page!
|