Html links hyperlinks

There is a lot to know about links và buttons in HTML. There is markup implementation & related attributes, styling best practices, things lớn avoid, and the even-more-nuanced cousins of the link: buttons and button-lượt thích inputs.

Bạn đang xem: Html links hyperlinks

Let’s take a look at the whole world of link and buttons, and all the considerations at the HTML, CSS, JavaScript, thiết kế, và accessibility layers that come with them. There are plenty of pitfalls and bad practices khổng lồ avoid along the way. By covering it, we’ll have sầu a complete good UX implementation of both elements.


Quick guidelines on when to lớn use each:

Are you making a JavaScript-powered clickable action? Use a button (button)Are you submitting a form? Use a submit input ()

Links

Links are one of the most basic, yet deeply fundamental và foundational building blocks of the website. Click a links, và you move to another page or are moved to lớn another place within the same page.

Table of Contents

HTML implementation

A basic linkobatambeienwasirherbal.comThat’s a liên kết to a “fully qualified” or “absolute” URL.

A relative sầu linkYou can liên kết “relatively” as well:

AboutThat can be useful, for example, in development where the tên miền name is likely lớn be different than the production site, but you still want khổng lồ be able to lớn clichồng links. Relative URLs are most useful for things lượt thích navigation, but be careful of using them within nội dung — like blog posts — where that nội dung may be read off-site, lượt thích in an tiện ích or RSS feed.

A jump linkLinks can also be “hash links” or “jump links” by starting with a #:

Section TwoClicking that links will “jump” (scroll) lớn the first element in the DOM with an ID that matches, lượt thích the section element above.

💥 Little trick: Using a hash link (e.g. #0) in development can be useful so you can clichồng the links without being sent back to lớn the top of the page lượt thích a cliông xã on a # link does. But careful, liên kết that don’t liên kết anywhere should never make it to production.

💥 Little trick: Jump-link can sometimes benefit from smooth scrolling to help people underst& that the page is moving from one place to lớn another.

It’s a fairly comtháng UI/UX thing to see a “Back to lớn top” liên kết on sites, particularly where important navigational controls are at the top but there is quite a bit of content lớn scroll (or otherwise navigate) through. To create a jump links, links to lớn the ID of an element that is at the top of the page where it makes sense to lớn skết thúc focus baông chồng to.

Baông xã to lớn TopJump link are sometimes also used khổng lồ link to lớn other anchor () elements that have sầu no href attribute. Those are called “placeholder” links:

Section 2

There are accessibility considerations of these, but overall they are acceptable.

Disabled linksA liên kết without an href attribute is the only practical way to lớn disable a link. Why disable a link? Perhaps it’s a links that only becomes active after logging in or signing up.

a:not() /* style a "disabled" links */When a liên kết has no href, it has no role, no focusability, và no keyboard events. This is intentional. You could think of it like a .

Do you need the liên kết lớn open in a new window or tab?You can use the target attribute for that, but it is strongly discouraged.

obatambeienwasirherbal.comThe bit that makes it work is target="_blank", but note the extra rel attribute và values there which make it safer & faster.

Making liên kết open in new tabs is a major UX discussion. We have sầu a whole article about when khổng lồ use it here. Summarized:

Don’t use it:

Because you or your client prefer it personally.Because you’re trying to lớn beef up your time on site metric.Because you’re distinguishing between internal và external liên kết or content types.Because it’s your way out of dealing with infinite scroll trickiness.

Xem thêm: Bí Quyết Hẹn Hò Với Nàng Nhất Định Phải Biết!, 6 Quy Tắc Thông Minh Bạn Cần Khi Hẹn Hò

Do use it:

Because a user is doing something on the current page, like actively playing truyền thông media or has unsaved work.You have some obscure technical reason where you are forced to lớn (even then you’re still probably the rule, not the exception).

Need the liên kết khổng lồ trigger a download?The tải về attribute on a liên kết will instruct the browser lớn download the linked tệp tin rather than opening it within the current page/tab. It’s a nice UX touch.

Download PDFThe rel attributeThis attribute is for the relationship of the links to the target.

The rel attribute is also commonly used on the element (which is not used for creating hyperliên kết, but for things lượt thích including CSS và preloading). We’re not including rel values for the element here, just anchor liên kết.

Here are some basic examples:

NextPreviouscc by 2.0All Topicsrel="alternate": Alternate version of the document.rel="author": Author of the document.rel="help": A resource for help with the document.rel="license": License & legal information.rel="manifest": Web App Manifest document.rel="next": Next document in the series.rel="prev": Previous document in the series.rel="search": A document meant to perkhung a search in the current document.There are also some rel attributes specifically lớn inkhung search engines:

rel="sponsored": Mark link that are advertisements or paid placements (commonly called paid links) as sponsored.rel="ugc": For not-particularly-trusted user-generated nội dung, lượt thích comments và forums posts.rel="nofollow": Tell the search engine khổng lồ ignore this và not associate this site with where this links to.

And also some rel attributes that are most security-focused:

rel="noreferrer": Prsự kiện other sites or tracking services (e.g. Google Analytics) from identifying your page as the source of clicked link.

You can use multiple space-separated values if you need to (e.g. rel="noopener noreferrer")

And finally, some rel attributes come from the microformats standard or the indieweb like:

rel="directory": Indicates that the destination of the hyperlink is a directory listing containing an entry for the current page.rel="tag": Indicates that the destination of that hyperlinks is an author-designated “tag” (or keyword/subject) for the current page.rel="payment": Indicates that the destination of that hyperlinks provides a way khổng lồ show or give tư vấn for the current page.rel="help": States that the resource linked to is a help tệp tin or FAQ for the current document.rel="me": Indicates that its destination represents the same person or entity as the current page.

ARIA rolesThe default role of a link is links, so you do not need to lớn do:

LinkYou’d only need that if you were faking a links, which would be a weird/rare thing to lớn ever need lớn bởi, & you’d have sầu to lớn use some JavaScript in addition to this to lớn make it actually follow the liên kết.

Fake accessible liên kết created using a spanJust looking above you can see how much extra work faking a links is, and that is before you consider that is breaks right-clicking, doesn’t allow opening in a new tab, doesn’t work with Windows High Contrast Mode và other reader modes and assistive sầu công nghệ. Pretty bad!

A useful ARIA role to lớn indicate the current page, like:

HomeContactAbout/a>Should you use the title attribute?Probably not. Save sầu this for giving an iframe a short, descriptive sầu title.

List of Concertstitle provides a hover-triggered UI popup showing the text you wrote. You can’t style it, và it’s not really that accessible.

Hover-triggered is the key phrase here. It’s unusable on any touch-only device. If a link needs more contextual information, provide that in actual content around the link, or use descriptive text the link itself (as opposed lớn something lượt thích “Cliông xã Here”).

Icon-only linksIf a liên kết only has an icon inside it, like:

😃 ... That isn’t enough contextual information about the link, particularly for accessibility reasons, but potentially for anytoàn thân. Links with text are almost always more clear. If you absolutely can’t use text, you can use a pattern like:

... Useful links textvisually-hidden is a class used khổng lồ visually hide the label text with CSS:

.visually-hidden border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;Unlượt thích aria-label, visually hidden text can be translated & will hold up better in specialized browsing modes.

Links around imagesImages can be liên kết if you wrap them in a liên kết. There is no need to use the alt text to lớn say the image is a links, as assistive technology will do that already.

*
Links around bigger chunks of contentYou can link a whole area of nội dung, like: