PDA

View Full Version : jump to a different spot on a page...what's the tag sequence?



code beginner
Apr 28th, 2010, 04:04 AM
hello,

this should be an easy one for some of the experienced html coders around here.

i'm trying to refresh my memory on how to create an internal page jump link. for example, say it's a long page and you want to make the visitor's life easier. so they click on the jump link and the page jumps to the exact spot they want to be.

the w3 schools site has something like this:

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

filler
filler
filler
filler
filler
filler
filler
filler
filler
filler
filler

<h2><a name="C4">Chapter 4</a></h2>
<p>whatever you want to place here</p>


it seems that there is a pattern:

first you put an href with a number sign. that's the launching pad. then your landing pad uses <a name =... like this:

<a href="#frisbee">jump to the frisbee section by clicking here</a>
<a name="frisbee">congratulations, you landed on the frisbee section</a>

so, basically, i'm wondering if that is the definitive pattern for how this is done, or if there are other common ways to do this. it seems strange for me to place a number sign there.

also, i'm wondering if that id (in this example "frisbee) can be styled with CSS. meaning, is that id taggable as a CSS ID, or do you have to wrap the <a name> block in a CSS div tag.

thanks for any insights.

VIPStephan
Apr 28th, 2010, 04:06 AM
<a href="#your_id">text</a>



<div id="your_id">content</div>


The element that has the ID can be any element, it doesn’t have to be a div.

code beginner
Apr 28th, 2010, 04:33 AM
that's great to know! i didn't know it could be freed from the <a> paradigm.

that being said, if you wanted to apply css to the landing spot, i'm guessing you would have to surround it in a distinct css div like this:

<a href="#your_id">text</a>



<div id="have css make the text here blue">
<div id="your_id">content</div>
</div>

VIPStephan
Apr 28th, 2010, 11:27 AM
1.) You don’t have to use named anchors, indeed. And in fact, the name attribute should not be used anymore as it’s deprecated (except on form controls like input, textarea, select).

2.) The hash character (“#”) is not actually a “number sign” in this context. In web context this is the separator for a fragment identifier (http://en.wikipedia.org/wiki/Fragment_identifier), don’t let that confuse you.

3.) The ID of the target element is a regular ID, of course. So as a result of that you can use it as CSS selector and style this and related elements, of course:


<h1>Frequently Asked Questions</h1>
<ul>
<li><a href="#q1">Who am I?</a></li>
<li><a href="#q2">What’s the meaning of life?</a></li>
<li><a href="#q3">Are we the only life in universe?</a></li>
</ul>
<dl>
<dt id="q1">Q: Who am I?</dt>
<dd>A: You are a valuable individual but you can only answer this question yourself.</dd>
<dt id="q2">Q: What’s the meaning of life?</dt>
<dd>A1: Consume and reproduce.</dd>
<dd>A2: According to naturalistic pantheism, the meaning of life is to care for and look after nature and the environment.</dd>
<dt id="q3">Q: Are we the only life in universe?</dt>
<dd>A: We’ll see.</dd>
</dl>



dt {
font-weight: bold;
color: #333;
}
dt#q2 {color: blue;}
#q2 + dd {text-decoration: line-through;}