When you’ve been creating web pages as long as I have, it’s easy to start thinking you’re hot stuff. Then along comes some perfectly obvious little html shortcut that you’ve been overlooking for a decade. It tends to humble you pretty quickly!
And judging by the response at the DreamweaverClub.com forum, I wasn’t the only one surprised by this one. So I thought I’d share it with you.
As you know, when you link to a page using a normal link (such as <a href=”http://www.dwcourse.com”>DWcourse</a>) the link takes you to the top of the page. And, as many of you no-doubt also know, you can also insert an empty, non-link Anchor Tag (such as <a name=”item” id=”item”></a>) into your page and then link directly to the location of the Named Anchor within the page like this <a href=”http://www.dwcourse.com#item”>Link directly to item on DWcourse page</a>. To insert a named anchor in Dreamweaver select menu: Insert>Named Anchor.
Now here’s the obvious html fact that that I’d been overlooking. You don’t have to insert a named anchor into your page to link to a specific point within the page. You can link directly to any named object within your page. For instance, if you want to link to particular sub-sections of your page, each of which begins with an level 2 heading <h2> you can give each h2 a unique ID and link directly to it. In Dreamweaver you can assign an ID to an html object by selecting the object and typing the ID into the ID field in the Properties Inspector.
So, if your page looks like this:
<h1>Main Headline</h1>
<h2 id=”section1″>section 1 </h2>
content for section 1
<h2 id=”section2″>section 2 </h2>
content for section 2
<h2 id=”section3″>section 3 </h2>
content for section 3
You can link directly to section 2 from within the current page like this: <a href=”#section2″>Section 2</a> or from another website like this: <a href=”http://www.dwcourse.com#section2″>DWcourse Section 2</a>. No need to clutter up your code with an empty Named Anchor!
And, to point out the (now) obvious, the # (number sign) within a link refers to a named html object within the page, just as a # within a CSS selector refers to a named object.
{ 1 comment }
