Category: Basic coding

Posted on

Tutorial: Making Links in Content Management Systems

a.i. generative art of a glowing chain link

When working on the web as a website content administrator, you’ll probably use a content management system (CMS) or a newsletter automation system to create and update your content. Each system handles the creation of links differently. Nearly all WYSIWYG editors use the chain icon to indicate a ‘link’, however. (That’s “what you see is what you get” and is a common acronym from web-two, when anybody with internet could suddenly be a content creator.)

And you’ll always need to make links!

What types of links are there?

Internal = Relative path.  If you use the CMS’s internal method of finding a page within your own website; it usually starts with “/”, that’s a relative link. It’s ‘relative’ to the root domain.

External = Absolute path. When you go to the address bar of the browser and copy the entire address there and use the full URL in your link, that’s an absolute link.

Mail. Many CMS solutions have a special menu item for you to create an email link. Some do not. If you are trying to link an email address, and there isn’t a button there that says “email” you may simply need to know that you need to type in “mailto:” and then the full email address. Always test mail links after you publish the page to see if it opens an Outlook compose window, or at least offers to choose an email client for you. More about mailto links from CSS Tricks.

Document. You can’t link to a document that lives on your computer. It must have a URL so that your visitors can also access that document. Some systems require you to first upload to a media library, then highlight the link text and point to the new document. Some allow you to skip that extra step and combine uploading and linking to a document.

In regards to your document filenames, try and remember to change spaces to hyphens and remove extra periods or parentheses or the ampersand from anything you’re going to upload into a CMS.

Anchor Links. These are also called jumplinks. They take you to a different point on the same page. You first need access to the code view so you can insert an ID attribute. If you can’t get to the code view, try and see if your system has an anchor link option. For instance, here is a Shopify anchor link tutorial. Also, here is WordPress documentation for how to make an anchor link. (I found this after I recorded the video. I opened the Block Advanced pane in the post editor and found the link to this documentation there. You can pre-set the HTML Anchor on the headline of your choice, and then when you create the jumplink, the WYSIWYG will offer the ID tag for you to choose.)

The ever-helpful “Back to Top” links on long articles are anchor links. There would be an ID called “#top” set near the H1 on the page content, then you could add your own back to top links if the article is getting long. Like this one. But I’m not going to.

Telephone Links. These are usually the click-to-call buttons that work on smartphones. To make a link that places a call, you’ll need to start it with “tel:+1” and the phone number.

Parts of a link

The words you highlight to turn into a hyperlink are called ‘link text.’ The place where you point the link to is called the ‘link destination.’ Your link text can span multiple words.

If you are making a button, then the words that appear on the button are called the ‘button label.’

When making a link in a paragraph near the end of a sentence: do not include the final punctuation in the link text.

When making links in list items, be careful when selecting link text words.

Mechanics of Making Links

The icon of a link represents a chain, such as a chain to hold the gate on a chain link fence closed. The line inside of two horseshoe-shaped ovals represents the third chain that is turned 90 degrees. It’s an early-days metaphor still in action.

Google Icons (Material Design)

Flat Icons – Link

The mechanics: Using a computer mouse or trackpad, you can click at the last character of the link text and then drag through all the words backwards, and let go at the first character. I find this reduces my chances of accidentally hyperlinking the space after the last word of the link text. Once the correct link text is selected, click the chain icon in the WYSIWYG.

Setting the link destination:

If you were going to make a hyperlink to an offsite URL, load that URL into your clipboard before selecting the link text. Then, you won’t make a mistake in the time between seeing the empty field to paste the link and realizing you don’t have that link already copied into your clipboard. If you are going to create a relative link to another page or document in your own website, make note of what that content is called inside your system, so you can increase your chances of finding the correct page with the automatic content search tool.

Making sure it worked: In some systems, you’ll need to use the mouse to select the content offered by the link widget. Or, you could click the enter key if you have one, and if not, try the return key. Check if there is a save button or not. I think the newer content management link widgets are counting the selection of the internal content or external link AS the enter key, so they don’t display an OK or SAVE button.

Once your cursor is back in the page content, do you see the underline signifier on the link text you had highlighted? If so, save your edits. In content management systems, you’ll often be saving things that go live to the public right away. Your cadence for checking if you did it right will change based on how much you still need to edit. At the end of your editing, in a new browser tab, view that page like the public would. Then click that link you edited or created. Does it do what you expected? If you were linking a spreadsheet, check your downloads folder to see if you received a new copy. And so on. Continue proofing until it all behaves correctly. You can work between the two tabs to save time. One tab for the editing view, the other for the proofing view. Hit shift-refresh on the browser to pull down the newest changes on the proofing page between edits.

When fixing a broken link, what considerations are there?

If you use a broken link report service or a single-use page crawler, you’ll need to learn about error codes, what they mean, and how to know when you should break a broken link or find a replacement. Understanding the difference between relative and absolute links will come in handy if you’ve suddenly got a lot of broken links inside your site after renaming headlines or directories. In this case, you’ll also want to check whether the broken link page is published or unpublished.

Automated link checker

Validate your page

What is that error code?

Let’s say you need to point an existing link to a different page, and the link text is five words long. How would you do it? Would you be able to tell if you made an error? I have coached scores of new content managers how to edit links, and people go about it in different ways that surprise me.

In a CMS, you usually have access to a ‘break link’ icon, and it may look like a chain breaking. To ensure that all parts of the existing hyperlink get erased, place the cursor in the link but don’t highlight. Then choose the break link button. Then go ahead and highlight the link text and make the new link from scratch. You could also edit the existing link instead of deleting it first.

