<\/span>Anchor Text<\/span><\/h3>\nAnchor text is the clickable text of your link. It\u2019s the words users actually see and click on. It plays a crucial role in both user experience and SEO.<\/p>\n
Good anchor text clearly tells users what to expect when they click a link. It also provided<\/p>\n
Here\u2019s an example of poor anchor text:<\/p>\n
<a href=\"https:\/\/example.com\/pricing\">Click here<\/a><\/pre>\nAnd here\u2019s an example of good, descriptive anchor text:<\/p>\n
<a href=\"https:\/\/example.com\/pricing\">View our pricing plans<\/a><\/pre>\nThe second example gives users (and search engines) clear information about where the link will take them.<\/p>\n
When writing anchor text, follow these guidelines:<\/p>\n
\n- Make it descriptive and relevant to the destination<\/li>\n
- Keep it concise (typically 2-5 words)<\/li>\n
- Avoid generic phrases like \u201cclick here\u201d or \u201cread more\u201d<\/li>\n
- Use keywords naturally, but don\u2019t stuff them in<\/li>\n<\/ul>\n
<\/span>Title Attributes<\/span><\/h3>\nThere\u2019s also a \u201ctitle\u201d attribute you can add to links. But you generally don\u2019t need this if you use descriptive anchor text.<\/p>\n
In fact, using it can reduce readability and accessibility if it just repeats the anchor text. Screen readers usually won\u2019t read it out, and users hovering over the link will see a tooltip that may just block other content on the screen. Plus, it won\u2019t display on mobile devices at all.<\/p>\n
So, unless you can meaningfully add important information about the link, don\u2019t use the title attribute. And instead just make your anchor text descriptive.<\/p>\n
<\/span>Aria Labels<\/span><\/h3>\nARIA (Accessible Rich Internet Applications) labels enhance accessibility by providing additional context for screen readers and other assistive technologies.<\/p>\n
The aria-label attribute provides an accessible name for a link when the visible text isn\u2019t descriptive enough, or for links over icons rather than text:<\/p>\n
<a href=\"https:\/\/yourdomain.com\/settings\" aria-label=\"Go to settings\">\r\n\u00a0\u00a0<svg><!-- settings icon --><\/svg>\r\n<\/a><\/pre>\nIn this example, a screen reader would announce \u201cGo to settings\u201d but the site would only visually display a settings icon.<\/p>\n
<\/span>Target<\/span><\/h3>\nThe target attribute determines how your link opens when a user clicks on it.<\/p>\n
The default link behavior opens the link in the same tab (i.e., you go from the current page to the linked page).<\/p>\n
The default value is \u201c_self\u201d but you don\u2019t need to specify that.<\/p>\n
If you want to open the link in a new tab, use the \u201c_blank\u201d target value:<\/p>\n
<a href=\"https:\/\/example.com\" target=\"_blank\">Example<\/a><\/pre>\nYou used to need to add rel=\u201cnoopener\u201d to links with a blank target value for security reasons. But you no longer need to do this. (More on noopener below.)<\/p>\n
Opening your link in a new tab is particularly useful when:<\/p>\n
\n- Linking to external websites<\/li>\n
- Providing reference material that users might want to check while staying on your page<\/li>\n
- Linking to downloads or resources that would disrupt the user\u2019s current activity<\/li>\n<\/ul>\n