Close
Close

Essential HTML for Bloggers Part 2

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.

Linked post example

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.
Link buttons

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.

Link dialog

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="http://www.problogger.net/archives/2012/09/05/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 <a> and </a>.

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:

Example of internal links

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.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Gilbert says:

    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.

  2. Tracey says:

    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.

  3. 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.

  4. Syed Tech says:

    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

  5. Ewan Felter says:

    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

  6. Rick says:

    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

  7. Ben Troy says:

    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

  8. zak says:

    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

  9. 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.

  10. Janet says:

    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

  11. Melvin says:

    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

  12. Just beginning to work with HTML and its been challenging. Great info on internal and external links

  13. 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.

  14. Joy says:

    Thanks. I didn’t know about the internal links..

  15. Shelby Roth says:

    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

  16. 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!

  17. This is Very informative article very helpful, Thanks for sharing ..

  18. Thanks a lot Matt. I love the links and I am hoping for a third post on the same.

  19. Reed Nixon says:

    Thanks for the helpful information Matt.

  20. 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.

  21. Phil says:

    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