Created on April 6, 2021

Anchor Points

I suppose now's a good time to go back on the subject of heading text and links. I've mentioned before how the <a> is used to link to other pages and files, but it can also be used to mark and jump to certain points within the same page. This feature is very useful if you plan to write long pages, especially when combined with a table of contents.

How do anchor points work? If you've been on Wikipedia, you probably already have an idea of their function. I've set this paragraph as a landing zone which the immmediate next link should take you back to. Scroll down a bit to find the link, then click on it. If it does exactly what you expect it to, proceed. The image below separates the anchor point from the link a bit.

Click on the Button !

Okay, this image is a bit of a small fry, so if you have a large enough display, you may not have had to scroll down at all. Still, I know for sure this works on most any browser save for a very few that may be too primitive for such a thing... are there even any like that? In any case, implementing anchors is very simple. To assign an anchor point somewhere on your page, you use the <a> with the name= attribute as opposed to href=. The data in name= should be a unique identifier in the page, as reusing names most certainly won't give you desirable results. You can name it whatever you want, but you should keep it all lowercase and use hyphens (-) instead of spaces.

This is how my anchor point was typed:

Notice how this container doesn't encapsulate any visible text. It can, but I don't find it all that useful to do so since the anchor point won't be clickable unless you also add an href= attribute to it linking to that same name. Plus, most headings would end up having a link color to make them considerably more obnoxious.

On a side note, the HTML4 way of creating anchor points would be assigning the id= attribute to a heading tag, which gives it the added perk of being able to be manipulated by a style sheet if you really want that. For the browsers we're targeting, though, anchor names will be used instead.

Now, to create a link to an anchor point, you'd type something like this:

Note that in the data for href=, the anchor name is preceded by a pound symbol (#). This tells the browser that what you're linking to is an anchor point, and it should try to scroll to a matching name when the user clicks on it.

You can also link to an anchor point in an outside page by trailing the URL of said page with the anchor name using the same convention. For example, I can create a link that jumps to a detailing of my Pentium MMX build overclocked to 315MHz in a page from Bigeye:

Now try it yourself, and see that your browser scrolls right to that point automatically: Overclocking Is Always Bad

In some early browsers like IE1, the anchor name won't show up in the address bar when you click on the link, but it should still work in any case. Anchor points are a very nifty way to enhance navigation in your site. There's no scripting to it, just very basic tags. In the next page, we'll take the usefulness of this feature further by creating a table of contents list.

Text Alignment

For now, let's detail another thing that can really come in handy in certain situations... text alignment! There are a couple of ways to do this, but I'll start with the more prevalent one. Some tags, such as those used for headings and paragraphs, can be given the align= attribute with one of three names: left, center, and right. The code below will align the resulting text to the right of the screen...

Whales are not fish, they are reptiles.

When it comes to aligning images, it's slightly more complicated as there are five alignment names you can use, while center just so happens to not be valid in this specific instance. You now have top, middle, bottom, left, and right. So how does an image get aligned to the center the old-fashioned way?

and some text...

Well, that sure didn't come out the way I expected it to! Turns out image alignment actually controls how any text right next to an image will be aligned. If you really want to center an image, a new and rather strange tag must come into play... <center>.

Why is <center> so odd? The short answer is that there is no such <right> tag to accomplish the same thing for right alignment! Now, the <center> tag being used all across a page is a bad GeoCities trope that you should probably avoid, but it's the way to go for centering various elements as well as ordinary text. Let's try it now...

There we go! Do note that the <center> tag and align= attribute are not valid in HTML4 Strict and later, so you'll have to combine two solutions for both sets of standards if this is of concern to you.

No Tags at All???

It is very much possible to type in visible contents for a web page without encapsulating them in any tags apart from the obvious <body> container. You just type text as is... or so you think.

Yes, I'm am stills heres !
I made a lto of money selling CDs of me
spitting into mic for 5 hours
Now I haves a Locomotive

So how did that turn out?

I hit the enter key and it just took that as a space bar... yes, in the world of HTML, line breaks need to be explicitly defined using the <br> tag. Let's try this again...

Yes, I'm am stills heres !<br>
I made a lto of money selling CDs of me
spitting into mic for 5 hours<br>
Now I haves a Locomotive<br>

Okay, now that's more like it! Keep in mind that a line break is very distinct from a separate paragraph as the latter adds a bit of extra padding around it.

Horizonal Rules, Vertical Sucks

While I'm still here at this otherwise short page, I may as well mention a tag that looks very similar in code, being <hr>. All you really need to know is that this generates a horizonal line spanning much of the window's (or cell's) width.

This tag should not be used frequently, but even then, it is much more efficient than having a ton of hyphens, and has the added benefit of automatically adapting to any size.

Previous: Images and Text Styles

1 2 3 4 5 6 7 Back to introduction

Next: Making a Bad PowerPoint

Comments

Pretty useful tutorial. I'm acftually following this to make my website.

This tutorial is awesome, learned a lot! Definitely will be putting these skills to use!

2 comments on this page

Sort: Ascending | Descending

Leave a Comment