Skip to main content

Putting Anchors, and HTML, In Your Posts

Blogger blogs are coded in HTML.

This post is displayed in two sections.

If you want to include something besides plain text in your post, you code it in HTML.

Displaying HTML

The HTML is displayed as ("rendered into") whatever you code (when you get it right). One very useful feature of HTML is Anchor Tags, which you can find described in my Anchor Tags tutorial, below.

This works great, when you want to display something interesting. Occasionally, though, you will want to instruct someone else how to display something interesting. My tutorial on using images in your blog, Image Test (OK, I know it's a lame name), is me trying to show you how to code HTML. So I have to show you both the HTML, and what the HTML produces.

Look at the Hyperlink example in the tutorial.
<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>

How did I display the HTML here, rather than the link itself?
Check This Out


Well, wouldn't you like to know?
No, Chuck, don't be a jerk.

OK, I will be nice here. It's a simple enough process, anyway. HTML is nothing but a lot of special code, enclosed in "<" and ">" characters (see my Hyperlink example, for instance).

1. This is the code used ...
&lt;a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture"&gt;
Check This Out&lt;/a&gt;

2. ... to display this.
<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>
And that is the code used ...

3. ... to display this
Check This Out

If I want to instruct how to code #3, I display #2, by putting #1 into the post editor window.

If you want more information about using "&" code, see (among many articles on the web) HTML Goodies So, You Want An "& Command", Huh?.

I'll leave it to you to figure out how I typed "&lt;" and "&gt;", without getting "<" and ">".

Anchor Tags

Anchors are an entirely different feature. In order to show how you use anchors, though, I included the subject of Anchors with my tutorial on posting HTML.

To explain how I display the code below, I'll refer you to the HTML Display tutorial, above. And that's basically why I put both subjects into one post.

If you have a long post, with multiple sections, like this article, you can carve the post into logical sections. You can link to the various sections, just as you link to individual posts. From here, we can jump (back) to the HTML Display tutorial. Click it and see.

So, how did I do that? Well, this trick is in two parts.

  • The anchor.
  • The link to the anchor.
I'll show two examples here.
  • At the top of this article, we have an invisible ("blind") anchor. You don't see it, though it's there.
    <a name="HTMLTutorial"></a>
  • And here, we have a plain old hyperlink, but one pointing to that anchor.
    From here, we can jump (back) to the <a href="#HTMLTutorial">HTML Display tutorial</a>. Click it and see.
  • This section of this article is headed by a visible ("sighted") anchor.
    <a name="AnchorTagsTutorial"><span style="font-weight:bold;">Anchor Tags</span></a>
  • And, we can likewise jump (back) to the top of this section, the Anchor Tags tutorial. Click it and see.
Of course, the whole idea of anchors is to allow you to jump straight to sections of a long post, from outside the post. So we will again look at Image Test, within which you find my Hyperlink example anchor.
<a name="Hyperlink"><span style="font-weight:bold;">A Hyperlink</span></a>
Please go there, and see for yourself. And, in the immediately above example,
So we will again look at <a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html">Image Test</a>, within which you find my <a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html#Hyperlink">Hyperlink example anchor</a>.

After you add anchor links to your post, don't move between "Edit HTML" and "Compose" modes, when editing your post. Learn to stick in one mode - or you will regret your editing. Of course, you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.

Comments

Unknown said…
Hi,

I would like to test a hyperlink that I learned to use here Thanks if it works.
thekatsmeow said…
Hi, do you know why it works when you create the blog post but if I go back into the post to edit in any way, the links automatically change from #whatever to http://www.(the url of my edit page)#whatever ?

Thanks!
Nitecruzr said…
Meow,

No, I don't know. And that has always intrigued me.
meowsqueak said…
That reversion to the edit URL is really, really annoying.
Nitecruzr said…
That reversion to the edit URL is really, really annoying.

Many things Blogger does are really, really annoying. Why not tell us more about what you need to do - sometimes, there's a workaround for the annoyances.
so what i am trying to do is rather than have the anchor on the same page of my blog, lets say from home with all my posts, i would like to go to an anchor on the about me page. is this possible and please let me know how it may be done.
thanks,
dg
PipSqueak42 said…
Thank you so much for this post! This really helped me figure out what I needed to do, and helped me make my page work the way I wanted it to. So excited it finally worked!!!
Unknown said…
Hey,
Thanks for the info. I didn't understood the thing with the anchors, but I viewed your source code and I got it now :D
Thanks again
Fahim Raza said…
Nice post Its really helpful.

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".