What is Empty Link Text? If your link report or accessibility report is saying your page has empty link text, it is most likely due to a copy and paste or a delete error. Sometimes when deleting link text, there is a space leftover that still has a hyperlink in it.

What’s the difference between a link and a button?

A button is hyperlinked and has a <button> tag underneath it in the code. A link is hyperlinked and can be placed in a paragraph tag, a list item tag, or a div tag, to name a few. The history behind choosing whether to make a link or a button is rife with lively debate. Usually a button is reserved for a desired user action or a user decision, such as downloading a report or signing up to an email list.

The controversy behind the link or button debate goes pretty far back, way back… Back to when we didn’t have CSS stylesheets and we didn’t have a button tag within semantic HTML. Web devs had to get creative to get a link to look like a button. So, now we have links that look like buttons but are not semantic buttons, and we have navigation elements that look like buttons but are links in the code. This causes accessibility problems, and if you really want to, take a deeper dive in the resources here:

W3 Schools article: Accessibility Buttons & Links

CSS Tricks: Complete Guide to Links and Buttons

a.i. generative art in comic book style. watercolor painting of one boy shouting link! and the other boy shouting button!

Etiquette: We should stay away from placing links in headlines like H2 or H3 tags. There are exceptions to this, however, such as a blog feed or news feed page, where the entire headline of the article is automatically turned into a link to the full article. We should not include the period at the end of a sentence in the link text. When making links inside quotes, keep the linked text inside the quotation marks. We should refrain from making more than one link to a destination using different link text. And, for the love of links, stop using “click here” as the only link text. The link text should give a clue as to where the user will land when they click.

Drama? What about opening links in new tabs?

Yes, there is a lot of spirited debate over whether to open a link in a new tab or not. In most WYSIWYG editors today, there will be a toggle button for you to choose whether to open link in new tab. Try and be consistent with your choices.

Links to other pages on your website do not need to be opened in a new tab. They should consistently remain in the same tab.

The controversy lies in how to handle offsite links. Do we open those in new tabs so users will have your site still there if they close the new page? Do we open those in the same tab so users will have their favorite browser button enabled: the BACK button?

I’m in favor of just being consistent.

Topics about links I didn’t have time to discuss

That sums up my Links 101 article and companion video! However, I didn’t talk about styling links, or SEO, or keyword stuffing of links, or the UX study of effective link and button text, or how users of assistive technology experience links, or cloud sharing links, et. cetera.

Also, a little out of scope for this article and video was the topic of linked images. Yes, people have been placing links on image tags for a long time. There is a lot to unpack about this in terms of usability and accessibility. I found WebAim published an article of quick tips about accessibility, and Tip #11 is:

“When creating an image link, the image alternative text must present the content of the image AND describe the destination of the link. Make sure that the image’s alt text would be sufficient if it were the text in a regular link.” WebAim Blog Oct. 2024

Linking is the mainstay of the internet and there is so much to talk about from many different angles!

The Birth of the Web, Tim Berners Lee

Posted on

Making HTML Lists

Here are some tips on making HTML lists in your content management system. In a word processing program, you can easily highlight two or more paragraphs and turn them into a bulleted list with a button that looks like a bulleted list. The same is true in a content management system (CMS). Most CMS’s have an editor toolbar with the familiar set of buttons. An ‘ordered list’ uses numbers. An unordered list uses the dots we call ‘bullets’:

  • Captain Picard
  • Commander Riker
  • Deanna Troi

Take a look at the code view for this list. The “ul” tag is short for “unordered list.” There is an open list tag and a close list tag at the end – the one with the slash “/ul”. 

<ul>
  <li>Captain Picard</li>
  <li>Commander Riker</li>
  <li>Deanna Troi</li>
</ul>

This is the semantic way to create a list. When this content is posted onto a website, any screen reading software can announce that it’s a list with three items. When working on the web, remember that your content should be semantic. That allows screen reading software to discern the hierarchy of your content and announce it to users.

But there are other ways to create the look of a list without the tags being semantic. Sometimes with copy/paste from other programs you’ll end up with dot characters, or images of fancy bullets. In the case of numbered lists, I’ve seen hard-coded non-breaking spaces imitating the look of tabs after numbers, but the content isn’t a true list. When screen reading software encounters content like this, it just reads the content without announcing the list. For three short items, perhaps that’s not a big deal. However, business lists or outlines can go on for many pages and hierarchy can get confusing.

If you’d like lists that have images of little arrows or colorful dots that are not a part of the standard set of bullets, you should still use the “ul” and “li” tags that the bulleted list button gives you and assign the image bullets with CSS. Unfortunately, that means you’ll need to know how to write CSS. If you don’t know how, then let the browser display the bullets how it wants.

  • Starship Enterprise
    • Captain Kirk
  • Starship Enterprise Next Generation
    • Captain Picard

In the above nested list, I didn’t have a choice in WordPress about whether the indented item would be an open circle or a normal bullet mark. Please note, that when formatting nested lists in a CMS, first make all list items one big list and then use the indent buttons to push list items to the right. That should assign parent/child relationships correctly.

I’ve seen lists come across my desk that might have forty items but each item is a separate list with open and close ‘ul’ tags. That’s not very usable for assistive technology. This way, each item is announced as a list of one item. It might be tempting to hit enter or return after your list item to try to get more space under the bullet. But what that does is break the list apart into multiple lists. Instead, it’s CSS to the rescue. You can define line-height AND space after list items with CSS. But usually, the very simple WYSIWYGs in CMS’s don’t offer that out of the box. Again, you’d need to know how to write the CSS to adjust vertical spacing of list items so you can maintain the correct semantics of the list.