Geeks With Blogs

expression{web.blog} Thoughts on Expression Web and web tools in general

The traditional way to create named anchors (bookmarks) on a page was to use

<a name="top">Top of page</a>

If you are working in HTML5 you'll find that your web editors intellisense (if you have a decent one) highlights this as an error, although it will still work in current browsers.

If this really is a syntax error, what's the valid HTML5 way of doing this?

Well, it's very simple and has been supported by most browsers for several versions, you give the anchor/bookmark an ID and target that in your link.

<h1 id="top">My web page</h1>

with the 'top of page' link being

<a href="#top">Top of page</a>

Posted on Friday, July 12, 2013 2:04 AM HTML5 , Anchor | Back to top


Comments on this post: Named anchors in HTML5

# re: Named anchors in HTML5
Requesting Gravatar...
thanks for this : stupid question... an "id" is typically something that is entered in to your css stylesheet. Seeing no mention of this (above) I presume that for the html5 "name" anchor tag one does not need to do this ?
Left by Mark on Feb 12, 2014 4:16 PM

# re: Named anchors in HTML5
Requesting Gravatar...
An ID can be used as an identifier for several reasons, for CSS, JavaScript and as a location like this. If you wanted to style the anchor ID you could do in CSS but it doesn't need to be. HTH
Left by Ian Haynes on Feb 12, 2014 10:44 PM

# re: Named anchors in HTML5
Requesting Gravatar...
Why is it, that when I click on a link to an anchor/div, that the browser window never stops at the top of the div, but always slightly below? I can't get the browser to display the whole div exactly from the top.
Left by Nick on Apr 24, 2014 9:55 PM

# re: Named anchors in HTML5
Requesting Gravatar...
Nick, try adding this to it:

.namedAnchor:before {
display: block;
content: " ";
margin-top: -100px;
height: 100px;
visibility: hidden;
}

Adjust the height and margin-top as necessary to fit your situation. This is also useful if you have a fixed navigation or header of some kind.
Left by Dave on Oct 20, 2014 1:32 AM

Your comment:
 (will show your gravatar)
 


Copyright © ihaynes | Powered by: GeeksWithBlogs.net | Join free