I talk about properly formed links or proper HTML anchor tags in all of my articles, workshops, and classes. This article serves as a tutorial and reference guide on the proper formation of HTML links.
Links tie the web together, linking one site to another, one web page to another. They are critical to helping us find information and understand what is being written.
In “What You Must Know About Writing on the Web,” I describe a link dump:
Ugly is as ugly does. Don’t clutter up your site with ugly link dumps.
A link dump is when the blogger is lazy and just pastes the link into their post such as https://lorelleteaches.com/2012/10/14/what-you-must-know-about-writing-on-the-web/ instead of the properly formed What You Must Know About Writing on the Web.
Which is easier to read?
A properly formed link makes it not just easier to read the post, it is clean and presents professional looking content. It invites the reader to click.
How to Create a Properly Formed HTML Link
To create a properly formed link, you may use the Visual Editor toolbar button called link or Hypertext Link.
Type the words or phrases you wish to use as the link anchor text.
- Select them.
- Click the link button.
- Paste in the address.
- Type in the link description (title) which is required by web accessibility laws in most countries for commercial or public websites – it’s a good habit to learn.
- Click OK to complete the steps.
The text should appear in a link.
In the HTML or Text Editor, you may use the same link button, or type it in manually.
The HTML link tag is called the Anchor and begins with an A.
<a href="http://lorelle.wordpress.com/" title="Lorelle on WordPress site covering WordPress and blogging.">Lorelle on WordPress</a>
The “href” is the hypertext reference link followed by the link in quote marks.
The “title” is the title of the site. It may be the same as the anchor text or it might be different, as shown in the above example. If the anchor text is “great article on how to blog,” the title might be “How to Write Well on a Blog by Lorelle on WordPress.” It should be in a proper sentence format, starting with a capital letter and ending with a period, though that is not always required.
The anchor text in the above example is “Lorelle on WordPress” followed by the closing anchor HTML tag.
Types of Links
There are many types of links.
A traditional link is any link that connects the reader to an external site. This is also often called an external link or outgoing link.
A link to another web page on your site is called an internal link or intrasite link.
An incoming link is any link from another site to yours, however it is most commonly referred to as a link to the root domain address, the dot com, for example, often called the “front page” of the site.
A link to an external site directly to an article on that site will generate a trackback link and comment if both sites have trackbacks enabled. The link on your site is an external site, but the link in the comments of the referenced site is a trackback link. These are also known as referrer links as you are referring someone to another site.
An image link is a link wrapped around an image. Embed the image into your post or Page and wrap a link around it. Affiliate links are often used this way to turn an image into an advertisement.
An affiliate link is a link to an ad or a paid link. Many bloggers earn extra money by providing affiliate links to sponsors and advertisers.
A link list is a list of links. The list maybe set as a bullet or numbered list, or feature the content in a list format with explanations, reviews, and recommendations with the links, helping to educate the reader about the linked content. Some link lists feature the links wrapped around images such as the articles commonly found on Smashing Magazine. Many people create their top 10 list of links on a subject or their recently bookmarked or discovered web pages and resources.
A blogroll or link list is a list of links to external sites or resources. These were popular in the beginning of the web in blogrolls, sidebar lists of links. They are now out of fashion and not appreciated by search engines in SEO as they have been long abused. It is highly recommended that you create a resource list of links on a Page on your site, or write about each reference or resource individually on posts.
There are also many types of links specific to your site, using their description to designate the type of link rather than a unique form of link. These including author links, tag links, category links, title links, archive links, permalinks, comment links, etc.
Link Format Guidelines
Now that you are familiar with what a properly formed HTML link is, it’s time to go over some linking guidelines.
- Do Not Click Here: The old days on the web, everything had to be explained. “Click here” was developed as an instruction to teach people where to click to access more information. It is no longer necessary, and when encountered, tends to appear condescending to the reader. Incorporate the links naturally into the text. If you must guide them, use “visit this site for more information” or “you may find more information about this here.”
- Link to one or more words: It is highly recommended that you link to more than one word to give the reader more area to click through to the article. While it might be interesting to link to many articles with every word, it’s old fashioned, cumbersome for the blogger as well as the reader, so use it rarely and judiciously.
- Links are Recommendations – Tell Readers Why: When you link to a site, you are recommending your readers leave your site to go elsewhere. This used to scare people, but the web is a strange business. In a regular store, if someone tells you to go away, you may leave and never come back. On the web, you tell people to go away and they not only go away happy, the often come back and bring their friends. Don’t just link without reason. Tell your readers why you recommend they leave your site for this new site, and they will trust you and come back for more.
- Tell Them Where You Are Sending Them: Use words within the context of the article and in the Anchor Text of the link to let the reader know where you are sending them. If the link is to an external site, make sure they understand that clearly or add a reference such as with this example (external site). If the link is to a PDF or other type of file or downloadable file, add (PDF) or (text file), or some other text that indicates what the destination is for the link.
- NEVER Force a Link to Open in a New Window: There was a myth going around that no one would come back to your site if you sent them away with a link. Or that people should click an external site link and force it to open in a new window or tab so the reader could keep reading. This has not only proven to not be true, it violates web standards for accessibility and many federal laws for doing so without warning. People now know how to use the back button and how to open links in tabs. Let them control their experience. If you must use this feature, warn the reader with (opens in new window) in the link.
- Punctuation INSIDE the link: Quote marks are always outside of the punctuation and the link, as explained in “What You Must Know About Writing on the Web,” on Lorelle Teaches. Put periods at the end of sentences outside of the link.
- Learn How to Cite Properly: Giving credit where credit is deserved is not just right, it’s proper manners. In “Copyright: How to Quote and Cite Sources” I go into details about how to use blockquotes and how to properly cite (link) to sources. Learn how to give credit to the brilliance of others, and you will be rewarded by the generation of a trackback, an invite for the referenced person to check out what you have to say.
- Design Links for Readability: Links are to be designed to stand out from the text, be underlined, and not to interfere with the readability of the text. The underline is so strongly associated with links, if you underline text within an article, people will often click it. Designing for links does not mean you must underline the link in your design, but consider adding underline when the mouse hovers over the link to reinforce the concept of a link. Choose colors carefully so the link is visible but also easy to read.
Links change lives, I know by experience. The simple act of linking to someone’s site, specifically something they’ve published, sends your readers there to visit with your letter of recommendation. Link wisely and carefully. Honor the power of the link to connect the web as well as people together.
Here is a link list of resources and articles to help you learn more about how linking works, and how to link better.
- Linkability – Link Popularity
- The Power of the Link « Lorelle on WordPress
- The 10 HTML Tags You Must Know to Blog | Learning from Lorelle
- Copyright: How to Quote and Cite Sources
- Changing a Life With a Link – – Blog Herald
- When Your Comment Inspires Posts – Blog Herald
- Site Optimization: Checking Loose Links
- Tracing Your Blog Links
- Dear Blog Emperors: A Link Relevancy Test
- Feeds Change How You Write Links
- The Magic and Fun of Incoming Links
- The Agony of Link Hunting
- Why A Link Post Should Be Like Mingling at a Party
- Why You Want To Link To Other Blogs
- Why Writing a Link Post Should Be Like Planning a Party
- How Do You Find Relevant Blog Posts To Link Too?
- Why Writing a Link Post May Be Less Like Partying and More Like Work
- WordPress Tip: Writing Customized Post Headlines, Title Tags, And Permalinks
- The Dos and Don’ts of Blogging
- Caring About the Little Links on Your Blog
- WordPress Tips: Exploring the WordPress Text Widget (See sectons on adding links to sidebars)
- 7 Blogging Steps Even Veteran Bloggers Forget
Pingback: Happy Holidays and Onward! « Lorelle on WordPress
Pingback: Do You Need Permission to Link to Someone’s Content? « Lorelle on WordPress
Pingback: Blog Exercises: Random Editing Day « Lorelle on WordPress
Wow! Thanks so much for the detailed comprehensive post – it’s the whole enchilda when it comes to links.
Pingback: Family History Blogging Resources and Tips | Learning from Lorelle
Pingback: Blog Exercises: Taking a Risk With What You Blog About « Lorelle on WordPress
Pingback: Blog Exercises: Honor the Past with Anniversaries and Birthdays « Lorelle on WordPress
Pingback: Blog Exercises: Your Byline « Lorelle on WordPress
Pingback: Blog Exercises: Comments and The Blog Bullies « Lorelle on WordPress
Pingback: Blog Exercises: Backlinks « Lorelle on WordPress
Pingback: Blog Exercises: Category Counting « Lorelle on WordPress
Pingback: Weekend Blogging Reads and Resources | one cool site
Pingback: Blog Exercises: Fix Images in Your Content « Lorelle on WordPress
really great and thorough post. thank you! And I may be guilty as charged by just pasting in links.
Pingback: Blog Exercises: Random Edit Day February « Lorelle on WordPress
Pingback: Blog Exercises: Current Events for February « Lorelle on WordPress
Pingback: Blog Exercises: Weekly Link Roundups « Lorelle on WordPress
Pingback: Blog Exercises: Quoting and Blockquotes « Lorelle on WordPress
Pingback: Blog Exercises: Trackbacks « Lorelle on WordPress
Reblogged this on Cheyenne Charlie Kay Home Repair Serviceman and commented:
Properly formed links in the blog.
Pingback: Blog Exercises: Weather Reports « Lorelle on WordPress
Pingback: Blog Exercises: Clean Up Your Most Popular Posts « Lorelle on WordPress
Pingback: Blog Exercises: Update Your Author Description « Lorelle on WordPress
Pingback: Blog Exercises: How to Publish Code « Lorelle on WordPress
Pingback: Blog Exercises: How Many Posts? « Lorelle on WordPress
Pingback: Blog Exercises: Schedule Blogging Time « Lorelle on WordPress
Pingback: Blog Exercises: Feed Readers « Lorelle on WordPress
Pingback: Blog Exercises: Bottom Up Editing « Lorelle on WordPress
Pingback: Blog Exercises: What is Your Posting Response Assessment? « Lorelle on WordPress
Pingback: Blog Exercises: Trackback Check-Up « Lorelle on WordPress
Pingback: Blog Exercises: Where Are You? « Lorelle on WordPress
Pingback: Blog Exercises: Polls and Surveys Follow-up « Lorelle on WordPress
Pingback: Blog Exercises: How Many Posts Can Your Audience Handle? « Lorelle on WordPress
Pingback: Blog Exercises: Experiment with Emptiness « Lorelle on WordPress
Pingback: Blog Exercises: Know Your Pageviews « Lorelle on WordPress
Pingback: Blog Exercises: Check Your Site Title Tag « Lorelle on WordPress
Pingback: Blog Exercises: Speed Blogging with CoLT « Lorelle on WordPress
Pingback: Blog Exercises: Blasts from the Past « Lorelle on WordPress
Pingback: Blog Exercises: How to Tag Posts « Lorelle on WordPress
Pingback: Blog Exercises: Preview Posts « Lorelle on WordPress
Pingback: Blog Exercises: How Much Does Your Blog Cost? « Lorelle on WordPress
Pingback: Blog Exercises: Make an Elephant Out of a Fly « Lorelle on WordPress
Pingback: Blog Exercises: March Current Events « Lorelle on WordPress
Pingback: Blog Exercises: Honor the Moment « Lorelle on WordPress
Pingback: Blog Exercises: Sex Changes and Age Matters « Lorelle on WordPress
Pingback: Fight Against Trackback Death « Lorelle on WordPress
Pingback: Blog Exercises: How Many Words in a Link? « Lorelle on WordPress
Pingback: Blog Exercises: Post-Op Care Content « Lorelle on WordPress
Pingback: Blog Exercises: Fools, Pranks, and Jokers « Lorelle on WordPress
Pingback: Blog Exercises: What Words Do You Abuse Redundantly? « Lorelle on WordPress
I have been looking for 2 specific ways to link.
1.) Advertisers: We should use the nofollow tag only if it is a paid advertiser?
2.) Cite: If we put “created by” in the footer should we identify this somehow?
I’d put a nofollow, which really doesn’t work nor mean much any more, on any ad, paid or not.
As for citation, I think you mean a link to the person who created the site, did the Theme or some form of “thank you” link? That can easily be put into the footer.
Hopefully that answers your question. Thanks.
Pingback: Blog Exercises: When Will You Not Link? « Lorelle on WordPress
Pingback: Blog Exercises: How to Respond to a Trackback « Lorelle on WordPress
Pingback: Blog Exercises: Does Your Site Look Spammy? « Lorelle on WordPress
Pingback: Blog Exercises: Add Industry Events to Your Editorial Calendar « Lorelle on WordPress
Pingback: Blog Exercises: List Your Resources « Lorelle on WordPress
Pingback: Creating HTML Hyperlinks (Links) in WordPress | one cool site
Pingback: Blog Exercise: Take Yourself on a Bloggy Vacation « Lorelle on WordPress
As you noted in the article, emphasis on the ALT selector in an HTML image tag and TITLE on links are essential and required by many government laws, including the United States, but it is never a substitute for a lack of words to encourage people to click. Not all browsers display the balloon tip (hover text), thus making it unavailable to those with such browsers.
It’s an important point you make, but the bigger one is their importance to web accessibility laws. The fines for non-compliance can run to USD $100,000 for sites that fail to comply with US laws on accessibility and equal access.
Linkrot is a blight on the web. You are so right. I’d love a fast and easy way to prevent that.
Thanks again for visiting my sites and sharing your thoughts. I love it!
I need some advice as to why my properly formed links didn’t work in my comment in this post.
I’ve applied the same rules. You can see that I’ve been able to form such links in my blog.
I’m wondering why my attempts failed in the two particular links. Was it because:
1) one article ended with .htm
2) Some website (news based) doesn’t allow it
3) Internal setting on WordPress
I’m baffled as to why I received inconsistent results after applying the same principles.
If you could shed light on this, I’d really appreciate it. It’s non urgent.
A properly formed link to the article you mentioned in that comment would be: The Cenotaph in London – Rememberance Day. On comments, you must write them out by hand manually. Here is the code:
<a href="http://resources.woodlands-junior.kent.sch.uk/customs/cenotaph.htm" title="The Cenotaph in London - Rememberance day">The Cenotaph in London - Rememberance day</a>.
If you wrote it like that, it would generate as a link. Not sure what you didn’t get right on it.
Just realised you’d replied. Sorry I had missed it earlier.
To answer your question, I can see my mistake. I added a slash after .htm.
(I thought at the end, a slash is a must.)
If a site starts with https, would the principle be the same?
In your next tutorial, could you add some basic info about https. Many thanks.
Https is secure site address.
The slash at the end closes the link address for pretty permalinks but is not necessary for addresses end in an extension like htm, html, or php.
I’ll consider this in an update. Thanks.
Pingback: Your Very Own WordPress Blog | Jennifer Whetham's Summer Courses at Clark 2013
Pingback: Blog Exercises: Organize Your Content – The Sequel « Lorelle on WordPress
Pingback: Blog Exercises: What’s the View Through Your Binoculars « Lorelle on WordPress
Pingback: I swim and I blog: where’re my nutrients from? | Janet's Notebook
Pingback: Writing Is Not Blogging | one cool site
Oh BOY _ I have just found a whole lot more I am doing ‘wrong’ – that point about links opening up in a new tab automatically gave me the shivers. I always do that – just because I thought that was what we were SUPPOSED to do. Now I learn differently…and then some.
Thank you very much!
Glad to know that I helped – I think. 😀
Good luck and I’m proud of you for being open to learning new things. You can teach an old dog…
You HAVE helped!! ps – do I sound that OLD? 😉 Though I DO feel it at times!
Only as old as you…what was I saying? 😀
Pingback: Your Very Own WordPress Blog | Early American Literature @ Clark
Pingback: Your Very Own WordPress Blog | Lindsay Christopher's Fall Courses at Clark
Pingback: 12 Reasons Why You Need Lorelle’s Blog Exercises for Your Blog | Janet's Notebook
Pingback: A Big Reminder. Big. | English 101 Fall 2013
Pingback: Contributor Guidelines | Sit Back And Unwind
Pingback: How to select and use anchor text effectively | one cool site
Pingback: Relevant Anchor Text Matters | one cool site
Pingback: Your Very Own WordPress Blog | English 102 ~ Summer 2014
Pingback: Speed Blogging Tips and Techniques « Lorelle on WordPress
Pingback: The Web is All About The Writing « Lorelle on WordPress
Pingback: WordPress School: Links « Lorelle on WordPress
Pingback: WordPress School: Sharing WordPress Links « Lorelle on WordPress
Pingback: WordPress School: Polls and Surveys « Lorelle on WordPress
Pingback: What’s Happening Here? | jangadajourney
Pingback: WordPress School: HTML and CSS References and Resources « Lorelle on WordPress
Pingback: Workshop: Words and Pictures | Learning from Lorelle
Pingback: The Most Common Tiny Mistakes Made When Setting Up a WordPress Site « Lorelle on WordPress
Pingback: CTEC-160 Welcome to WordPress | Robin Murray