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:
Launch the microlearning module below to learn more about dealing with URLs and hyperlinks and to test your knowledge using our interactive quiz.
*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.
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>
<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.
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.
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>
The Wikipedia article on Justin Bieber is ranked as the site’s 19th most-visited page (as at January 2023).
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.
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 TitleA Header 2 SubtitleSome normal paragraph text.
A Header 1 Title
A Header 2 Subtitle
Some normal paragraph text.
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>
<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 2021, according to Statista, the most popular types of condiment in the US (according to sales) were as follows:
The <ul> element displays the list items as bullet points; it should be used when the order of the items listed is not important.
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:
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.
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>
<table>
<tr>
<th>State</th>
<th>Favorite Condiment Sauces</th>
</tr>
<td>Alabama</td>
<td>White BBQ Sauce<br>Hot Sauce<br>Comeback Sauce</td>
<td>Alaska</td>
<td>Salmonberry Jam<br>Rhubarb Chutney<br>Birch Syrup</td>
<td>Arizona</td>
<td>Salsa<br>Guacamole<br>Sonoran Hot Dogs</td>
</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.
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>
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.
A client may well ask you to check that the URL is appearing in the correct browser window. Usually:
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.
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).
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:
Finally, make sure you check that the links still work after you have made any changes.
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.
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:
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.
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:
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.
Here’s a summary of what we’ve covered in this microlearning on dealing with hyperlinks and URLs as an editor:
Schedule a Call
Let’s talk about the support you need.
Δ
