A handy HTML tag every blogger should know

Or, How do I create hyperlinks within a single blog post?

I was recently asked to transfer a scientific essay onto a WordPress blog. The essay included a few footnotes, which don’t display well in the continuous-stream format of a blog post. To get around this, I decided to turn the footnotes into endnotes. But that left me with a new problem: the reader has to scroll between the end and the middle of the article if they want to read the footnotes. In my attempt to improve the readability of the site, I learned a simple and effective way to create hyperlinks within a single blog post: the “a” tag.

This tag is used to create any kind of hyperlink. In WordPress, most links are created using the link button in the visual editor. However, this button does not give you the option of creating links inside the post. To do that, you need to go into the text editor and add some extra tags.

Here’s how it works.

You have a sentence with a footnote. “The acini1 in the pancreas degenerate, leaving islets.”

Then you have the footnote itself. “1. Acini is the plural form of acinus.”

The sentence and the actual note can be any distance apart on the page. Go into the text editor and find the sentence with the footnote. Add a hyperlink to the number of your footnote – or alternatively, whatever text you want to constitute the link.

< p > The acini < sup >< a href=”#Acini” > 1 < /a >< /sup > in the pancreas degenerate, leaving islets. < /p >

Now go to your footnote and create the anchor that your hyperlink will refer to. The id can have any name; I could have called it “Pizza” instead of “Acini,” so long as the anchor id and the href match.

< p > < a id=”Acini” >< /a > 1. Acini is the plural form of acinus. < /p >

In this example, I needed to create a second pair of links so that my reader can return to the part of the article in which the footnote occurred.

< p ><a id=”Footnote1″>< /a > The acini < sup >< a href=”#Acini” > 1 < /a >< /sup > in the pancreas degenerate, leaving islets. < /p >

< p >< a id=”Acini >< /a> 1. Acini is the plural form of acinus. < a href=”#Footnote1″ > Back < /a >< /p >

For the purposes of making HTML display properly, I put spaces in between all the tags. Here is what the working form of it looks like:

The acini1 in the pancreas degenerate, leaving islets.

~

~

~

~

~

~

~

~

~

~

~

1. Acini is the plural form of acinus. Back

Voila! Now you can create links both between webpages and within them.

Advertisements

One thought on “A handy HTML tag every blogger should know

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s