This guest post is by Matt Setter of MaltBlue.com.
If you were with us yesterday, Part 1 of this series will have put you in very good stead for making sure the code of your blog posts is perfect HTML!
As you’ll recall, yesterday we looked at:
- What is a tag?
- Formatting
- Alignment
- Lists.
Today, we’re focusing on the final important aspect of our Introduction to HTML, and that’s links.
Links
Adding links is one of the most common and essential operations that we can do in publishing blog posts. Whether we’re citing references in our work, linking to other blog posts, articles, and videos, or making email addresses available so that we or others can be contacted, links are essential.
Have a look at the screenshot above, from a recent post here on Problogger.net. It has seven links—and that’s just the first part of the article. The remainder of the article has 31 more.
In the WordPress visual editor, there are two buttons for managing links. One to add them, and one to remove them. In your editor, past in a few paragraphs of text from yours or another blog and then select some of it and click the add link button.
When you do this, you’ll see the link editor window, below, open with two fields available: link and title. When you fill out these fields and click add link, your text becomes a link.
Let’s say that you were linking to an article here on Problogger.net, Blogging for Startups: 10 Essential Tips to Make it Work. You put the name in the title field and the link in the URL field.
What does it look like in the source code of the page? Here it is.
<a title="Blogging for Startups: 10 Essential Tips to Make it Work" href="https://problogger.com/blogging- for-startups-10-essential-tips-to-make-it-work/" >Blogging for Startups: 10 Essential Tips to Make it Work </a>
The code above is what it would look like, if the article name was also the text that was linking to the article. It’s been formatted for easier reading. You see that the text is surrounded first in what’s referred to as a tag, or in this case and
.
Then, inside of these, there’s two further parts, called title and href. The title is what is displayed if you hold the mouse over the link for a second or more, and href contains the link that will be opened when you click on it. That’s nice, straightforward, and simple, yes?
In your editor, click on the HTML tab in the upper right and have a look at the link that you’ve just created. Play around with the text inside the tag and the text in the elements in the opening tag, in the title and href areas. Then switch back to the visual editor and see what’s changed. Hold your mouse over the link and click on the link. You see how easy it is?
Now there are a series of other options that you can add in, besides title and href, but on the whole, the majority of them are not used that often and are likely not needed that much in the context of blogging. There’s a few more things we can do with links, though.
Internal links
So far we’ve looked at external links—by external, I mean any document that’s not the one we’re currently reading. What about linking within our document? Let’s say that half-way down our document, we had a list of the most to least highly populated states in Australia.
Let’s say that we linked to it right at the start of our post so that readers could skip right down to it without needing to read the text in between. How would we do this?
In your editor, in visual mode, copy in a few paragraphs of text from another website. Give it a heading “Australian States” and then add the text “Most Popular Australian States” right at the top of the document.
In the heading, “Australian States” create a link, but don’t give it a URL. Change to HTML mode and make it look like the code below:
<a name="australian-states">Australian States</a>
You see that in the href field, we’ve filled out a name field? This is now what’s called a named anchor. Now create a link around the text at the top of the page and set the URL to be #australian-states. When you preview the post, you’ll be able to click on the link and go straight down to the link in the document.
Here is an example of the HTML:
<h1>Australian States</h1> <a href="#australian-states">to australian states</a> <p>Die Hypovereinsbank wirbt Kunden für das Sparkonto HVB PlusSparen Top-Sparzins mit einer Zinsbindung von drei Jahren. Lässt der Sparer das Geld dort 36 Monate liegen, erhält er 2,25 Prozent Zinsen pro Jahr. Muss der Sparer aber vorher an sein Geld, gibt es nur sehr bescheidene Zinsen. test.de sagt, was das Sparangebot taugt.</p> <p>Die Hypovereinsbank wirbt Kunden für das Sparkonto HVB PlusSparen Top-Sparzins mit einer Zinsbindung von drei Jahren. Lässt der Sparer das Geld dort 36 Monate liegen, erhält er 2,25 Prozent Zinsen pro Jahr. Muss der Sparer aber vorher an sein Geld, gibt es nur sehr bescheidene Zinsen. test.de sagt, was das Sparangebot taugt.</p> <a name="australian-states">Australian States</a> <ul> <li>Queensland</li> <li>New South Wales</li> <li>Victoria</li> <li>South Australia</li> <li>Western Australia</li> <li>...</li> </ul>
Here is an example of what the page would look like:
Not that much to it, is there? You can now link to external documents and within an existing document.
Essential HTML for bloggers
Well, there you have it. We’ve now gone through a fairly gentle, yet firm, introduction to HTML so that, as bloggers, we are able to be more hands on when crafting our posts, with the WordPress editor.
We’ve looked at basic formatting, alignment, links and lists and have a better understanding of the changes that are made when we click or un-click the respective buttons.
From here on, though you may choose to keep using an editor for managing your posts and I wouldn’t blame you if you do, you’ve now got the knowledge to step beyond it. I hope that you enjoyed this basic HTML for Bloggers and are able to feel more empowered than you did before.
If you want to know more, leave us a note in the comments and we’ll see what we can do.
Matthew Setter is a freelance writer, technical editor and proofreader. His mission is to help businesses present their online message in an engaging and compelling way so they’re noticed and remembered.
When starting up with HTML it can be very challenging. And Matt, this is a very nice post that clears it all for beginners.
Cheers.
Gilbert,
many thanks for the support and feedback. HTML’s worth getting in to.
Matt
Thanks Matt, this is fabulous. I’ve been doing a lot of trial and error on my pages, and this has been a great boost.
Tracey,
not a problem. Glad to be of help.
Matt
You many want to expand this series to include HTML 5, Javascript and CSS 3 as they are now the modern standard and must for every web technology enthusiast.
Nick,
I’m happy to do that if people are keen to hear more. What say the other readers?
Matt
Wao… almost after couple of months i came on problogger and found your (Matt) essential Html double parts on top….and finally really enjoyed them..though they are very basic but are very helpful and most effective…and now i”m on your blog…found it as a hot learning spot…:D
Thanks for sharing this post…and definitely looking for more some great stuff.
Best regards
Syed Shah
Hi Syed,
thanks for the very kind words and I’m glad to have you over at my own blog. This 2 part series was deliberately designed to be simple. As the new Prometheus movie one-liner goes: From little things, big things grow. I hope you got a lot out of the series.
Matt
Personally, I am already familiar HTML a bit but the part of internal linking I have missed before. It is indeed very useful if you have a long post and don’t want your readers to scroll down to find the part they are interested. Can you give me a link where I can read more about internal linking and they way to do it?
Greetings,
Ewan
Hi Ewan,
that’s one of the best parts about HTML. You can link to virtually anything, anywhere. Have a look at this further resource from Jennifer Kyrnin on About.com – http://webdesign.about.com/od/beginningtutorials/a/aabg020899a.htm.
Matt
Matt – Nice followup post on HTML basics! I have a question about the use of titles and alternate text when posting images to a blog post. In WordPress, when you insert an image into a post, you are given the option of creating a title and alternate text related to your image. Is it considered bad SEO to use the same information for both, the title and alternate text, for each image, i.e., is it viewed as keyword stuffing? Thank you.
Rick,
Thanks for the kind words and feedback. To be honest, I’m not quite sure. I think that it’s ok to do it so long as the keywords that you’re using are actually what your link and image are about. Whereas if you were just putting anything in there, then that would be bad practice. Specifically with images, you need to provide the search engines all the help you can. So I encourage using the tags where possible, but honestly.
Matt
The WordPress is lack of dofollow and nofollow feature for each link in the compose . We should not make the unimportant link dofollow .
Ben,
That’s true. Though I am sure that there are a good set of plugins for WordPress that will let you manage this quite simply. I’m not aware of any specifically, but if anyone is, please let us know with a comment.
Matt
Hi Darren,
i’m 14 years old and thanks to you and another bloggers post i have started up my own site which is an online youth magazine.Thanks to your advice on gaining traffic we had 1,000 visitors in our first month i hope this increase in the near future.
here’s my site if you want to check it out: http://youngermagazine.com/
Thanks
Thanks for the important info. I’ve always wondered how I could make internal links in my website. So I tried adding the code that you had in your examples but, curses HTML, it didn’t work for me. I’m hoping I can find a simple way of doing it using the regular WP links.
I have great admiration for those who are able to use HTML seamlessly. Unfortunately, I’m not one of those folks.
Kevin,
if you can provide a link, I’m happy to have a look and suggest what might be going wrong.
Matt
i taught myself html when i was 13 and dreamed of being a web designer (today, i am). the lesson is a good refresher though! i haven’t done internal links in a long time and never think about doing them… so you’ve reminded me just how easy it is to do! not necessarily an “a-ha” moment but an “oh yeah!”
Hey Janet,
we sound like two of a kind there. I did the same. I think I have one of the early bible-type series on HTML 3, but it’s back home in a box in Australia, not to mention well out of date.
Matt
I think as long as someone is getting started with WordPress then it should be easier for him to learn html or mostly the tags that bloggers use. The WYSIWYG editor of WordPress does a fair job keeping it as simple as possible unlike other editors that include unnecessary HTML tags (hint: MS Office tags) that just make it more complicated.
Melvin,
agreed. And MS Office puts so much unnecessary cruft in the code that it creates. The paste from Word button does a good job of removing a lot of it, but not all unfortunately.
Matt
Just beginning to work with HTML and its been challenging. Great info on internal and external links
Thanks kindly Mark.
Why not have a look at this book on it from APress: http://www.amazon.com/Definitive-Guide-HTML5-Adam-Freeman/dp/1430239603/ref=sr_1_2?ie=UTF8&qid=1349813530&sr=8-2&keywords=html5.
Matt
When linking to external sites we definitely need to take into account Google’s suggestions regarding the nofollow attribute. SEO is a big part of blogging which must not be ignored.
Serapis,
definitely right. A balance of code and SEO.
Matt
Thanks. I didn’t know about the internal links..
Internal linking plays an important role in connecting the internal pages to increase the on page seo
Thanks Matt for such an encouragement! I agree with you on external and internal linking. It’s really true to adding links is one of the most common and essential operations; I have been trying that and blog publishing really brings out a positive response. I liked that and thanks for helping me so far!
Shelby,
not a problem. I’m glad you got so much out of it. Let me or the good folks at Problogger know if you want more in the series.
Matt
This is a very helpful site Matt. I feel so much encouraged with linking techniques there; sounds so working and inspiring. Hope I would enjoy the rest, thanks for sharing!
Carla,
not a problem. Let me know if you need anything further.
Matt
This is Very informative article very helpful, Thanks for sharing ..
Shivani,
Not a problem. Happy to help.
Matt
Thanks a lot Matt. I love the links and I am hoping for a third post on the same.
Hmmm, starting to see good enthusiasm for more. Might just be enough to keep the series running.
Matt
Thanks for the helpful information Matt.
Reed,
a pleasure.
Matt
CSS3 and Java script can be added to this list though I use word press mostly. These tags are very important in blogging. They make the search cheap and worthy it.
Carmen,
that’s two votes for a follow-up. I’m happy to look at CSS3. Did you mean Javascript though?
Matt
Thanks Matt, i bought the book “html for dummies” and still dont understand a lot of it but you have made it look simple Thanks
Phil,
I’m happy to have helped you pick up one of my true passions. Let me know if you’d like more in the series.
Matt
Great, if possible , you can add more with the onpage optimization for wordpress .
Thanks
Thanks Matt. anything on wordpress would help alot of us plus any good plugins would be a good helpful