Best way to create a bookmark

Hi - I’m confused. Some time back sitepoint forums told me to use this to create a target:

<div id=“target”></div>

to replace the old <a name=“target”></a>

But now this page:

says the format should be:

<a id=“tips”>Useful Tips Section</a>

this is the original feedback I received in forum:

-----begin feedback-----

<a name=“recipe”></a> - not good to use, but if you do, it must be in a content-containing element, ie a <td> or <th>. If the anchor isn’t legally placed inside a table cell, it bobs up to sit on top of the table.

It’s much better to put id=“recipe” on the element you want to jump to, rather than messing around with named anchors.

-----end feedback-----

The original problem is that browsers did not to go to the text inside a table cell when I was using <a name=“recipe”>. Instead it went to the top of the table.

Which is better to use to create a bookmark anywhere in doc (both inside and outside table cells):

<div id=“target”></div>

or <a id=“target”></a>

I never enclose text within the bookmark, the way W3schools does. I always place the target immediately before the text that I want to target.

I’m not sure if it’s called bookmark or target. But you reference it like this:

<a href=“#target”>

thanks, Val

[in this context] The name attribute can only be used on anchors (<a>), whereas the id attribute can be used on any element you like (<div>, <p>, <tr>, <td>, whatever).

Which one you choose is up to you, there are no strict rules for that.

W3C says:

http://www.w3.org/TR/html401/struct/links.html#h-12.2.3

Hi - thank you! I’m not sure I understand you. Are you saying it’s okay for me to continue using

<div id=“target”></div>

thanks! - Val

Val, this is called a “fragment identifier”. To identify an element on the page (that is, provide a hook so that you can jump directly to that element), add an id to the element. E.g.

<div [COLOR="#FF0000"]id="target"[/COLOR]>
 ... content here ...
</div>

So, let’s say that div appears way down one of your pages. The id allows you to do two things.

  1. You can place a link somewhere else on the page, so that people can click the link and jump to the “target” div. E.g. Let’s say you have this at the top of your page:
<a [COLOR="#FF0000"]href="#target"[/COLOR]>Jump to the Target div</a>

Clicking that link will cause the browser to jump to the target div, which will appear at the top of the browser if there’s enough space below it to allow this.

  1. You can link to the target div from outside the page with a URL like this:
http://mysite.com/mypage.html[COLOR="#FF0000"]#target[/COLOR]

Hi - I don’t enclose any text inside the bookmark div. This is the way I’ve been doing it for years, and it’s working:

-----begin example-----

<p>Here we are talking about <a href=“#carrot”>carrot cake crackers</a> and how delicious they are.</p>

<div id=“carrot”></div>
<h2>Carrot Cake Cracker</h2>
<p>these are the ingredients you need for carrot cake crackers</p>
<p>etc…
-----end example-----

Then I got worried when I saw w3schools example of:
<a id=“tips”>Useful Tips Section</a>

So my question was do I need to change it all to:

<a id=“carrot”></a>
<h2>Carrot Cake Cracker</h2>
<p>these are the ingredients…

In the old days (before the earth was born) I did it this way:
<a name=“carrot”></a>
<h2>etc…

If it’s not needed to change it all to w3schools example, then I won’t because there’s dozens of bookmarks on my site!

thanks :slight_smile: Val

No, definitely not. There’s no advantage in that at all (and w3schools has a poor reputation anyway. :slight_smile: )

What would be much better would be to do this:

<p>Here we are talking about <a href="#carrot">carrot cake crackers</a> and how delicious they are.</p>

<h2 [COLOR="#FF0000"]id="carrot"[/COLOR]>Carrot Cake Cracker</h2>

That’s the most reasonable way to do it, and certainly best practice. No need for empty, unsemantic elements in your HTML.

Oh I see, so I never use <div>> I always just add the bookmark to whatever’s there, e.g. if it’s a paragraph I want to bookmark then it’s:

<p id=“carrot”>Carrot cake tastes good.</p>

or if it’s in a td, then it’s:

<td id=“carrot”>text inside cell</td>

thank you! - Val

Yep. :slight_smile: