Hyperlinks are links to other web pages or to another point in the same page. They’re formed using the (anchor) tag. Exactly how you treat hyperlinks and to what extent you intervene in their use and construction should be determined by an editorial brief or style guide.
As HTML is so ubiquitous in online content, it’s a good idea to have at least a core understanding of HTML tags and how they work. This guide will start with a very basic introduction to HTML elements (please skip over this if you are already familiar with them!).
In this microlearning, we’ll consider:
- Basic HTML elements
- Link appearance
- Checking for working URLs
- How many hyperlinks you should include in a piece of text
- When you might need to modify URLs
- Writing good hyperlinked text (hypertext)
Launch the microlearning module below to learn more about dealing with URLs and hyperlinks and to test your knowledge using our interactive quiz.
HTML Elements
*Please skip this section if you are already familiar with HTML.*
HTML (hypertext markup language) is, for the purposes of this guide, a way to determine how text appears on the page and how to navigate within and around different web pages.
The W3Schools pages contain a very clear alphabetical guide to HTML elements and their use. However, these pages do go into more depth about the other functions of HTML, which can be confusing if you are completely unfamiliar with this language. For this reason, we’ve produced this very basic introductory guide to HTML.
An HTML element appears within < > symbols. When an element is used to mark up a piece of text, it is called a tag.
You need an opening element and a closing element for the tag to work. The closing element is indicated by a forward slash (</ >).
Here, we have a very simple paragraph (<p>) with some bold (<strong>) text.
<p>You should <strong>not</strong> use the passive voice as a way to avoid assigning responsibility.</p>
In a web browser, this paragraph would look like this:
You should not use the passive voice as a way to avoid assigning responsibility.
The elements outlined below will cover most of the situations you’ll need as an editor working with HTML markup.
Paragraph and Break
The <p> element is used to define a paragraph. You need to surround the text in <p></p> tags. Any other markup to the text goes inside the <p></p> tags.
The <br> tag is used to make a single line break within a paragraph. You can use it multiple times to break several lines. The <br> element does not need a closing tag.
<p>Here is a paragraph.</p>
<p>Here is a paragraph with some <em>italic</em> text.</p>
<p>Here is a paragraph with<br>one line<br>two lines<br><br>and three lines of text.</p>
In a browser, this would appear as follows:
Here is a paragraph.
Here is a paragraph with some italic text.
Here is a paragraph with
one line
two lines
and three lines of text.
Anchor
The <a> element is used, with its attribute href, to define a hyperlink.
<p>The Wikipedia article on <a href=”https://en.wikipedia.org/wiki/Justin_Bieber”>Justin Bieber</a> is ranked as the site’s 19th most-visited page (as at January 2023).</p>
In a browser, this would appear as follows:
The Wikipedia article on Justin Bieber is ranked as the site’s 19th most-visited page (as at January 2023).
Strong and Emphasis
As noted elsewhere, <strong> and <em> are used to produce bold and italic text, respectively.
You should be aware that these are preferable to <b> and <i> tags due to their greater compatibility with screen readers.
Header 1–6
The <h1>–<h6> elements are used to define header level 1 to 6, respectively. They are used instead of <p> tags.
<h1>A Header 1 Title</h1>
<h2>A Header 2 Subtitle></h2>
<p>Some normal paragraph text.</p>
In a browser, this would appear as follows (the exact specifics would depend on the styles applied to the website):
A Header 1 Title
A Header 2 Subtitle
Some normal paragraph text.
Ordered and Unordered Lists
The <ol> (ordered list) and <ul> (unordered list) elements are used (with the <li> tag) to create numbered and bulleted lists, respectively.
The <ol> and <ul> tags are used instead of <p> tags.
<p>In 2021, according to <a href=”https://www.statista.com/statistics/1300703/leading-condiment-and-dressing-categories-in-the-united-states/”>Statista</a>, the most popular types of condiment in the US (according to sales) were as follows:</p>
<ol>
<li>Mayonnaise (164 million USD)</li>
<li>Ranch (103 million USD)</li>
<li>Ketchup (99 million USD)</li>
<li>Hot sauce (71.5 million USD)</li>
<li>Mustard (54.5 million USD)</li>
</ol>
In a browser, this would appear as follows:
In 2021, according to Statista, the most popular types of condiment in the US (according to sales) were as follows:
- Mayonnaise (164 million USD)
- Ranch (103 million USD)
- Ketchup (99 million USD)
- Hot sauce (71.5 million USD)
- Mustard (54.5 million USD)
The <ul> element displays the list items as bullet points; it should be used when the order of the items listed is not important.
Image
The img element is used when you need to embed an image into a web page. This may be an image held locally (on the website’s own server) or one held on an image-sharing site such as Flickr or Imgur. Like the <br> element, you do not need to have a closing tag for the <img> element.
Here is an example of an img tag for an image held somewhere on the internet:
<img src=”https://pixabay.com/photos/cat-young-animal-kitten-gray-cat-2083492/” alt=”Picture of a kitten sitting on a wall with blurred trees behind”>
Here is an example of of an img tag for an image held on a local server:
<img src=”images/CatSink.jpg” alt=”A picture of a black-and-white cat in a sink”>
As you can see, the URL for the local image is much shorter. This is because it’s a relative path, whereas a URL for an image held elsewhere is absolute:
- Relative path: like giving your address to someone who lives on the same street (they know most of it, so you only need to give the final bit).
- Absolute path: like giving your address to someone from another country (they don’t know any of it, so you will need to give it in full).
Note also that, while the alt attribute shown here (which contains a written description of the image) is not essential, it is very much advisable to include one for accessibility reasons.
Table
When creating a table using HTML, you need to define each row and each cell. Even the simplest tables require several nested tags.
It’s unlikely that you’ll need to construct a table from scratch, but here’s what one (showing the favorite condiments in Alabama, Alaska, and Arizona) looks like in HTML.
<table>
<tr>
<th>State</th>
<th>Favorite Condiment Sauces</th>
</tr>
<tr>
<td>Alabama</td>
<td>White BBQ Sauce<br>Hot Sauce<br>Comeback Sauce</td>
</tr>
<tr>
<td>Alaska</td>
<td>Salmonberry Jam<br>Rhubarb Chutney<br>Birch Syrup</td>
</tr>
<tr>
<td>Arizona</td>
<td>Salsa<br>Guacamole<br>Sonoran Hot Dogs</td>
</tr>
</table>
Here, <th> = table header; <tr> = table row; <td> = table data (i.e., <td></td> = a cell in the table).
To see what this table would look like, try pasting the above code into the W3schools Tryit Editor. Have a go at adding to or deleting parts of the table.
Formatting and Checking Hyperlinks
Even if you’re not dealing with HTML markup, you’ll usually be required to correct the formatting of any hyperlinked text that appears in a document.
Traditionally, hyperlinked text is underlined, but you may also see it in bold or a different color. This all depends on the client’s stylistic preferences and is likely to be outside your purview as an editor. Saying that, it is worth commenting if the choice of color or style means that the hyperlink is not visible or the text is difficult to read.
Any text formatting should cover the hyperlink only.
Here is some correctly formatted hyperlinked text.
<p><a href=”www.amadeupurl.com”>Here is some correctly formatted hyperlinked text</a>.</p>
This text has incorrectly formatted the period.
<p>This text has incorrectly <a href=”www.amadeupurl.com”>formatted the period.</a></p>
This text has incorrectly formatted the spaces around the hyperlink.
<p>This text has incorrectly<a href=”www.amadeupurl.com”> formatted the spaces </a>around the hyperlink.</p>
When working in a WYSIWYG (“what you see is what you get”) editor, most applications (including Word and GDoc) will allow you to select the hyperlink and hit ctrl+k (cmd+k for Mac) to edit the text that makes up the hyperlink.
You may or may not be required to check if any URLs in a document are working correctly. If they are broken, you would normally just highlight the issue to your client in a comment, suggesting an alternative URL if required.
Do not make changes directly to the hyperlink without a comment, as your changes will not be immediately evident to the client.
If you are working directly with <a href> tag content, you will need to paste the URL into a browser to check it.
Defining the Target
A client may well ask you to check that the URL is appearing in the correct browser window. Usually:
- Internal links (within the same website): open in the same window.
- External links (on another website): open in a new tab (or window, depending on the configuration).
In HTML, the default setting is to open a link in the same browser window.
To set it to open in another tab, you need to use the target=”_blank” attribute. Here’s what it looks like:
The <a href=”https://mustardmuseum.com/the-mustard-museum” target=”_blank”>National Mustard Museum</a> in Wisconsin, founded in 1992, contains 6,090 different types of the condiment.
How Many Hyperlinks?
Hyperlinks are there to direct the user’s journey through content or to provide supplementary information without clogging up the main text (just like a footnote in a printed text).
Content that contains too many hyperlinks in a short passage may be visually busy and therefore more difficult to read. You may need to consider whether the hyperlinks in a piece of text all serve their intended purpose.
Similarly, you should remove redundant links (i.e., instances where the same hyperlink appears repeatedly).
Modifying URLs
If the URL itself is shown (for example, in footnotes or bibliographic entries), you should consider whether you need to modify them so that they appear neater. You could do this by:
- Removing www. or https://. Style guides will often mention if you need to do so.
- Removing UTM tracking codes. These are used to track where website traffic is coming from, and are not essential to the URL itself. They will start with ?utm_: anything after this can be removed without breaking the link.
- Suggesting an alternate link. It’s wise not to link to a single PDF or document held online; rather, it’s best to link to the web page that holds the information about that document. This link will often be much shorter and neater, plus it is less likely to break. For example, this link is to a journal citation page (containing the link to the full article): www.sciencedirect.com/science/article/pii/S1878450X1730094X. It is far neater and more appropriate for inclusion within a footnote or reference list than the link to download the PDF journal article itself (not included here because it is gigantic!).
Finally, make sure you check that the links still work after you have made any changes.
Deep Linking
Deep linking is the act of linking to a URL other than the website’s home page; for example, directly to a piece of content, image, video, or app.
In the early years of the 21st century, online content producers were tiptoeing around the legality of deep linking at the very basic level (i.e., linking to a page other than the website’s home page). Ticketmaster v. Microsoft, way back in 1997, saw Ticketmaster accuse Microsoft of “electronic piracy” for sending users directly to its subpages and bypassing Ticketmaster’s advertising revenue-rich homepage.
Things have moved on since then, and the above kind of deep linking is standard practice these days. Framing (where Website A makes it appear that content from Website B is hosted on Website A’s website) is more of a gray area, especially in Europe.
What does this mean for you as an editor? You are unlikely to need to consider whether a deep link is permissible, although it is something to bear in mind. However, you may find yourself needing to consider whether the page a hyperlink is directing a user to is the best page for the user’s experience.
Sometimes it’s best to go directly to a piece of content (for a seamless experience), but those links can easily break or be confusing out of context. Therefore, it may be better to send the user to a more stable website page, such as the abstract page of a journal article. If the URL is to be included in the text, a long link may be impractical or messy. The decision falls between you and the client.
Short Links
Sometimes, a client will want to use short links. These are created using a link-shortening service such as Bitly or TinyURL. These shorter URLs are easier to share, particularly in situations where character count is limited, such as in social media posts, text messages, or printed materials. They also allow the site owner to effectively track and monitor the number of visitors to that address.
However, short links have the following disadvantages:
- Link longevity: Shortened links are dependent on the URL shortening service. If the service goes down or changes its policies, the links may break. Similarly, if the client’s web content is migrated to another site, this will also break the links.
- Transparency: Some users may be hesitant to click on short links because they can’t easily see where the link will take them.
- Privacy: When using a URL shortening service, the link may pass through their servers, potentially revealing information about who clicks on it.
While these issues are unlikely to be your responsibility as an editor, you may want to highlight them to your client if they are likely to impact their content in any way.
Writing the Hyperlinked Text
Using constructions such as “click here” or “you can find XYZ here” is generally frowned upon in digital marketing and content creation.
There are several reasons for this:
- “Click” isn’t quite right when many users are likely to be using touch screens.
- “Click here” or “here” isn’t informative. The user has to read the whole sentence (or even paragraph) to gain an understanding of what new page they’ll be visiting.
- “Click here” and similar are not recognized by screen readers, so cause accessibility issues.
- Well-written hyperlink text is beneficial from an SEO perspective.
Hyperlink text should indicate why a user should follow a link and where that link is sending them.
That is, instead of:
To read our report on climate change, click here.
Go for something like:
Our report on recent developments in climate change is now published on our website.
Google’s SEO Starter Guide: Use Links Wisely provides a great overview of how to write link text, how to use links effectively, and how to format link text so that it stands out to users.
Summary
Here’s a summary of what we’ve covered in this microlearning on dealing with hyperlinks and URLs as an editor:
- Hyperlinks are essential elements in web content that connect to other web pages or points within the same page. They are created using the <a href></a> (anchor) tag in HTML.
- As an editor, it’s worth gaining at least a basic understanding of HTML elements. HTML tags (including <p>, <br>, <a>, and <strong>) help structure and format content on web pages.
- Correctly formatting and checking hyperlinks is essential to ensure they appear correctly and function as intended.
- Deep linking directs users to specific content within a website. While it is standard practice today, you should consider the user experience within the context of your client’s work.
- Short links, created through link-shortening services, are useful for sharing concise URLs, but they may have issues related to link longevity, transparency, and privacy.
- Hyperlink text should be meaningful and descriptive; you should avoid generic phrases like “click here” for accessibility and SEO reasons.
